dom_dom0200_005

childNodes はノード(テキストやコメントを含む)を返す ( A ) で、多くのブラウザで「ライブ」である。一方、querySelectorAll() は通常「静的な」 ( B ) を返す。

解答

A: NodeList
B: NodeList

解説

どちらも型は NodeList だが性質が異なる。childNodes が返す NodeList はライブ(DOM変更が即時反映)であるのに対し、querySelectorAll() は静的(取得時点のスナップショット)を返す。

使用例(サンプルコード)

[ js ]

const nodes = document.body.childNodes; // ライブ
const items = document.querySelectorAll('.item'); // 静的
document.body.append('X');
console.log(nodes[nodes.length - 1].textContent); // 'X'(反映)
console.log(items.length); // 取得時点からは増えない