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

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

querySelectorメソッドの使い方
まとめてセレクタを取得

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系の記事まとめです。