document.getElementsByTagNameやdocument.getElementsByClassNameとdocument.querySelectorAllの違い 📝

document.querySelectorAll

と、

document.getElementsByTagName
document.getElementsByClassName
document.getElementsByName

は、いずれもNodeListを返すメソッドです。

が。返ってくるNodeListは微妙に異なっています。
具体的には、Static NodeList 返ってくるか、Live NodeList が返ってくるかです。

document.querySelectorAllの場合

Static NodeList、すなわちquerySelectorAllを実行した時点でのNodeListが返ってきます。

HTML

<div></div>

JavaScript

const divs = document.querySelectorAll('div'); // divを取得

document.body.appendChild(document.createElement('div')); // 取得後にdivを追加

console.log(divs.length); // 取得時の数（1）が表示される

取得時のNodeListなので、取得後にDOMを操作しても影響はありません。

DEMO

jsfiddle.net

document.getElementsByTagNameの場合

Live NodeListが返ってきます。

HTML

<div></div>

JavaScript

const divs = document.getElementsByTagName('div'); // divを取得

document.body.appendChild(document.createElement('div')); // 取得後にdivを追加

console.log(divs.length); // 現在の数（2）が表示される

Staticではないので、取得後にDOMを操作すると影響がでてきます。
今回はgetElementsByTagNameを例にコードを書きましたが、document.getElementsByClassName、document.getElementsByNameも同様の挙動になります。