JavaScriptでセレクタ指定でHTML要素を取得する方法/querySelectorメソッドの使い方

phone IT

JavaScriptからHTML要素を取得するには、get~メソッドの他にquerySelector/querySelectorAllを使う方法があります。セレクタというのは、CSSで頭につけるアレです。タグ名だけでなく、クラスやIDでの指定も可能です。

Advertisements

querySelectorメソッドの使い方

querySelectorのみを使うと、セレクタの中で一番最初のものだけを取得します。オブジェクトはdocumentです。

セレクタからHTML要素を取得
document.querySelector(‘セレクタ名’);
HTMLでボタンをひとつ、CSSテスト用のaudioをふたつ作ってみます。


//JavaScript
function btn(){
const buttonClick = document.querySelector('audio');
buttonClick.play();
}

左のaudioの要素を取得して、playメソッドで再生してみました。
「audio」を指定した場合、最初に現れたほうのaudioだけが取得されています。
今度はクラス名で取得してみます。




//JavaScript
function btnA(){
const buttonClick = document.querySelector('.btA');
buttonClick.play();
}
function btnB(){
const buttonClick = document.querySelector('.btB');
buttonClick.play();
}



今度はそれぞれ指定したオーディオを鳴らすことができました。

まとめてセレクタを取得

querySelectorAllを使用することで、該当するHTML要素全てをまとめて抜き出すことが可能です。
要素は配列として変数に代入されるので、lengthを取得してiに代入して順番に実行することもできますし、数値を指定して個別に実行することも可能です。

セレクタからHTML要素を一括取得
document.querySelectorAll(‘セレクタ名’);

//JavaScript
function btnAll(){
const buttonClicks = document.querySelectorAll('audio');
buttonClicks[4].play();
}



ここまで登場したaudioは5つなので、配列に指定する数字は「4」になります(プログラムでは数字は0から数える)。

JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント