【JavaScript入門】document.querySelector()とdocument.querySelectorAll()の使い方
document.querySelector()は、id属性の値、class属性の値、要素名などでHTML要素を取得でき、 引数で指定したセレクタに一致する最初のHTML要素を返します。
一致する要素がない場合はnullを返します。
id名で指定する場合はquerySelector("#id")と記述します。
HTML
<p class="hiragana">あいうえお</p>
<p id="abc" class="hiragana">かきくけこ</p>
<p class="hiragana">さしすせそ</p>
js
console.log(document.querySelector("#abc").innerHTML);//かきくけこ
クラス名で指定する場合はquerySelector(".class")と記述します。
HTML
<p class="hiragana">あいうえお</p>
<p id="id" class="hiragana">かきくけこ</p>
<p class="hiragana">さしすせそ</p>
js
console.log(document.querySelector(".hiragana").innerHTML);//あいうえお
クラス名で指定する場合はquerySelector("elementName")と記述します。
HTML
<p class="hiragana">あいうえお</p>
<p id="id" class="hiragana">かきくけこ</p>
<p class="hiragana">さしすせそ</p>
js
console.log(document.querySelector("p").innerHTML);//あいうえお
document.querySelectorAll()は、引数で指定したセレクタに一致するNodeListオブジェクトを返します。
NodeListオブジェクトは、forEach()やlengthが使用できます。
セレクタに一致する個々の要素にアクセスするには以下のように要素番号を指定します。
document.querySelectorAll("input")[0]
以下はサンプルです。
HTML
<p class="hiragana">あいうえお</p>
<p id="id" class="hiragana">かきくけこ</p>
<p class="hiragana">さしすせそ</p>
js
console.log(document.querySelectorAll("p")[0].innerHTML);//あいうえお
console.log(document.querySelectorAll("p")[1].innerHTML);//かきくけこ
console.log(document.querySelectorAll("p")[2].innerHTML);//さしすせそ
forEach文を用いて以下のようにも記述できます。
js
document.querySelectorAll("p").forEach(function(e){
console.log(e.innerHTML);
});
//あいうえお
//かきくけこ
//さしすせそ
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！