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