📝
JavaScriptの要素選択メソッド
JavaScriptでは、HTMLページ上の要素を選択するためのさまざまなメソッドが用意されている。
querySelector / querySelectorAll
使い方
querySelectorはCSSセレクタに一致する最初の要素を返し、querySelectorAllはCSSセレクタにマッチする全ての要素を返す。
// h1タグの最初の要素を選択
const heading = document.querySelector('h1');
// クラス'text'のすべての要素を選択
const textElements = document.querySelectorAll('.text');
メリット
- CSSセレクタを使えるので、複雑な条件で要素を選択できる
- 擬似クラスもサポートされている(例:
querySelector(':hover'))
デメリット
-
querySelectorAllは処理が比較的遅い
ユースケース
複数の条件を組み合わせて要素を選択する必要がある場合に適している
getElementById
使い方
要素のidを指定して、その要素を取得します。
const element = document.getElementById('main');
メリット
- 処理が非常に速い
デメリット
- idが重複していた場合は最初の要素しか取得できない
ユースケース
idが一意に決まっている要素を取得するのに適している
getElementsByTagName
使い方
指定したタグ名の要素を全て取得
const paragraphs = document.getElementsByTagName('p');
メリット
- 処理が比較的速い
デメリット
- タグ名以外の条件で絞り込めない
ユースケース
特定のタグの全ての要素を取得する必要がある場合に適している
getElementsByClassName
使い方
指定したクラス名の要素を全て取得
const items = document.getElementsByClassName('item');
メリット
- 処理が最も速い
デメリット
- クラス名以外の条件で絞り込めない
ユースケース
特定のクラスの全ての要素を取得する必要がある場合に適している
取得できるオブジェクトの違い
これらのメソッドで取得できるオブジェクトの種類が異なる！
-
querySelectorは単一のHTMLElementオブジェクトを返す -
querySelectorAllはNodeList(静的)を返す -
getElementByIdは単一のHTMLElementオブジェクトかnullを返す -
getElementsByTagNameはHTMLCollection(動的)を返す -
getElementsByClassNameはHTMLCollection(動的)を返す
静的なNodeListは、取得時点のNodeをコピーしたもの。一方、動的なHTMLCollectionは、documentの変更に応じて自動的に更新される！
動的なHTMLCollectionを使うと、documentの変更を気にせずループ処理できるというメリットがあるけど、静的なNodeListのほうが安全で予期せぬ副作用を防げる
Discussion