【JavaScript】element.childNodesとelement.parentNodeについて
以下のリンクをクリックすると、各セクションにジャンプできます。
element.childNodesとは
element.childNodes
は、指定した要素(element
)のすべての子ノードをリストとして返すプロパティです。このリストはNodeListという形式で提供され、リアルタイムでDOMツリーを反映します。つまり、DOMが変更されるとNodeListも即座に更新されます。
子ノードには以下が含まれます:
- 子要素ノード(
Element
) - テキストノード(
Text
) - コメントノード(
Comment
)
このプロパティを使うと、子ノードを順番に処理したり、特定の種類のノードを取得できます。
element.parentNodeとは
element.parentNode
は、指定した要素(element
)の親ノードを返すプロパティです。親ノードは、DOMツリーにおける現在の要素の一段上のノードに相当します。
主な特性:
- 親ノードが存在しない場合(ルートノードなど)、
null
を返します。 - HTMLドキュメントの場合、
document.documentElement
(通常は<html>
タグ)が最上位ノードになります。
これを利用して、要素の階層構造を遡ったり、特定の親要素を操作することができます。
具体的な例
以下は、element.childNodes
とelement.parentNode
の使用例です。
childNodesの例
// HTML構造 // <div id="example"> // Hello // <p>World</p> // <!-- コメント --> // </div> const div = document.getElementById("example"); const childNodes = div.childNodes; childNodes.forEach(node => { console.log(node); // テキストノード,
, コメントノードが順に出力される });
parentNodeの例
// HTML構造 // <div id="example"> // <p id="child">Hello</p> // </div> const child = document.getElementById("child"); const parent = child.parentNode; console.log(parent); //
childNodesとフィルタリング
childNodes
にはすべての種類のノードが含まれるため、子要素ノードだけを取得するにはフィルタリングが必要です。
const div = document.getElementById("example");
const elementChildren = Array.from(div.childNodes).filter(node => node.nodeType === Node.ELEMENT_NODE);
console.log(elementChildren); // 子要素ノードのみ出力される
利用シーンと注意点
element.childNodes
とelement.parentNode
の一般的な利用シーンには以下が挙げられます。
childNodesの利用シーン
- ノードリストを取得してすべての子ノードを操作したい場合。
- DOMツリーを解析し、特定のノードを見つけ出したい場合。
- コメントやテキストを含むすべてのノードにアクセスする必要がある場合。
parentNodeの利用シーン
- 要素の親要素を取得してスタイルを変更したい場合。
- 要素を別の親要素に移動させたい場合。
- 親要素を確認して構造上の関係を把握したい場合。
注意点
childNodes
にはテキストやコメントノードも含まれるため、用途に応じてフィルタリングが必要です。parentNode
がnull
を返す場合があるため、事前に確認が必要です。
これらのプロパティを活用することで、DOMツリーを効率よく操作し、より柔軟なWebアプリケーションの開発が可能になります。