JavaScript/DOM/NodeList

以下は、Wikitext形式で書かれた「NodeList」の解説です。

NodeList（ノードリスト）

NodeListは、DOM（Document Object Model）において、複数のノード（Nodeオブジェクト）を表すリストです。これは、ページ内の要素を扱う際に頻繁に使用され、主にquerySelectorAll()やchildNodesメソッドを通じて取得されます。

NodeListは配列に似ていますが、いくつか異なる特徴を持っています。例えば、NodeListは厳密には配列ではなく、配列のようなインターフェースを提供するオブジェクトです。

NodeListの特徴

• ライブと静的: NodeListは、ライブ（動的）または静的（静的）なコレクションとして存在する場合があります。ライブNodeListは、ページのDOMが変更されると自動的に更新されます。静的NodeListは、作成時の状態に基づいて固定され、変更されません。
• インデックスアクセス: NodeListは、インデックスを使用して要素にアクセスすることができます（例: nodeList[0]）。
• forEachメソッド: NodeListは、forEach()メソッドをサポートしており、これを使ってノードを繰り返し処理することができます。

主なメソッドとプロパティ

1. lengthプロパティ

NodeListのlengthプロパティは、リスト内のノードの数を返します。これを使って、リストを反復処理する際に役立ちます。

例

const nodeList = document.querySelectorAll("div");
console.log(nodeList.length); // ノードの数を表示

2. item()メソッド

item()メソッドを使うことで、インデックスに基づいてNodeListから特定のノードを取得できます。

例

const nodeList = document.querySelectorAll("div");
const firstDiv = nodeList.item(0); // 最初のdiv要素を取得

3. forEach()メソッド

NodeListはforEach()メソッドをサポートしており、リスト内の各ノードに対してコールバック関数を実行することができます。これは配列と似たような動作をします。

例

const nodeList = document.querySelectorAll("div");
nodeList.forEach(node => console.log(node)); // 各div要素を表示

4. childNodesプロパティ

childNodesプロパティは、指定されたノードのすべての子ノードを含むNodeListを返します。これには、要素ノードだけでなく、テキストノードやコメントノードなども含まれる点に注意が必要です。

例

const parentElement = document.getElementById("parent");
const children = parentElement.childNodes;
console.log(children); // 子ノードのリストを表示

5. querySelectorAll()メソッド

querySelectorAll()メソッドは、CSSセレクタを使ってページ内の複数の要素を取得するために使われます。これが返すのは、NodeListオブジェクトです。

例

const nodeList = document.querySelectorAll("p.someClass");
console.log(nodeList); // pタグでsomeClassクラスを持つ要素のリストを表示

NodeListと配列の違い

NodeListは配列に似ていますが、いくつかの重要な違いがあります:

• NodeListは、配列のようにインデックスでアクセスできますが、配列メソッド（map(), filter(), reduce()など）は使用できません。これらを使いたい場合は、NodeListを配列に変換する必要があります。
• NodeListは、forEach()をサポートしますが、古いブラウザではサポートされていないことがあります。

配列に変換する方法の例

const nodeList = document.querySelectorAll("div");
const array = Array.from(nodeList); // NodeListを配列に変換
array.map(node => console.log(node)); // 配列メソッドを使用可能

まとめ

NodeListは、複数のDOMノードを表すオブジェクトであり、主にquerySelectorAll()やchildNodesなどのメソッドで返されます。NodeListは配列に似た操作が可能ですが、配列のメソッドを直接使用できないため、必要に応じて配列に変換することが推奨されます。これを使うことで、ページ内の複数の要素を効率的に操作できます。