【D】document.getElementByIdで頑張ろうとしている人へ

この記事は、ADVENTAR 『"Alphabet reg." Web develop Advent Calendar 2023』 03日目の記事です。

/icons/hr.icon

document.querySelector()を使え、まじで

document.querySelector()とは？

CSSのセレクタの記法を使ってHTML要素を選択できる。

CSSセレクタの記法はこのへんみとけ

idから要素を取得したい場合

CSSと同様に#idを使う

code:script.js

document.querySelector("#id");

クラス名から要素を取得したい場合

CSSと同様に.classを使う

code:script.js

document.querySelector(".class");

タグ名から要素を取得したい場合

CSSと同様にtagを使う

code:script.js

document.querySelector("div");

子孫要素などを取得したい場合

CSSと同様に>とかとか+とか全部使える、なんなら擬似クラスも使える

code:script.js

document.querySelector("div:has(p>:is(b,i)+p>a:hover)");

code:index.html

<div>

<p>

test<b>test</b>

</p>

</div>

<p>

</p>

document.querySelectorAll()

document.querySelector()だと合致する最初の要素しか取れないが、document.querySelectorAll()だと合致するすべての要素をNodeList(Array-like)で取得できる

NodeListはforEachを持ってるのでループ処理も楽、なんならArray-likeなのでArray.from(NodeList)とかやったら配列操作もできる

まとめ

CSSセレクタの練習にもなるし、旧来のメソッド一気に置き換えれる。

だからとりあえず使え……！