dom_dom0300_002

複数の要素をライブに取得するコレクションは ( A )、CSSセレクタで複数を静的に取得するのは ( B ) である。

解答

A: getElementsByClassName
B: querySelectorAll

解説

getElementsByClassNameは**HTMLCollection(ライブ)を返し、DOMの変化が即時反映される。querySelectorAllはNodeList(静的)**であり、取得時点のスナップショットが返る。

使用例（サンプルコード）

[ html ]

<ul id="list"><li class="item">A</li></ul>
<script>
  const live = document.getElementsByClassName('item'); // (A)
  const staticNodes = document.querySelectorAll('.item'); // (B)
  console.log(live.length, staticNodes.length); // 1, 1
  // 追加
  document.getElementById('list').insertAdjacentHTML('beforeend','<li class="item">B</li>');
  console.log(live.length, staticNodes.length); // 2, 1（ライブ vs 静的）
</script>