querySelectorメソッドの概要
querySelector は2つの単語を合わせた名前のメソッドです。- Query
- 読み: クエリ
意味: 問い合わせ - Selector
- 読み: セレクター
意味: 選択装置
このメソッドはjQueryのセレクタと同じ使い方で該当した要素をElementオブジェクトとして取得します。 ただし、文書内で最初に該当した要素を1つだけ取得することになるので、場合によってはgetElementByIdを使ったほうがシンプルかもしれません。
機能的にはセレクタが使える以外は、document.getElementByIdと変わりません。 ただ、このセレクタが使えるというところが大きな差となるとも思います。
このメソッドでセレクタに該当するものが無ければnull値を返します。これもgetElementByIdと変わりません。
先にも述べましたが、文書中の要素を1つしか取得できませんので、class属性の参照には不向きです。 class属性をセレクタに使い、要素をまとめて参照したい場合には、querySelectorAllメソッドを使用して下さい。
目次に戻る実機サンプル
p要素(id="idAnswer2")内のoutput要素(class="clsAnswer")のinnerHTMLプロパティを指定して値を代入してみます。
id="idAnswer1" 内の class="clsAnswer"
id="idAnswer2" 内の class="clsAnswer"
実行:
サンプルコード
<body>
<p id="idAnswer1"><output class="clsAnswer">innerHTML</output></p>
<p id="idAnswer2"><output class="clsAnswer">innerHTML</output></p>
<p><input type="button" value="ボタン" onclick="evtAnswer()"></p>
<script>
document.open();
let elmAnswer = document.querySelector("#idAnswer2 .clsAnswer");
function evtAnswer(){
elmAnswer.innerHTML="こちらが選択されました。";
}
document.close();
</script>
</body>
サンプルコードの要点
- 2つのp要素にid属性で識別子を設定しました。
( idAnswer1,idAnswer2 ) - 前項のp要素内に1ずつ、output要素を入れてにclass属性を設定しました。
( clsAnswer ) - input要素button型にonclickイベントを設定しました。
( 関数名: evtAnswer ) - 変数(elmAnswer)の宣言をしてquerySelector(セレクタ)で要素を取得しました。
( id属性が「idAnswer2」に該当する要素内のclass属性値「clsAnswer」 ) - セレクタに該当する要素のinnerHTMLプロパティに値の代入を行いました。
( "こちらが選択されました。" )
以上です。
補足説明
このメソッドには類似した機能のメソッドがいくつか存在します。興味がある方は関連リンクを参照してください。
目次に戻る