getElementById()とgetElementsByClassName()の違い
getElementById()とgetElementsByClassName()の違いを自分がわかるように、サンプルプログラムを作りました。
コピー＆ペーストで利用可能です。
title
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>getElementById()とgetElementsByClassName()の違い</title>
</head>
<body>
<div>↓getElementById()を使った実験</div>
<div>getElementsById()は引数で指定したId名のエレメントを取得する。</div>
<div id="quiz1">第1問！</div>
<div id="quiz2">第2問！</div>
<div id="quiz3">なし</div>
<div id="quiz4">第4問！</div>
<div id="quiz4">第5問！</div>
<div></div>
<script>
var quiz1 = document.getElementById('quiz1');
var quiz2 = document.getElementById('quiz2');
var quiz3 = document.getElementById('quiz3');
var quiz4 = document.getElementById('quiz4');
var quiz5 = document.getElementById('quiz5');
quiz2 = "ああああ"; //quiz2のinnerHTMLに代入していないので、「ああああ」は表示されない
quiz3.innerHTML = "第3問！"; //これが正しい。
quiz4.innerHTML = quiz1.innerHTML; //これも正しい。
quiz5[0].innerHTML = "ああああ"; //間違い。getElementsByClassName()の書き方。
</script>
<div>↓getElementsByClassName()を使った実験</div>
<div>getElementsByClassName()は引数で指定したclass名のエレメントを配列として取得する。</div>
<div class="quiz2_1">第1問！</div>
<div class="quiz2_2">第2問！</div>
<div class="quiz2_3">なし</div>
<div class="quiz2_4">第4問！</div>
<div class="quiz2_4">第5問！</div>
<div class="quiz2_4">第6問！</div>
<script>
var quiz2_1 = document.getElementsByClassName('quiz2_1');
var quiz2_2 = document.getElementsByClassName('quiz2_2');
var quiz2_3 = document.getElementsByClassName('quiz2_3');
var quiz2_4 = document.getElementsByClassName('quiz2_4');
quiz2_2 = "ああああ"; //間違い。
quiz2_3.innerHTML = "第3問！" //間違い。getElementsByClassName()で取得するのは、エレメントの配列であるため
quiz2_4[0].innerHTML = "第3問！" //正解。
quiz2_4[1].innerHTML = "第3問！" //正解。
//第6問！の表示は、そのまま表示されていることに注意。
</script>
</body>
</html>