DOMのchildNodesについて
- querySelectorAllで取得した要素の子要素を配列で取得する
- 配列の要素は、取得した子要素の順序に対応している
- childNodesを使用すると、テキストノードも含まれることに注意する
- ベストアンサー
DOMのchildNodesについて
htmlに 以下divタグ(idというid属性と持つ)をもつ内容を記述しました。 ●html <div id="id"><i>サンプル内容</i>とは</div> 次に、childNodesで取得しようと思うのですが、 document.getElementById("id").childNodes と記述した時、 childNodesの戻り値に、返される配列はどうなるのでしょうか？ id[0]は、i要素。 id[1]は、テキストノードとなる。 と本に書いているのですが、 id[2]以降(id[3]、id[4)等]が何になるのかわかりません。 ●予想 id[2]は </i> id[3]は とは と思い、alertで出力してみたのですが結果がnullになって分からないのです・・・。 どなたか、childNodesの動作をご教授お願いできないでしょうか。 おねがいします。
- kureakai
- お礼率69% (179/256)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
DOM を学ぶ前に、もう少し HTML についての理解を深めるといいよ。 まず、基本の復習ね。 HTML の要素は、開始タグではじまって <要素名 0個以上の属性がつづいて 属性名="属性の値" 属性名="属性の値" …… 開始タグを終えて > 0個以上の子要素がつづいて 最後に閉じタグでおわるよ。 </要素名> 子要素は おなじように 開始タグではじまって、 0個以上の属性がつついて 開始タグを終えて 0個以上の孫要素がつづいて 閉じタグでおわるか、 または、1つ以上の文字と空白が続くテキスト要素があるよ。 この基本を、 <div id="id"><i>サンプル内容</i>とは</div> へあてはめると id="id" を持つ div 要素の子要素は "サンプル内容"というテキスト要素を子要素に持つ、i要素 と "とは" というテキスト要素 の 2個となるね。 つまり、子要素が 2個しかないのに .childNodes の 3番目の要素を取り出そうとしたから、『無い(null)』がかえってきた、ということ。 ちょっと細かいけど…… .childNodes は要素の配列じゃなくて、NodeList という要素の集合で、 .childNodes.item(0) .childNodes.item(1) のように子要素をとりだすよ。
その他の回答 (1)
- hitomura
- ベストアンサー率48% (325/664)
id[0] = <i>サンプル内容</i> id[1] = とは id[2]以降はありません。 xx要素といった場合は<xx>から</xx>までを指します。
お礼
情報ありがとうございます。 要素は、<xx>から</xx>までをさすのですね。 勘違いしておりました。
関連するQ&A
- DOMを使ったテキストノードの繰り返し書き換え方法
pタグにtestという文字を入れるようにしたいのですが、ブラウザがかたまってしまいます。 考え方としては間違っていないと思うのですが、なぜでしょうか。 <html lang="ja"> <head> <title></title> </head> <body> <div id="aaa"> <p></p> <p></p> <p></p> </div> <script> var pels = document.getElementById("aaa"); var pp = pels.childNodes; for(i=0; i=pp.length; i++){ //i%2==0で空白テキストノードを除く if(i%2 == 0){ pels.childNodes.item(i).nodeValue = "test"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- javascriptのDOMについて
こんにちは、早速ですがご質問させていただきます。 ・質問内容 <div id="contents">の子ノードである<div id="d1">を[alert(document.getElementById("contents").firstChild.nodeType);]で確認したところ、なぜか「３」と表示されました。nodeNameなどで確認しても「#text」と表示されてしまいます。 なにが原因なのでしょうか。 【javascriptの内容】*外部読み込み var Samp = { test : function () { alert(document.getElementById("contents").firstChild.nodeType); }, } 【htmlの内容】 <body> <div id="header"></div> <div id="contents"> <div id="d1"> 111 </div> <div id="d2"> 222 </div> <div id="d3"> 333 </div> <div id="d4"> 444 </div> </div> <div id="footer"> <button onClick="Samp.test()">onPress</button> </div> </body> 【環境】 OS:Mac OS X ブラウザ:Firefox 3.0 エディタ:Dreamweaver ご教授のほどヨロシクお願いいたします。
- ベストアンサー
- JavaScript
- イベントに適切な値が伝わらない
0から9までidをもつdivを用意して、それぞれクリックしたら そのidを表示したいのですが、なぜかどれをクリックしても 表示されるのは「10」でした。以下のやり方では何がいけないのでしょうか？ function sample(){ for(i=0; i<10; i++){ var obj = document.getElementById(i); obj.onclick = function(){ sample_alert(i); }; } } function sample_alert(i){ alert("i="+i); } window.onload = function() { sample(); } for($i=0; $i<10; $i++){ print "<div id=\"{$i}\">{$i}</div><br>\n"; }
- ベストアンサー
- JavaScript
- [JS] childNodesを置き換える
あるノードのchildNodesを別のノード配列オブジェクトに置き換えたいです。 以下のようにしてみました。 var nodes = new Array(); nodes[0] ... nodes[n] を作成。 var target = document.getElementById("id"); target.childNodes = nodes; この処理はFF10ではスルーされてしまうようです。 １つずつappendChildしないで設定する方法はありますか？
- ベストアンサー
- JavaScript
- 同じIDで定義した要素の配列を取得したいが
お世話になります。 ドキュメントで、IDに同じ名前を振付けることで 配列になっている要素を取得する方法を教えたください。 例) <div id="sec1">あああああ</div> <div id="sec1">いいいいい</div> <div id="sec1">ううううう</div> <div id="sec1">えええええ</div> 上記のようなケースだと、「sec1」が配列となって、 定義されますが、実際に取得して使う場合です。 getElementById("sec1")だとnullになりますが、 getElementById("sec1[0]")だと一つずつは取得できます。 これをまとめて配列として取得する方法をお願いいたします。 初心者ですみません。
- ベストアンサー
- JavaScript
- firefox、opera等での番号の数え方
現在Javascriptを勉強中で 教材中での疑問なのですが 下の記述でどうしても腑に落ちないことがあります。 IEの方の[]の中の番号の数え方は分かるのですが firefox用ではどういう数え方をすれば node[0].childeNodes[5].childeNodes[1].innerHTML......... という数え方になるのでしょうか？ 開始タグと終了タグを分けて数えているのでしょうか？ 分かる方回答お願いします。 // IE用 function change(){ var node = document.getElementsByTagName("body"); node[0].childNodes[2].childNodes[0].innerHTML = "変更しました"; } // FireFoxやOpera用 function change(){ var node = document.getElementsByTagName("body"); node[0].childNodes[5].childNodes[1].innerHTML = "変更しました"; } --------HTML---------- <body> <h1>サンプル３</h1> <p>ここが変わります。</p> <div> <p>深いノード1</p> <p>深いノード2</p> </div> <form> <input type="button" value="変更" onclick="change();"> </form> </body>
- ベストアンサー
- JavaScript
- innerHTMLに代入したインラインフレームのＤＩＶの値の取得について
下記のソースは「読み込み」ボタンを押した時にあらかじめ用意してた<div id="box">にインラインフレームを代入し、「値取得」ボタンを押したら、'sample.html'内のdivの値「keisan」をアラートで表示する記述です。このソース内容を、ボタンのイベントで「keisan」の値を取得するのではなく、<body>のonLoadでページを開いた瞬間にアラートが 出るようにしたいのですが、お分かりになる方はいらっしゃいますでしょうか？ わかりにくい説明ですみません。どうかよろしくお願いします。 <html> <head></head> <body> <div id="box"></div> <input type="button" value="読み込み" onClick="Details.changeURL('sample.html')" /> <input type="button" value="値取得" onClick="Details.showMessage('keisan')" /> </body> <script type="text/javascript"> <!-- var Details = (function(){ var handle = document.getElementById('box'); var buffer = null; return { changeURL: function(url){ handle.innerHTML = "<iframe src=\""+url+"\" id=\"ifr\"></iframe>"; }, showMessage: function(id){ buffer = document.getElementById('ifr').contentWindow.document; alert(buffer.getElementById(id).innerHTML); } } })(); //--> </script> </html>
- 締切済み
- JavaScript
- ループ内のaddeventlistner
javascript初心者です、いろいろ検索したのですがわからず 教えてください。 サンプル <div id="hoge"></div> <script type=application/javascript> window.onload=function () { var html="検索エンジンのビッグ３" var big3= [ { "name":"google", "url":"http://google.com" }, { "name":"yahoo!", "url":"http://yahoo.com" }, { "name":"bing", "url":"http://bing.com" } ]; for (var i = 0, len = big3.length; i < len; i++) { html+= "<br />名前:"+big3[i].name+"<br />"; html+= "URL:"+big3[i].url+"<br />"; html+= '<input type="button" id="btn" value="投票" /><br />' }; document.getElementById("hoge").innerHTML=html; } </script> ----サンプルここまで このように配列をずらずらっと表示させてそれぞれのボタンを押すと、 その時の配列の情報を参照したいのです。 下のコードをボタンのすぐ下に置きましたが、cannot call method addEventListener of nullってエラーでできず、for文の外だと配列情報がとれず、基礎がわかっておらずすみませんが教えてください。 document.getElementById("btn").addEventListener('click',function(){alert("あなたがおしたのは"+big3[i].name)},false);
- 締切済み
- JavaScript
- 動的にonclickを割当ながら、引数を正しく渡す方法を教えてください。
皆様のお知恵を拝借させてください。 以下のように、HTML上の<div id="contents">の子になっている <div>のa～cに、動的にonclickの動作を割り当てようとしています。 Javascriptの独自関数abcの引数として、"contents"を渡すことにより、 その子となっている<div>を取得し、 それぞれについて、 「A～Cをクリックすると、それに該当するdivのidを表示する」 という内容になっています。 私の期待としては、 Aをクリックするとa Bをクリックするとb Cをクリックするとc を表示させたいのですが、 どれをクリックしてもcが表示されてしまいます。 ---------------------------------------------- <div id="contents"> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div> </div> <script> abc("contents"); function abc(contents){ var elm = document.getElementById(contents); var cn = elm.childNodes; for (var i = 0; i < cn.length; i++) { var oElement = cn[i]; ★ document.getElementById(oElement.id).onclick = function(){def(oElement.id);}; } } function def(id){ alert(id); } </script> ------------------------------------ 要するに、 「動的にonclickの動作を割り当てることができる」 「引数がただしく渡せる」 の2つが満たしたいのですが、上記のような方法しかわからず、 行き詰ってしまっています。 また、説明を簡略化するためにあえてdef()の中身は、 alertのみにしていますが、実際にはもう少し複雑な処理をさせています。
- ベストアンサー
- JavaScript
- [javascript][DOM]getElementByIdやremoveChildの戻り値と処理の結果
以前から気になっていたけれど聞かなかったこと。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>QFUMEI テストケース1</title> <script type="application/ecmascript"> function init(){ var hoge = document.getElementById("hoge"); var fuga = document.getElementById("fuga"); hoge.removeChild(fuga); alert(fuga); // [object HTMLParagraphElement] ← nullではない fuga = document.getElementById("fuga"); alert(fuga); // null } </script> </head> <body onload="init();"> <div id="hoge"> <p id="fuga">ほげ</p> </div> </body> </html> 結局 fuga = getElementById("fuga")によって 何が代入されているのでしょう？ document上のp#fugaへの参照であれば removeChildの直後 fuga = nullとなっていてもよさそうだなと思っているのですが・・・・。 hoge.firstChild.nodeValueをいじるとp要素内の文字列が変化するし・・・・
- ベストアンサー
- JavaScript
お礼
情報ありがとうございます。 また詳細に書いて頂きありがとうございました。 理解することができました。