0

HTML

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

JS

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

const parent = target.parentNode;
console.log(parent);

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

結果:

<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>

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

const base = document.getElementById('parent');
const children = base.children;
console.log(children);

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

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

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
1
  • 1
    「階層関係からみた要素の取得」という項目、とは何でしょうか?何かの書籍や Web ページを参考にしているのであれば、その資料の情報を質問文へ追記していただけませんか?
    – supa
    Commented 2020年10月3日 6:50

1 件の回答 1

2

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

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

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。