JavaScriptで各種domノードを取得する方法の紹介

Web アプリケーション、特に Web 2.0 プログラムの開発では、ページ内の要素を取得し、要素のスタイルやコンテンツなどを更新することが必要になることがよくあります。

1. 最上位のドキュメントノードから取得します:
(1) document.getElementById(elementId): このメソッドは、比較的シンプルで高速に必要な要素を取得できます。方法。ページに同じ ID を持つ複数のノードが含まれている場合は、最初のノードのみが返されます。現在、Prototype や Mootools などの多くの JavaScript ライブラリが登場していますが、これらは $ (ID) というより簡単なメソッドを提供しており、パラメータは依然としてノードの ID です。このメソッドは document.getElementById() の別の記述方法とみなすことができますが、$() の関数の方が強力です。具体的な使用方法については、それぞれの API ドキュメントを参照してください。
(2) document.getElementsByName(elementName): このメソッドは、名前からわかるように、ノード要素ではなく、同じ名前を持つノードの配列を返します。次に、ノードの特定の属性をループして、それが必要なノードであるかどうかを判断します。
同じ name 属性値を使用してグループ内の要素を識別します。選択した要素を今すぐ取得したい場合は、まずシャッフルされた要素を取得し、次にループしてノードのチェックされた属性値が true かどうかを判断します。
(3) document.getElementsByTagName(tagName): このメソッドは、タグを通じてノードを取得します。例: document.getElementsByTagName('A') は、ページ上のすべてのハイパーリンク ノードを返します。ノードを取得する前に、ノードのタイプは一般にわかっているため、この方法を使用するのは比較的簡単です。しかし、欠点も明らかです。それは、返される配列が非常に大きくなる可能性があり、多くの時間を無駄にすることです。では、この方法は無駄なのでしょうか？もちろん、この方法は上記の 2 つとは異なります。これはドキュメント ノード独自の方法ではなく、後述する他のノードにも適用できます。

2. 親ノードを通過します:
(1)parentObj.firstChild: このメソッドは、ノードが既知のノード (parentObj) の最初の子ノードである場合に使用できます。この属性は再帰的に使用できます。つまり、parentObj.firstChild.firstChild.firstChild... の形式をサポートしているため、より深いノードを取得できます。 (2)parentObj.lastChild: 明らかに、この属性は既知のノード (parentObj) の最後の子ノードを取得するためのものです。 firstChild と同様に、再帰的に使用することもできます。使用する場合、この 2 つを組み合わせると、より刺激的な効果が得られます。つまり、Parentobj.firstChild.lastchild.lastchild ...
(3) Parentobj.childNodes: 既知のノード配列の子を取得します。その後、ループまたはインデックス作成を通じて必要なノードを見つけることができます。
注: テストの結果、IE7 では直接の子ノードの配列が取得されるのに対し、Firefox2.0.0.11 では子ノードの子ノードを含むすべての子ノードが取得されることがわかりました。
(4)parentObj.children: 既知のノードの直接の子ノード配列を取得します。
注: テスト後、IE7 では効果は childNodes と同じですが、Firefox2.0.0.11 はサポートしていません。これが、私が他の方法とは異なるスタイルを使用する理由です。したがって、その使用はお勧めできません。
(5)parentObj.getElementsByTagName(tagName): 使用方法については詳しく説明しません。既知のノードのすべての子ノードのうち、指定された値の子ノードの配列を返します。例:parentObj.getElementsByTagName('A') は、既知の子ノード内のすべてのハイパーリンクを返します。

3. 隣接ノード経由で取得:
(1) neighborsNode.previousSibling: 既知のノード (neighbourNode) の前のノードを取得します。この属性は、前の firstChild や lastChild と同様に、再帰的に使用されるようです。 (2) neighborsNode.nextSibling: 既知のノード (neighbourNode) の次のノードを取得します。再帰もサポートしています。

4. 子ノードを通じて取得します:
(1) childNode.parentNode: 既知のノードの親ノードを取得します。 上記のメソッドはほんの一部の基本的なメソッドです。Prototype などの JavaScript ライブラリを使用する場合は、ノードのクラスを介して取得するなど、他の異なるメソッドも取得できます。しかし、上記の様々な方法を柔軟に使いこなせれば、ほとんどのプログラムには対応できると思います

操作コード:

<table> 
<tr> 
<td id="TEST"> 
<input type="submit" value="确定"> 
<input type="button" value="取消"> 
</td> 
</tr> 
</table>

テスト済み:

var td= document.getElementById("TEST"); 
alert(td.childNodes.length);结果为4

JS中,空格也是作为一个文本节点,而两个input元素后面都有空格 
所以都作为一个文本节点,所以结果为4 
删除空格后结果为2 
为了处理里面的空格节点,用以下函数来处理 

function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNodes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
}

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