JS で DOM ドキュメント ツリーをトラバースする方法

今回は、JS で DOMドキュメント ツリーを走査する方法と、JS が DOM ドキュメント ツリーを走査するための 注意事項 について説明します。実際のケースを見てみましょう。

この記事の例では、JS が DOM ドキュメント ツリーを走査する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

1 はじめに

ドキュメント ツリーのトラバースは、parentNode 属性、firstChild 属性、lastChild 属性、previousSibling 属性、nextSibling 属性を使用して実現されます。

1. parentNodeAttribute

この属性は、現在のノードの親ノードを返します。

[pNode=]obj.parentNode[pNode=]obj.parentNode

pNode：该参数用来存储父节点，如果不存在父节点将返回“null”。

2、firstChild属性

该属性返回当前节点的第一个子节点。

[cNode=]obj.firstChild

cNode：该参数用来存储第一个子节点，如果不存在将返回“null”。

3、lastChild属性

该属性返回当前节点的最后一个子节点。

[cNode=]obj.lastChild

cNode：该参数用来存储最后一个子节点，如果不存在将返回“null”。

4、previousSibling属性

该属性返回当前节点的前一个兄弟节点。

[sNode=]obj.previousSibling

sNode：该参数用来存储前一个兄弟节点，如果不存在将返回“null”。

5、nextSibling属性

该属性返回当前节点的后一个兄弟节点。

[sNode=]obj.nextSibling

pNode: このパラメータは親ノードを格納するために使用されます。親ノードが存在しない場合は、「null」が返されます。

2、

firstChildAttribute この属性は、現在のノードの最初の子ノードを返します。

[cNode=]obj.firstChild

cNode: このパラメータは、最初の子ノードが存在しない場合は、「null」が返されます。

3. lastChild属性

この属性は、現在のノードの最後の子ノードを返します。

[cNode=]obj.lastChildcNode: このパラメーターは、最後の子ノードが存在しない場合は、「null」が返されます。

4.

previousSiblingAttribute

この属性は、現在のノードの前の兄弟ノードを返します。

[sNode=]obj.previousSibling

sNode: このパラメータは、前の兄弟ノードを保存するために使用されます。存在しない場合は、「null」が返されます。 5.
nextSibling

属性

この属性は、現在のノードの次の兄弟ノードを返します。
[sNode=]obj.nextSibling

🎜sNode: このパラメータは、次の兄弟ノードを格納するために使用されます。存在しない場合は、「null」が返されます。 🎜🎜🎜🎜2 アプリケーション 🎜🎜🎜🎜 ページ上で、対応するボタンを通じてドキュメントの各ノードの名前、タイプ、およびノー​​ド値を見つけることができます。 🎜🎜🎜🎜3 つのコード🎜🎜🎜

<title>遍历文档树</title>


<h3>三号标题</h3>
<b>加粗内容</b>

节点名称：
节点类型：
节点的值：

<script> <!-- function txtUpdate(txt) { window.document.frm.na.value=txt.nodeName; window.document.frm.ty.value=txt.nodeType; window.document.frm.va.value=txt.nodeValue; } function nodeS(txt,nodeName) { switch(nodeName) { case"previousSibling": if(txt.previousSibling) { txt=txt.previousSibling; } else alert("无兄弟节点"); break; case"nextSibling": if(txt.nextSibling) { txt=txt.nextSibling; } else alert("无兄弟节点"); break; case"parent": if(txt.parentNode) { txt=txt.parentNode; } else alert("无父节点"); break; case"firstChild": if(txt.hasChildNodes()) { txt=txt.firstChild; } else alert("无子节点"); break; case"lastChild": if(txt.hasChildNodes()) { txt=txt.lastChild; } else alert("无子节点") break; } txtUpdate(txt); return txt; } var txt=document.documentElement; txtUpdate(txt); --> </script> 🎜🎜🎜4 つの実行結果🎜🎜🎜🎜🎜🎜🎜 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトで！ 🎜🎜推奨読書: 🎜🎜🎜React は携帯電話番号のデータ同期を実現します🎜🎜🎜🎜🎜Babel はどのように es6 クラス構文を変換しますか🎜🎜🎜

以上がJS で DOM ドキュメント ツリーをトラバースする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。