JavaScript でノードにアクセスする方法

ノードにアクセスする方法: 1. ownerDocument 属性を使用する; 2.parentNode 属性を使用する; 3. childNodes 属性を使用する; 4. firstChild 属性を使用する; 5. lastChild 属性を使用する; 6. nextSibling 属性など

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

ノード間のツリー関係を通じて、ドキュメント内の各ノードを見つけることができます。 DOM は、ドキュメント ツリー内の各ノードの JavaScript のトラバースを容易にするために、ノード タイプに対して次のプロパティを定義します。

• ownerDocument: 現在のノードのルート要素 (ドキュメント オブジェクト) を返します。
• parentNode: 現在のノードの親ノードを返します。すべてのノードには親ノードが 1 つだけあります。
• childNodes: 現在のノードのすべての子ノードのノード リストを返します。
• firstChild: 現在のノードの最初の子ノードを返します。
• lastChild: 現在のノードの最後の子ノードを返します
• nextSibling: 現在のノードの後の隣接する兄弟ノードを返します
• previousSibling: 現在のノードの前にある隣接する兄弟ノードを返します

[1]childNodes

各ノードには childNodes 属性があり、すべての子ノードのリストを表す nodeList オブジェクトが格納されます。

nodeList は、順序付けられたノードのセットを保存するために使用される配列のようなオブジェクトであり、ユーザーは添え字の位置を通じてこれらのノードにアクセスできます。 childNodes は角かっこ構文を使用して nodeList の値にアクセスでき、childNodes オブジェクトにはリストに含まれる子ノードの数 (長さ) を示す length プロパティが含まれていますが、childNodes は配列ではないため、配列メソッドを直接呼び出すことはできません。

【2】parentNode

各ノードには、ドキュメント ツリー内の親ノードを指すparentNode属性があります。 childNodes リストに含まれるすべてのノードは同じ親ノードを持っているため、それらのparentNode プロパティはすべて同じノードを指します。

parentNode プロパティによって返されるノードは、常に要素タイプのノードです。これは、子ノードを含むことができるのは要素ノードのみであるためです。ただし、ドキュメント ノードには親ノードがないため、ドキュメント ノードのparentNode プロパティは null を返します。

【3】firstChild と lastChild

firstChild プロパティは最初の子ノードを返し、lastChild プロパティは最後の子ノードを返します。テキスト ノードと属性ノードの firstChild プロパティと lastChild プロパティは常に null を返します。

注: firstChild は childNodes の最初の要素に相当し、lastChild 属性値は childNodes の最後の要素に相当します。

node.childNodes[0] = node.firstChild
node.childNodes[node.childNodes.length-1]  = node.lastChild

【4】nextSibling とpreviousSibling

nextSibling プロパティは次の隣接ノードを返し、previousSibling プロパティは前の隣接ノードを返します。同じ親を共有する隣接ノードがない場合、null が返されます。

【5】ownerDocument

DOM ドキュメント ツリーでは、ownerDocument 属性を使用してルート ノードにアクセスできます。

node.ownerDocument

各ノードの ownerDocument 属性を通じて、最上位に到達するために何層もの後戻りを経ることなく、ドキュメント ノードに直接アクセスできます。さらに、ユーザーは次の方法を使用してルート ノードにアクセスすることもできます。

document.documentElement

【関連する推奨事項: JavaScript 学習チュートリアル】

以上がJavaScript でノードにアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。