Home Web Front-end JS Tutorial Detailed introduction to JS traversing the DOM tree

Detailed introduction to JS traversing the DOM tree

Apr 20, 2018 pm 01:34 PM
javascript introduce detailed

This time I will bring you a detailed introduction to traversing the DOM tree with JS. What are the precautions when using JS to traverse the DOM tree? The following is a practical case, let’s take a look.

1 Introduction

Traversing the document tree is achieved by using the parentNode attribute, firstChild attribute, lastChild attribute, previousSibling attribute and nextSibling attribute.

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

<head>
<title>遍历文档树</title>
</head>
<body >
<h3 id="h1">三号标题</h3>
<b>加粗内容</b>
<form name="frm" action="#" method="get">
节点名称:<input type="text" id="na"/><br />
节点类型:<input type="text" id="ty"/><br />
节点的值:<input type="text" id="va"/><br />
<input type="button" value="父节点" onclick="txt=nodeS(txt,'parent');"/>
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,'firstChild');"/>
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,'lastChild');"/><br>
<input name="button" type="button" onclick="txt=nodeS(txt,'previousSibling');" value="前一个兄弟节点"/>
<input type="button" value="最后一个兄弟节点" onclick="txt=nodeS(txt,'nextSibling');"/>
<input type="button" value="返回根节点" onclick="txt=document.documentElement;txtUpdate(txt);"/>
</form>
<script language="javascript">
<!--
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>
</body>
Copy after login

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:

How to reference the verification code in the Vue project

Babel conversion es6 steps detailed explanation

The above is the detailed content of Detailed introduction to JS traversing the DOM tree. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed introduction to what wapi is Detailed introduction to what wapi is Jan 07, 2024 pm 09:14 PM

Detailed introduction to what wapi is

Detailed explanation of whether win11 can run PUBG game Detailed explanation of whether win11 can run PUBG game Jan 06, 2024 pm 07:17 PM

Detailed explanation of whether win11 can run PUBG game

Detailed introduction to whether i5 processor can install win11 Detailed introduction to whether i5 processor can install win11 Dec 27, 2023 pm 05:03 PM

Detailed introduction to whether i5 processor can install win11

Introducing the latest Win 11 sound tuning method Introducing the latest Win 11 sound tuning method Jan 08, 2024 pm 06:41 PM

Introducing the latest Win 11 sound tuning method

Introduction to the skills and attributes of Hua Yishan Heart of the Moon Lu Shu Introduction to the skills and attributes of Hua Yishan Heart of the Moon Lu Shu Mar 23, 2024 pm 05:30 PM

Introduction to the skills and attributes of Hua Yishan Heart of the Moon Lu Shu

PyCharm Beginner's Guide: Comprehensive Analysis of Replacement Functions PyCharm Beginner's Guide: Comprehensive Analysis of Replacement Functions Feb 25, 2024 am 11:15 AM

PyCharm Beginner's Guide: Comprehensive Analysis of Replacement Functions

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

Simple JavaScript Tutorial: How to Get HTTP Status Code

Detailed introduction of Samsung S24ai functions Detailed introduction of Samsung S24ai functions Jun 24, 2024 am 11:18 AM

Detailed introduction of Samsung S24ai functions

See all articles