17/07/17

HTMLCollection vs NodeList


 

今回はHTMLCollectionと、NodeListの違いについてまとめていきます。

HTMLCollection

HTMLCollectionはDOMノードのコレクションで、配列ライクな表現をしたインターフェイスです。
document.getElementsByClassName、
document.getElementsByTagName、
Node.children
などの返り値に利用されています。

 

またHTMLCollectionは動的なので、元のdocumentを変更されると、自動で更新されます。

 

参考記事
HTMLCollection – Web API インターフェイス | MDN

NodeList

NodeListもDOMノードのコレクションです。
document.querySelectorAll、
Node.childNodesの返り値などに利用されています。

 

NodeListオブジェクトは静的で元のdocumentを変更しても更新されないオブジェクトがあります。
静的なオブジェクトの例として、document.querySelectorAllは、静的なNodeListを返します
反対に、動的に更新されるものもあります。
動的に更新されるオブジェクトの例として、Node.childNodesがあります。

 

参考記事
NodeList – Web API インターフェイス | MDN

HTMLCollection vs NodeList

ではそれぞれの違いについてです。

 

HTMLCollectionはElement Nodeのみを含みます。
しかしNodeListは全てのNode Typeを含みます。
以下で確認していきます。

<div id="hoge">
<!-- 改行とコメント -->
</div>
var hoge = document.getElementById("hoge");
console.log(hoge.children)
// []
// length: 0
// __proto__: HTMLCollection

console.log(hoge.childNodes)
//(3) [text, comment, text]
// length: 3
// 0: text
// 1: comment
// 2: text
// __proto__: NodeList

上記のうようにHTMLCollectionはElement Nodeのみを含み、
NodeListは全てのNode Typeを含んでいることがわかると思います。

 

次に動的なコレクションと、静的なコレクションの比較です。

// 動的な挙動
// Node.childrenはHTMLCollection
// Node.childNodesはNodeList
var parent = document.getElementById('hoge');
console.log(parent.children.length); // 0
console.log(parent.childNodes.length) // 3
parent.appendChild(document.createElement('div'));
console.log(parent.children.length); // 1 (更新されている);
console.log(parent.childNodes.length) // 4 (更新されている)

// 静的な挙動
// querySelectorAllはNodeListを返す
var parent = document.querySelectorAll('#hoge');
console.log(parent.length) // 1
parent[0].appendChild(document.createElement('div'));
console.log(parent.length); // 1 (更新されてない);

上記のように動的なコレクションは更新されていますが、
静的なコレクションは更新されていません。
注意点は先ほどもいいましたが、
NodeListは静的と動的の2つの挙動があるので、必要ならば公式のドキュメントで確認すると良いと思います。

 

参考記事
javascript – Difference between HTMLCollection, NodeLists, and arrays of objects – Stack Overflow

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。