JavaScriptでDOM操作をマスターしよう！HTMLCollection要素を自在に操るループ処理のテクニック

2024-05-19

JavaScript で HTMLCollection 要素をループする for ループ

HTMLCollection とは？

HTMLCollection は、document.getElementsByTagName() や document.querySelectorAll() などのメソッドによって取得することができます。これらのメソッドは、指定されたタグ名や CSS セレクタに一致するすべての要素をコレクションとして返します。

HTMLCollection は、配列のような性質を持ちますが、いくつかの点で異なる点があります。

長さ: HTMLCollection の長さは、length プロパティで取得できます。
要素へのアクセス: HTMLCollection の要素には、[] 演算子を使用してインデックス番号でアクセスできます。
ループ処理: HTMLCollection をループするには、for ループ または forEach() メソッドを使用できます。

for ループを使用した HTMLCollection のループ処理

HTMLCollection を for ループでループ処理するには、以下の構文を使用します。

for (let i = 0; i < collection.length; i++) {
  // 要素に対する処理
}

このコードは、コレクション内の各要素に対して、インデックス番号 i を使用してループ処理を行います。各要素は、collection[i] で参照できます。

for ループの例

以下の例では、document.getElementsByTagName("li") メソッドを使用して、ul 要素内のすべての li 要素を取得し、そのテキスト内容を出力します。

const listItems = document.getElementsByTagName("li");

for (let i = 0; i < listItems.length; i++) {
  console.log(listItems[i].textContent);
}

このコードは、以下の出力を生成します。

Item 1
Item 2
Item 3

forEach() メソッドを使用したループ処理

HTMLCollection をループ処理するもう 1 つの方法は、forEach() メソッドを使用することです。forEach() メソッドは、コレクション内の各要素に対して、コールバック関数を呼び出します。

collection.forEach(function(element, index) {
  // 要素に対する処理
});

このコードは、forEach() メソッドに渡されたコールバック関数が、コレクション内の各要素に対して呼び出されます。コールバック関数には、要素自体とインデックス番号が引数として渡されます。

forEach() メソッドの例

以下の例では、forEach() メソッドを使用して、ul 要素内のすべての li 要素の背景色を青色に変更します。

const listItems = document.getElementsByTagName("li");

listItems.forEach(function(listItem) {
  listItem.style.backgroundColor = "blue";
});

このコードは、すべての li 要素の背景色が青色に変更されます。

for ループ と forEach() メソッドを使用して、HTMLCollection 内の各要素を効率的に処理することができます。これらの方法は、DOM 操作や要素のスタイル変更など、さまざまなタスクに役立ちます。

サンプルコード：HTML要素を操作するJavaScript

要素のテキストコンテンツを取得する

以下のコードは、<h1> 要素のテキストコンテンツを取得してコンソールに出力します。

const heading = document.getElementById("heading");
const textContent = heading.textContent;
console.log(textContent);

Welcome to my website!

要素のスタイルを変更する

以下のコードは、p 要素のフォントサイズを 16px に設定します。

const paragraphs = document.getElementsByTagName("p");

for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.fontSize = "16px";
}

要素を非表示にする

以下のコードは、id="hidden" 要素を非表示にします。

const element = document.getElementById("hidden");
element.style.display = "none";

要素を作成する

以下のコードは、新しい div 要素を作成し、その中にテキストコンテンツを追加します。

const newElement = document.createElement("div");
newElement.textContent = "This is a new element.";

const parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);

This is a new element.

イベントリスナーを追加する

以下のコードは、ボタンをクリックしたときにコンソールにメッセージを出力するイベントリスナーを追加します。

const button = document.getElementById("button");

button.addEventListener("click", function() {
  console.log("Button clicked!");
});

このコードは、ボタンをクリックすると、以下の出力がコンソールに表示されます。

Button clicked!

これらの例は、JavaScript で HTML 要素を操作するためのほんの一例です。JavaScript で DOM を操作するには、他にも多くの方法があります。詳細については、MDN Web Docs を参照してください。

HTMLCollection要素をループ処理するその他の方法

Array.from() メソッドを使用して、HTMLCollection を配列に変換してから、標準の Array メソッドを使用してループ処理することができます。この方法は、新しい構文に慣れている場合や、Array メソッドですでに使い慣れている場合に役立ちます。

const listItems = Array.from(document.getElementsByTagName("li"));

for (const listItem of listItems) {
  console.log(listItem.textContent);
}

スプレッド構文を使用して、HTMLCollection をイテラブルに変換し、for...of ループで使用することができます。この方法は、簡潔で読みやすく、新しい構文に慣れている場合に適しています。

const listItems = document.getElementsByTagName("li");

for (const listItem of listItems) {
  console.log(listItem.textContent);
}

function* listItemIterator(list) {
  for (let i = 0; i < list.length; i++) {
    yield list[i];
  }
}

const listItems = document.getElementsByTagName("li");
const iterator = listItemIterator(listItems);

for (const listItem of iterator) {
  console.log(listItem.textContent);
}

カスタムイテレータを作成して、HTMLCollection をループ処理することができます。この方法は、最も制御性に優れていますが、複雑で冗長になる可能性があります。

class ListItemIterator {
  constructor(list) {
    this.list = list;
    this.index = 0;
  }

  next() {
    if (this.index < this.list.length) {
      const value = this.list[this.index];
      this.index++;
      return { done: false, value };
    } else {
      return { done: true };
    }
  }
}

const listItems = document.getElementsByTagName("li");
const iterator = new ListItemIterator(listItems);

for (const { value } of iterator) {
  console.log(value.textContent);
}

最良の方法を選択する

使用する方法は、特定のニーズと好みによって異なります。単純なループ処理の場合は、従来の for ループまたは forEach メソッドが適しています。配列メソッドに慣れている場合は、Array.from() を使用するのが良いでしょう。簡潔さを重視する場合は、スプレッド構文を使用するのが良いでしょう。柔軟性と制御性に優れている場合は、ジェネレータまたはカスタムイテレータを使用するのが良いでしょう。

javascript dom