問題一覧に戻る
中級dom
問題103: querySelectorAll

querySelectorAllメソッドによる複数要素の取得を学びましょう。document.querySelectorAllはCSSセレクタにマッチする全ての要素をNodeListとして返します。NodeListは配列のように扱えますが、完全な配列ではありません。forEachメソッドやfor...ofループで処理でき、lengthプロパティで個数を取得できます。複数のボタンやリストアイテムなど、同じ種類の要素に対して一括操作を行いたい場合に非常に便利です。

const mockElements = [
  { textContent: "A" },
  { textContent: "B" },
  { textContent: "C" }
];

const querySelectorAll = () => ({
  length: 3,
  forEach: (fn) => mockElements.forEach(fn)
});

const items = (".item");
console.log(items.length);

items.forEach(item => console.log(item.textContent));