▼最初に
DOM操作において必ず触れる”HTMLCollection”。これを理解しないと先へは進めない。そんな壁にぶち当たり、調べて分かったことをかみ砕いた内容で記事にしたいと思います。
▼”HTMLCollection”って何？
初見の方は HTMLCollectionって何？ ってなりますよね。
調べてみると....。
”HTMLCollection”は、HTML文の要素を配列風のオブジェクトにまとめたもの
例としてHTML文の要素とは以下のことです。
<html>
<body>
<div class="example">Example</div>
<div class="example">Example</div>
<div class="example">Example</div>
</body>
</html>
HTML文を配列風オブジェクトにしたものと言ってもイメージ沸かないので実際に見てみましょう。
※getElementsByClassName()で要素を取得
先ほどのコードの要素を取得した結果を”Console”に出力しました。
配列と同様にインデックスが振られ、divタグにclass名”example”が付いていますね。
確かに配列風。
図解で説明すると以下になります。
+-----------------------+
| example[0] | -> <div class="example">Example</div>
+-----------------------+
| example[1] | -> <div class="example">Example</div>
+-----------------------+
| example[2] | -> <div class="example">Example</div>
+-----------------------+
※配列名：example
ここまで来ると”HTMLCollection”が配列風のオブジェクトというのが何となく分かってきたのではないでしょうか。
▼”HTMLCollection”の主な特徴
- HTMLコレクションは動的であり、要素が変更や増減されても自動的に更新される。
- 配列のようにインデックスを使って要素を操作できる。
- フォームや画像など特定の要素には名前付きでアクセスできる。
▼主なメソッドとプロパティ
-
document.getElementsByTagName(): 指定したタグ名を持つ全ての要素を含むHTMLコレクションを取得 -
document.getElementsByClassName(): 指定したクラス名を持つ全ての要素を含むHTMLコレクションを取得 -
document.forms: ドキュメント内の全てのフォーム要素を含むHTMLコレクションを取得 -
document.images: ドキュメント内の全ての画像要素を含むHTMLコレクションを取得
▼”HTMLCollection”を使ってみる
以下のコードを用意します。
<html>
<body>
<div class="example">Example1</div>
<div class="example">Example2</div>
<div class="example">Example3</div>
</body>
</html>
▼test1.インデックスを使って要素にアクセスしてみましょう。
const example = document.getElementsByTagName('div'); //divタグを取得
console.log(example[2]); //インデックス番号2の要素をコンソールに出力
▼結果
インデックス番号2の要素が出力されているので成功です。
▼test2.繰り返し処理で配列内の要素を順番にコンソールへ出力
ここで注意点です！！
”HTMLCollection”に対してfor文は使えるが、forEach() メソッドは使えない
まずはfor文から試してみましょう。
const example = document.getElementsByTagName('div'); //divタグを取得
for(let i = 0; i < example.length; i++){ //配列exampleの要素分処理を繰り返す
console.log(example[i]); //コンソールに出力
▼結果
問題なく出力されていますね。
次にforEach() を使ってみます。
先ほど注意点の通り、”HTMLCollection”に対してforEach() メソッドは使えません。
ではどうしたらいいか。以下のようにひと手間加えてあげます。
const example = document.getElementsByTagName('div'); //divタグを取得
const array = Array.prototype.slice.call(example); //”HTMLCollection” ⇒ 配列に変換
array.forEach(function(element) { //配列arrayの要素を変数elementに格納
console.log(element); //コンソールに出力
});
▼結果
問題なく出力されています。
forEach() を使う場合は、”HTMLCollection”を通常の配列に変換する必要があります。
これはforEach() の仕様なので仕方ないです。なのでこの工程はお作法だと思って覚えていただければと思います。
どちらも同じ結果になりますが、どちら方法で書く方がベストなのか分かりませんね。
最終的には好みかもしれません。
とりあえず一つの意見としてChatGPTさんに聞いてみましょうか。
A：forEach()
メリット
Arrayメソッドの使用: forEachのようなArrayメソッドを使用できるため、可読性が高い。
関数型プログラミング: 関数型プログラミングのスタイルを好む場合に適している。
デメリット
パフォーマンス: Array.prototype.slice.callで配列に変換するため、メモリ消費が大きくなる可能性がある。
複雑さ: 一見して理解するのが少し難しいかもしれない。
B：for文
メリット
パフォーマンス: 配列に変換せず、直接NodeListを操作するため、パフォーマンスが良い。
シンプル: 基本的なforループを使用しているため、理解しやすい。
デメリット
冗長: 基本的なforループは冗長に感じることがある。
可読性: Arrayメソッドと比べると、若干可読性が低い。
▼結論
パフォーマンス重視: Bのコードがおすすめです。メモリ使用量が少なく、シンプルです。
可読性重視: Aのコードがおすすめです。forEachなどのArrayメソッドを使用することで、コードが読みやすくなります。
プロジェクトの規模やチームのコーディングスタイルに応じて、適切な方を選択すると良いでしょう。
との事です。
皆さんお好きな方法で書いてください！！
まとめ
本記事では”HTMLCollection”とは何か、そしてその特徴や使い方を紹介しました。
私も全てを理解した訳ではないため、至らない部分もあるかもしれません。
ただ本記事を通して、何となく”HTMLCollection”の事が分かって、実際に活用できるようになっていただけたら嬉しいです。