「NodeList」と「HTMLCollection」の違いには気をつけよう

「NodeList」と「HTMLCollection」の違いには気をつけよう:

NodeListとは

MDN NodeList

配列のようなオブジェクトであって、配列ではない。(Array.prototypeを継承していない)

NodeListは静的である。

例えば、以下の場合はNodeListを返す。
document.childNodes
document.querySelectorAll()

...

↓実際に挙動を確認する

html側

<ul id="sample_ul"> 
 <li class="sample_li"></li> 
 <li class="sample_li"></li> 
 <li class="sample_li"></li> 
</ul> 

NodeListの場合

// 1.あらかじめ要素を取得 
// 
const firstNodeList = document.querySelectorAll('.sample_li'); 
console.log(firstNodeList); 
// NodeList(3) [li.sample_li, li.sample_li, li.sample_li] 
//  0: li.sample_li 
//  1: li.sample_li 
//  2: li.sample_li 
//  length: 3 
//  __proto__: NodeList 
 
// 2. 要素を追加 
// 
// ulに要素liを追加 
const elNewList = document.createElement('li'); 
elNewList.classList.add('sample_li'); 
document.getElementById('sample_ul').appendChild(elNewList); 
 
// 3. 先ほど取得した要素をもう一度確認 
// 
console.log(firstNodeList); // 上で要素を追加しているはずなのに、3つのまま 
// NodeList(3) [li.sample_li, li.sample_li, li.sample_li] 
//  0: li.sample_li 
//  1: li.sample_li 
//  2: li.sample_li 
//  length: 3 
//  __proto__: NodeList 

HTMLCollectionとは

MDN HTMLCollection

配列のようなオブジェクトであって、配列ではない。(Array.prototypeを継承していない)

NodeListとは異なり、HTMLCollectionは動的である。

例えば、以下の場合はHTMLCollectionを返す。
document.getElementsByClassName()
document.getElementsByTagName()
document.forms
node.children

...

ややこしい、、

↓実際に挙動を確認する

HTMLCollectionの場合

// 1.あらかじめ要素を取得 
// 
const firstHtmlCollection = document.getElementsByClassName('sample_li'); 
console.log(firstHtmlCollection); 
// HTMLCollection(3) [li.sample_li, li.sample_li, li.sample_li] 
//  0: li.sample_li 
//  1: li.sample_li 
//  2: li.sample_li 
//  length: 3 
//  __proto__: HTMLCollection 
 
// 2. 要素を追加 
// 
// ulに要素liを追加 
const elNewList = document.createElement('li'); 
elNewList.classList.add('sample_li'); 
document.getElementById('sample_ul').appendChild(elNewList); 
 
// 3. 先ほど取得した要素をもう一度確認 
// 
console.log(firstHtmlCollection); // 上で追加した要素が反映されており、4つになっている 
// HTMLCollection(4) [li.sample_li, li.sample_li, li.sample_li, li.sample_li] 
//  0: li.sample_li 
//  1: li.sample_li 
//  2: li.sample_li 
//  3: li.sample_li 
//  length: 4 
//  __proto__: HTMLCollection 

結論

document.querySelectorAll()やdocument.childNodesなどで取得したNodeListは、

JavaScriptの操作によって要素が増減しても、取得した際の要素の結果のまま。

document.getElementsByClassName()やdocument.getElementsByTagName()で取得したHTMLCollectionは、

動的に更新される。

要素や要素の長さをあらかじめ取得してキャッシュする際などは、要注意ですね。