getElementsByTagNameとquerySelectorAllの違い

違いは

• 静的に取得するか、動的に取得するか

• 速度

の２つとなっています。 速度についてはGetElementsByTagnameに軍配が上がります。 これはNodeListオブジェクトに２つの種類があることが理由だそうです。

動的なNodeList

ページを表現するDOMにリアルタイムに接続したオブジェクト。このオブジェクトを経由して行われた変更はほかのすべての動的なNodeListにも反映されることになる。つまり、単一のDOMへのリンクになっている。

静的なNodeList

動的ではないNodeList。生成した段階のDOMがコピーされるもので、このNodeList経由でデータを変更しても、ほかのNodeListには影響を与えない。まったく独立している。

静的なNoteListが、生成した段階のROMをごっそり別のものとしてディープコピーします。

そのため静的なNodeListを生成するquerySelectorAllは動的なNoteListを生成するgetElementsByTagNameに勝てないということです。

しかし、

<ol id="fruits">
    <li>apple</li>
    <li>banana</li>
    <li>cherry</li>
    <li>dragon fruit</li>
</ol>

というようなHTMLに対して

var fruits = doc.getElementById("ofruits");
var list = doc.getElementsByTagName("li");
fruits.innerHTML = "";
for (var i = 0, length = li.length; i < length; ++i) {
    fruits.appendChild(li[i]);
}

を実行すると果物のリストは消えてしまいます。

一方で、

var fruits = doc.getElementById("ofruits");
var list = doc.querySelectorAll("li");
fruits.innerHTML = "";
for (var i = 0, length = li.length; i < length; ++i) {
    fruits.appendChild(li[i]);
}

とすると果物のリストは保持されたままとなっています。