複数の要素を取得してみよう

querySelectorAll()を使って複数の要素を取得する方法について見ていきます。

querySelectorAll()

querySelectorAll()

・複数要素があるpをJavaScriptで書き換えたかったとします。前回見たようdocument.querySelector(‘p’).textContent = ‘welcome’とすると変わりそうですがこのやり方だとpの最初の一つしか書き換わりません。セレクターで見つかった要素のうち最初のものだけしか取得できないからです。

・document にある全ての要素を取得したい場合は、querySelectorAll() としてあげる必要があります。

・このとき何番目のｐかを指定したい場合は配列と同様に何番目かを指定してあげればおｋです。[1]のようにインデックスを付けてあげると指定ができます。document.querySelector(‘p’)[1].textContent = ‘welcome’;としてあげます。

・すべての要素を処理したい場合はquerySelectoeAll()で取得した値にはforEach()を使うことが出来ます。forEach() は何番目の p かも表示したい場合は 2 つの引数を与えてあげれば良いです。

・それぞれの要素を p 、その順番を index として、 p.textContent を書き換えていきましょう。 index を使ってあげて `${index}番目のpです！` 、としてみましょう。