querySelectorAll で複数を一度に取る

01 / 03

1つだけ取るか、ぜんぶ取るか

これまでは getElementById で1つだけ取ってきた。id が分かっている要素を指名するときはこれで十分だよ。

でも「リストの行をぜんぶ」取りたいときは？行は動的にふえるから、id を全部に付けるわけにいかないよね。

02 / 03

document.querySelectorAll("#list li") と書くと、#list の中の li をぜんぶまとめて返してくれるよ。

CSS で書くセレクタがそのまま使える。.done ならクラスが done の要素だけ。#list li.is-done なら完了マークのついた行だけ。

const items = document.querySelectorAll("#list li")console.log(items.length) // 行の数

03 / 03

返ってくるのは配列に似たもの（NodeList）だよ。.length で数を、for...of で1つずつ取り出せる。

querySelector（All が付かない版）は最初の1つだけを返すよ。1つだけほしいときはこっち。

for (const item of items) {  console.log(item.textContent)}