Selectors APIの基本的な使い方

Selectors APIとは?

今までのJavascriptでは、Dom(document object model)で要素を指定するときに「getElementほにゃらら」というメソッドが使用されていました。「Selectors API」はその代替で使われる新しいメソッドになります。現在はほとんどのブラウザで対応されている便利なメソッドなのでどんどん使っていきましょう!なおこのメソッドの一番の特徴は、CSSセレクタを使って要素を指定できることです。普段CSSを利用している人には直感的に要素を指定できます。

getElementの場合

getElementを使用した場合
getElementsByTagNameliやspanなど要素名を指定
getElementsByNamename=””
getElementByIdid=””
getElementsByClassNameclass=””

Selectors APIの特徴

①CSSセレクタを使って要素を指定できる。
②カンマ区切りで複数の要素を指定可能。
③処理速度が速くなる。

単数と複数で使い分け!

querySelectorとquerySelectorAllの違い
querySelector(”)一つだけ指定。例えば「liタグ」などを指定した場合、最初のliタグのみに適用される。
querySelectorAll(”)複数指定できる。例えば「liタグ」などを指定した場合、すべてのliタグに適用される。
Selectors APIの具体例
querySelectorAll(‘li’)liやspanなど要素名を指定
querySelector(‘input[name=”aiueo”]’)input name=”aiueo”
querySelector(‘#123’)id=”123″
querySelectorAll(‘.abc’)class=”abc”

具体的な使用方法