getElementsByClassNameの要素は配列?mapやforEachを使える?

本記事はこんな方向けに書いています。

  • getElementsByClassで取り出した要素に、mapforEachメソッドが使えずに悩んでい人
  • getElementsByClassの使い方を知りたい人
  • Javascriptの配列について学びたい人
  • getElementByIdなどを学びたい人

JavascriptにはHTMLの要素を取得するためのメソッドが用意されています。get~やquery~など種類も多いし、どんな要素を取得できるのかも分かりにくいですよね!

そこで本記事では、Javascriptのメソッドの中でも特に使用頻度の高いものに絞って解説していきます。

任意のid要素を取得する -getElementById-

HTMLのid名を指定して要素を取得できるメソッドです。
取得した要素はElementオブジェクトと呼ばれ、1つの要素で成り立ちます。

idは1つのページしか持てないというルールがあるので、1つの要素しか取り出せないと覚えておきましょう!

  • 取得できる要素:Elementオブジェクト
  • 補足:idはページに1つしか持てないので、「Elements」(複数形)ではなく「Element」(単数形)!!

実際にコードで確認してみましょう。

<div class="post-content">
	<ul id="post-content-list"></ul>
</div>
document.addEventListener("DOMContentLoaded", function () {
  let contentList = document.getElementById("post-content-list");
  console.log(contentList);
});
idを持った要素を取得できる

任意のclass要素を取得する -getElementsByClassName-

HTMLのclass名を指定して要素を取得できるメソッドです。
取得した要素はHTMLCollectionオブジェクトという配列に似た構造ですが、配列のようにmapやforEachメソッドを使えません。

仮に配列として扱う場合は、「Array.from()」で配列に変換する必要があるので注意です!(←結構引っかかりやすいです!!)

  • 取得できる要素:HTMLCollectionオブジェクト
  • mapforEachなどの配列メソッドは直接使えない!!
  • 補足:classはページに複数存在しても良いので、「Element」(単数形)ではなく「Elements」(複数形)!!

実際にコードで確認してみましょう。

[index.html]

<ul>
	<li><a href="https://www.ruby-lang.org/ja/" class="language">Ruby</a></li>
	<li><a href="https://www.python.jp/" class="language">Python</a></li>
	<li>
		<a
			href="https://developer.mozilla.org/ja/docs/Learn/JavaScript"
			class="language"
			>Javascript</a
		>
	</li>
	<li>
		<a href="https://www.php.net/manual/ja/index.php" class="language"
			>PHP</a
		>
	</li>
</ul>

[script.js]

document.addEventListener("DOMContentLoaded", function () {
  lists = document.getElementsByClassName("language");
  console.log(lists)
});

listsの中身は下画像のようにHTMLCollectionオブジェクトとなっています。

実行結果

HTMLCollectionの中身を取り出す方法

HTMLCollectionの中身を1つずつ取り出すには、for文を使うのが一般的です。HTMLCollectionでは、要素数を取得する「length」メソッドやi番目の要素を取得する「item(i)」メソッドが用意されています。

document.addEventListener("DOMContentLoaded", function () {
  lists = document.getElementsByClassName("language");
  len = lists.length;
  for (let i = 0; i < len; i++) {
    console.log(lists.item(i));
  }
});

直接HTMLCollectionにmapは使えない!

例えばHTMLCollectionを1つずつ取り出そうと、下記コードのようにmapメソッドを使うとガチギレされます。mapやforEachメソッドはあくまで「配列」に対して使うメソッドだからです。

document.addEventListener("DOMContentLoaded", function () {
  lists = document.getElementsByClassName("language");
  lists.map((list) => {
    console.log(list);
  });
});
HTMLCollectionと配列は似て非なるもの!

HTMLCollectionを配列に変換すると、mapやforEachメソッドを使用できます。

document.addEventListener("DOMContentLoaded", function () {
  lists = document.getElementsByClassName("language");
//Array.fromで配列に変換可能
  lists = Array.from(lists);
  lists.map((list) => {
    console.log(list);
  });
});
配列に変換するとmapで取り出せる!