頭脳一式 
document.querySelector()の使い方
document.querySelector()は、id属性の値、class属性の値、要素名などでHTML要素を取得でき、 引数で指定したセレクタに一致する最初のHTML要素を返します。
一致する要素がない場合はnullを返します。
id名で指定する場合
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()の使い方
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がオススメ！同僚に差をつけよう！
