How to traverse the DOM document tree in JS

This time I will show you how to traverse the DOM with JSDocument tree, and what are the precautions for JS to traverse the DOM document tree. The following is a practical case, let’s take a look.

The example in this article describes the method of JS traversing the DOM document tree. Share it with everyone for your reference, the details are as follows:

1 Introduction

Traverse the document tree by using the parentNode attribute, firstChild attribute, lastChild attribute, previousSibling attribute and nextSibling attribute to achieve.

1, parentNodeAttribute

This attribute returns the parent node of the current node.

[pNode=]obj.parentNode

pNode: This parameter is used to store the parent node. If the parent node does not exist, "null" will be returned.

2, firstChildAttribute

This attribute returns the first child node of the current node.

[cNode=]obj.firstChild

cNode: This parameter is used to store the first child node. If it does not exist, "null" will be returned.

3, lastChildAttribute

This attribute returns the last child node of the current node.

[cNode=]obj.lastChild

cNode: This parameter is used to store the last child node. If it does not exist, "null" will be returned.

4, previousSiblingAttribute

This attribute returns the previous sibling node of the current node.

[sNode=]obj.previousSibling

sNode: This parameter is used to store the previous sibling node. If it does not exist, "null" will be returned.

5, nextSiblingAttribute

This attribute returns the next sibling node of the current node.

[sNode=]obj.nextSibling

sNode: This parameter is used to store the next sibling node. If it does not exist, "null" will be returned.

Second application

Traverse the document tree. On the page, you can find the name, type and number of each node of the document through the corresponding button. node value.

Three codes

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


<h3 id="三号标题">三号标题</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>

Four running results

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

React implements data synchronization of mobile phone numbers

How does Babel convert es6 class syntax

The above is the detailed content of How to traverse the DOM document tree in JS. For more information, please follow other related articles on the PHP Chinese website!