JavaScript 要素指定、getElementById、getElementsByClassNameなど

JavaScript で要素指定。getElementById、getElementsByClassNameなど。

昔のスタイル

昔（1990年代後半）、JavaScriptでタグ（要素）に変更を加えるとき以下のように記述していた。

<div id="ex_a">id ex_a</div>
<div class="ex_b">class ex_b</div>
<div name="ex_c">name ex_c</div>
<div>指定なし</div>

<form name="ex_form">
<input type="text" value="" name="ex_tb1">
<input type="text" value="" name="ex_tb2na" id="ex_tb2id">
</form>

<script>
ex_a.style.color = "red";
ex_form.ex_tb1.value = "テスト1";
ex_tb2id.value = "テスト2";
</script>

idで要素を指定したり、form内の要素はnameやidで指定した。
2016年現在もこの書き方で動作する。

getElementById、getElementsByClassName

いつの頃からか、要素を指定する際 getElementById などを使うようになった。
コードの量は増えるが、どの要素に変更を加えるのか分かりやすい。

<div id="ex_a">id ex_a</div>
<div class="ex_b">class ex_b</div>
<div name="ex_c">name ex_c</div>
<div>指定なし</div>

<form name="ex_form">
<input type="text" value="" name="ex_tb1">
<input type="text" value="" name="ex_tb2na" id="ex_tb2id">
</form>

<script>
document.getElementById("ex_a").style.color = "red";
document.getElementsByClassName("ex_b")[0].style.color = "green";
document.getElementsByName("ex_c")[0].style.color = "blue";
document.getElementsByTagName("div")[3].style.color = "orange";

document.getElementsByName("ex_tb1")[0].value = "テスト1";
document.getElementById("ex_tb2id").value = "テスト2";
</script>

ClassName、Name、TagName は複数の要素が存在する可能性があるので getElements と複数形になっている。
NodeList の上から順に[0]、[1]、[2]、・・・となっている。