やっぱりJavaScript! - HTMLを操ろう！2

getElementsByClassName　

続いて、"class"で名前をつけた要素を取得する方法ですが、

Document.getElementsByClassName() - Web API | MDN

let ele = document.getElementsByClassName("first")

とします。"id"とは以下の太字にしたところが変わっています。

getElementsByClassName　　

"className"はclassを取得するのでわかりやすいですが、"s"がついています。"getElement"に"s"がついているのは複数形ということになります。

"id"では単独の要素を取得しますが、"class"では複数の要素を取得するということです。

試しに以下を実行すると表示は">Test text"となり"Hello"には置き換わりません。

<div class = "first">Test text</div>

<script>
let ele = document.getElementsByClassName("first")
ele.innerHTML = "Hello"

</script>

ele.innerHTML = "Hello"

の部分を"console.log(ele)"で何が変数に入っているかをコンソールで確認すると

[<div class = "first">]

"[ ]"で囲われていて、これは配列を表しています。配列ということは複数の値がまとめられていることになります。これで複数形だった意味がわかります。

"id"は単独ですが"class"は複数あるものとして要素を取得できるようになっています。

一つだけとる場合は[0]とします。

let ele = document.getElementsByClassName("first")[0]
ele.innerHTML = "Hello"

querySelector

HTMLを取得する場合に使い勝手が良いものとして"querySelector"があります。

Document.querySelector() - Web API | MDN

<div class = "first">Test text</div>

<script>
let ele = document.querySelector(".first")
ele.innerHTML = "Hello"

</script>

となります。

document.querySelector(".first")

"querySelector"と".first"が変わっています。"first"は"."がついています。これはclassを表すものでidであれば"#"をつけます。

getElementById()、getElementsByClassName()などで使い分けるより簡単です。querySelectorは基本的に最初の一つの要素に対して実行されます。

全ての要素を取得するにはquerySelectorAll()を使います。配列で取得します。

ここで同じように配列で取得するgetElementsByClassName()との違いですが

getElementsByClassName()　・・・　HTML Collection
querySelectorAll()　　・・・　NodeList

ということみたいですが違いが分かりにくいので分かりやすく解説されたサイトがありますのでご紹介

HTML CollectionとNodeListの違い【JavaScript】

簡単にいうと"HTML Collectionは動的、NodeListは静的"ということです。

どういうことかというと、createElement()で要素を追加した場合でも対応できるのが"HTML Collection"です。NodeListでは変化はありません。あとはメソッドで"forEach"が簡単に使えるのがNodeListということです。HTML Collectionも一手間かければ使えるようですが。