JavaScriptでのNodeList処理とエラーハンドリング【ウェブデザイン技能検定 1級学科範囲】

HTMLの要素を操作する際JavaScriptのNodeListオブジェクトを扱う場面は頻繁にあります。
本記事ではNodeListから各要素のテキストを抽出する方法について解説し正しい記述例とよくある間違いを取り上げます。

NodeListとは？

NodeListは、document.querySelectorAll()やchildNodesメソッドの結果として得られるオブジェクトです。
これは配列のように見えますが完全な配列ではありません。
以下の点で配列と異なります。

• 配列メソッドの利用
  一部の配列メソッド（map()やfilter()など）が直接使用できません。
• 動的NodeListと静的NodeList
  childNodesが返すNodeListは動的でDOMが変更されると自動的に更新されます。
  一方querySelectorAll()の結果は静的です。

NodeListからテキストを抽出する方法

以下は、NodeListからテキストを抽出するための正しい方法の例です。

正しい方法1: Array.from()

Array.from()を使用してNodeListを配列に変換し、その後にmap()メソッドでテキストを抽出します。

const nodeList = document.querySelectorAll('li');
const items = Array.from(nodeList, (item) => item.textContent);
console.log(items);

正しい方法2: スプレッド構文

スプレッド構文を利用して配列に変換し、map()メソッドを使用します。

const nodeList = document.querySelectorAll('li');
const items = [...nodeList].map((item) => item.textContent);
console.log(items);

正しい方法3: forEach()

forEach()を使って各要素を手動で処理する方法です。

const nodeList = document.querySelectorAll('li');
const items = [];
nodeList.forEach((item) => items.push(item.textContent));
console.log(items);

よくある間違い

NodeListをそのまま配列のように扱おうとするとエラーが発生します。以下は誤った例です。

誤り: map()の直接利用

NodeListにはmap()メソッドが実装されていないため、以下のコードはエラーになります。

const nodeList = document.querySelectorAll('li');
const items = nodeList.map((item) => item.textContent); // エラー

まとめ

JavaScriptでNodeListを扱う際には、配列に変換する手順をしっかりと踏むことが重要です。本記事で紹介した正しい方法を用いることで、安全かつ効率的にDOM操作を行うことができます。