70915


HTML

[code]

    <ul id="parent">
    <li id="first">1番目</li>
    <li id="second">2番目</li>
    <li id="third">3番目</li>
    </ul>
    
[/code]

JS

[code]

    const target = document.querySelectorAll('li')[1];
    console.log(target);
    
    const parent = target.parentNode;
    console.log(parent);
    
[/code]

上のHTMLに上記のようなJavaScriptを記述するとコンソールには以下のように結果が出てきます。

結果:

[code]

    <li id="second">2番目</li>
    <ul id="target">..</ul>
    ↓
    ▶ <ul>
    <li id="first">1番目</li>
    <li id="second">2番目</li>
    <li id="third">3番目</li>
    </ul>
    
[/code]

上記では親ノードを取得したものですが、下記の文は子のエレメントを取得しようとして記述したものです。

[code]

    const base = document.getElementById('parent');
    const children = base.children;
    console.log(children);
    
[/code]

するとコンソールに出力された結果は以下のようになります。  
どちらも親から見た子をあらわしているはずです。  
なぜ以下のようにHTMLCollectionと出るのでしょうか？  
まだJavaScriptの学習中で「階層関係からみた要素の取得」という項目です。  
そもそもHTMLCollectionとは何なのでしょう？  
検索してみたのですが、この件に関わる部分に該当するものが探せませんでした。

初心者にでもわかりやすいように教えてください。  
よろしくお願いいたします。

[code]

    HTMLCollection(3) [li#first, li#second, li#third, first: li#first, second: li#second, third: li#third]
    0: li#first
    1: li#second
    2: li#third
    length: 3
    first: li#first
    second: li#second
    third: li#third
    __proto__: HTMLCollection
    
[/code]


CC BY-SA 4.0
2020-10-02T06:51:33.017
70882
2020-10-05T01:42:44.420
2020-10-03T06:50:55.487
32986
42150
question
javascript dom
HTMLCollectionとは？


> するとコンソールに出力された結果は以下のようになります。  
>  どちらも親から見た子をあらわしているはずです。

いいえ。  
前者は飽くまで親である`<ul>`を表現する`HTMLUListElement`オブジェクトをコンソールに表示しただけです。コンソールが気を利かせて`<ul>`の子供も確認できるようになっていますが、それはコンソールの機能であって、あなたが書いたコード
`console.log(parent)` は「子」を表現しているわけではありません。

後者は「`parent`のすべての子供ノード」を表現する`HTMLCollection`オブジェクトをコンソールに表示した結果です。`base.children`
は1つの値しか返せないので、子供ノードすべてを返すためにはそれらをまとめて1つのオブジェクトして扱う必要があり、そのまとめた結果が`HTMLCollection`オブジェクトです。配列に似ていますが、配列とは違う面が少々あります。

`console.log()`にオブジェクトを指定した場合、通常は`HTMLCollection`の場合のようにすべてのプロパティが表示されますが、前者のようなDOMノードの場合はわかり易くなるようにHTMLソースのような形式で表示されるようです。


CC BY-SA 4.0
2020-10-05T01:42:44.420
70915
2020-10-05T01:42:44.420
3475
70882
answer