複数要素とイベント委譲

ここまでは、要素を1つずつ getElementById で取って、1つずつ addEventListener を付けてきた。5行のアプリならそれでいい。でも行が50になったら？100になったら？

この章では2つの新しい道具を手に入れるよ。

ひとつめは querySelectorAll。CSS のセレクタで条件を書いて、合うものを全部まとめて取るメソッドだ。getElementById は名前で1つだけ指名する道具、querySelectorAll は条件で何個でも取れる道具。この章では、既知の ID で1つ取る場合と、条件で複数取る場合を使い分ける。

ふたつめはイベント委譲（event delegation）。行が何個あっても、リスナーは親に1つだけ。押されると、そのイベントは子から親へと伝わっていく。親で受け取って event.target を見れば「誰が押されたか」が分かる。closest で探せば「その行はどれか」も分かる。

最後に、この2つを組み合わせて一括操作をやってみよう。完了マークの付いた行をまとめて消す。セレクタで絞って、ループで全部に何かする——DOM を扱うときのいちばん汎用的な形だよ。