javascriptを学ぼ。--ふるまいの違い

donguri

idとclassでの返り値の違いについて。要素を取得したいときはクラス名、Id名によって使い分ければ取得できると思っていたが、どうやら少し違うようです。コンンソールに出して見ます。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
		<title>Document</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p class="p2">Hello World!</p>
<script>
var a = document.getElementById("p1")
a.innerHTML = "ooo";
console.log(a)
var c = document.getElementsByClassName("p2");
c[0].innerHTML = "pppp"
</script>
</body>
</html>

id はその要素を取得していますが、class の方はHTMLCollectionということでどうやら配列として認識しているようです。

なので要素を取得するには

c[0].innerHTML = "pppp"

という感じで添字で指定してやると特定のものを取得できるようです。

EventListenerも追加できます。

c[0].addEventListener("click", function(){
	alert("やっほー！")
})

クリックすると"やっほー"とアラートがでます。

この記事が気に入ったらサポートをしてみませんか？