はじめに
JavaScriptのHTML要素を取得する方法は複数あります。しかし、学習して間もない時はその方法について混乱したり、理解が曖昧なことがあると思います。そのため、それぞれの記述方法や特徴をまとめました。
HTMLの取得方法
要素を取得する方法として、Id名で取得する方法、Class名で取得する方法、Name名で取得する方法、セレクタ名で取得する方法があります。それによって、取得できる要素はdiv要素であったり、HTMLCollection、NodeListなどの配列であったり変化します。
document.getElementById("id名")
<div class="month", id="January">1</div>
<div class="month", id="February">2</div>
<div class="month", id="March">3</div>
<div class="month", id="April">4</div>
<div class="month", id="May">5</div>
<div class="month", id="June">6</div>
<div class="month", id="July">7</div>
<div class="month", id="August">8</div>
<div class="month", id="September">9</div>
<div class="month", id="October">10</div>
<div class="month", id="November">11</div>
<div class="month", id="December">12</div>
<!-- document.getElementById("January")で要素を取得 -->
<div class="month", id="January">1</div>
idは1つしかないため、単数系のElementと記述する。
document.getElementsByClassName("class名")
<div class="month", id="January">1</div>
<div class="month", id="February">2</div>
<div class="month", id="March">3</div>
<div class="month", id="April">4</div>
<div class="month", id="May">5</div>
<div class="month", id="June">6</div>
<div class="month", id="July">7</div>
<div class="month", id="August">8</div>
<div class="month", id="September">9</div>
<div class="month", id="October">10</div>
<div class="month", id="November">11</div>
<div class="month", id="December">12</div>
<!-- document.getElementsByClassName("month")で要素を取得 -->
HTMLCollection(12) [div#January.month, div#February.month, div#March.month,
div#April.month, div#May.month, div#June.month, div#July.month, div#August.month,
div#September.month, div#October.month, div#November.month, div#December.month,
January: div#January.month, February: div#February.month, March: div#March.month,
April: div#April.month, May: div#May.month, …]
<!-- document.getElementsByClassName("month")[0]で要素を取得 -->
<div class="month", id="January">1</div>
HTMLCollectionとして各要素が配列に格納される。添字を記載することで記載された要素を取得できる。
document.getElementsByName("name名")
<div Name="month", id="January">1</div>
<div Name="month", id="February">2</div>
<div Name="month", id="March">3</div>
<div Name="month", id="April">4</div>
<div Name="month", id="May">5</div>
<div Name="month", id="June">6</div>
<div Name="month", id="July">7</div>
<div Name="month", id="August">8</div>
<div Name="month", id="September">9</div>
<div Name="month", id="October">10</div>
<div Name="month", id="November">11</div>
<div Name="month", id="December">12</div>
<!-- document.getElementsByName("month")で要素を取得 -->
NodeList(12) [div#January, div#February, div#March, div#April, div#May, div#June,
div#July, div#August, div#September, div#October, div#November, div#December]
<!-- document.getElementsByName("month")[0]で要素を取得 -->
<div Name="month", id="January">1</div>
NodeListとして各要素が配列に格納される。添字を記載することで記載された要素を取得できる。
document.querySelector("セレクタ名")
<div class="month", id="January">1</div>
<div class="month", id="February">2</div>
<div class="month", id="March">3</div>
<div class="month", id="April">4</div>
<div class="month", id="May">5</div>
<div class="month", id="June">6</div>
<div class="month", id="July">7</div>
<div class="month", id="August">8</div>
<div class="month", id="September">9</div>
<div class="month", id="October">10</div>
<div class="month", id="November">11</div>
<div class="month", id="December">12</div>
<!-- document.querySelector(".month")で要素を取得 -->
<div class="month", id="January">1</div>
<!-- document.querySelectorAll(".month")で要素を取得 -->
NodeList(12) [div#January.month, div#February.month, div#March.month,
div#April.month, div#May.month, div#June.month, div#July.month, div#August.month,
div#September.month, div#October.month, div#November.month, div#December.month]
document.querySelector("セレクタ名")では一番最初の要素のみ取得できる。
document.querySelectorAll("セレクタ名")では全ての要素を取得でき、NodeListに格納される。
参考文献