- 締切済み
【JavaScript】DOMのノードの数え方
以下のHTMLに対してその下のJavaScriptを記述しました。 コンソールについている番号をその下のHTMLに書き込んでみました。 ▶は改行、もしくはタブによる空白をあらわしています。 自分が学習した範囲（添付画像）だと、全ての<li>～<li>の後に改行やタブによる空白もカウントされるものと思っていました。 一番下に自分で書いてみた番号とNodeListの番号の対応は合っていますか？ １つ目、あるいは２つ目の</li>の後の改行やタブによる空白は含まれないのでしょうか？ NodeListの一番最初と、一番最後は”text”になっていますが、これは改行を示しているのでしょうか？ それともタブ等による空白を示しているのでしょうか？ いずれにせよ最初と最後だけに"text"がついているのが腑に落ちません。 DOMのノードの数え方について初心者にも分かりやすいように教えていただけないでしょうか？ よろしくお願いします。 (HTML) <ul> <li>item</li> <li>item</li> <li>item</li> </ul> (JavaScript) const ul = document.querySelector('ul'); const list = ul.childNodes; console.log(list); ---------------------------------------------------- (コンソール:結果) NodeList(7) [text, li, text, li, text, li, text] 0: text 1: li 2: text 3: li 4: text 5: li 6: text length: 7 __proto__: NodeList ↓↑ <ul> ▶(0)<li(1)>item1(2)</li> <li(3)>item2(4)</li> <li(5)>item3(6)</li>▶(7) </ul>
- blueletter12345
- お礼率27% (26/94)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- asciiz
- ベストアンサー率70% (6823/9703)
＞自分が学習した範囲（添付画像）だと、全ての<li>～<li>の後に改行や ＞タブによる空白もカウントされるものと思っていました。 その解釈で正しいと思いますよ。 もっとわかりやすいHTMLで試してみましょう。 例えば、このようなHTMLを作ってみます。 ---- nodetest.html ---- <html> <head> <title>node test</title> </head> <body> <ul>blank1 <li>item1</li>blank2 <li>item2</li>blank3 <li>item3</li>blank4 blank5 </ul> <script type="text/javascript"> document.write("javascript running"); const ul = document.querySelector('ul'); const list = ul.childNodes; console.log(list); </script> </body> </html> ---- end ---- このHTMLを表示してみても、コンソールを開くとChildNodeの数は7つです。 で、どう分かれたかというと、 0: "blank1(改行)" 1: <li>item1</li> 2: "blank2(改行)" 3: <li>item2</li> 4: "blank3(改行)" 5: <li>item3</li> 6: "blank4(改行)blank5(改行)" こういう7つです。 ・タグでくくられた物は、1要素として扱われる。 ・空白や改行は、ノードの区切りにならない。ただの文字として扱われる。 そんな風に考えれば良いと思います。 あと、Chromeのコンソールだと、「NodeList(7) [text, li, text, li, text, li, text]」の左にある三角をクリックすれば、さらに展開でき、「text」や「li」として取り込んだ中身がどういう物か詳細に確認できます。 ただそうやって開いても、この例のように blank とか書いてないと改行マークが表示されるだけで、混乱するでしょうけど。 item の方も、この例のように区別できるように書いておけば、それがどこに該当したのか探すことが出来ます。
