JS如何遍历DOM文档树-js教程-PHP中文网

首页

web前端

js教程

JS如何遍历DOM文档树

php中世界最好的语言

Apr 08, 2018 pm 01:59 PM

javascript 文档遍历

这次给大家带来JS如何遍历DOM文档树，JS遍历DOM文档树的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例讲述了JS遍历DOM文档树的方法。分享给大家供大家参考，具体如下：

一介绍

遍历文档树通过使用parentNode属性、firstChild属性、lastChild属性、previousSibling属性和nextSibling属性来实现。

1、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

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

二应用

遍历文档树，在页面中，通过相应的按钮可以查找到文档的各个节点的名称、类型和节点值。

三代码

<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,&#39;parent&#39;);"/>
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,&#39;firstChild&#39;);"/>
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,&#39;lastChild&#39;);"/><br>
<input name="button" type="button" onclick="txt=nodeS(txt,&#39;previousSibling&#39;);" value="前一个兄弟节点"/>
<input type="button" value="最后一个兄弟节点" onclick="txt=nodeS(txt,&#39;nextSibling&#39;);"/>
<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>

登录后复制

四运行结果

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

Java教程

1663

CakePHP 教程

1419

Laravel 教程

1313

PHP教程

1264

C# 教程

1237

显示更多

Related knowledge

内存或磁盘空间不足，无法重新分页或打印此文档Word错误 Feb 19, 2024 pm 07:15 PM

本文将介绍如何解决在MicrosoftWord中出现的内存或磁盘空间不足以重新分页或打印文档的问题。这种错误通常会在用户尝试打印Word文档时出现。如果您遇到类似的错误，请参考本文提供的建议进行解决。内存或磁盘空间不足，无法重新分页或打印此文档Word错误解决MicrosoftWord打印错误“没有足够内存或磁盘空间重新分页或打印文档”的方法。更新MicrosoftOffice关闭占用内存的应用程序更改您的默认打印机在安全模式下启动Word重命名NorMal.dotm文件将Word文件保存为另一

如何对Word文档加红线 Mar 01, 2024 am 09:40 AM

它是395个字，就是495个这篇文章将向您介绍如何在Word文档中添加红线。在文档中添加红线是指对文档进行修改，以便用户可以清楚地查看所做的更改。这项功能在多人共同编辑一个文档时非常重要。redline是什么意思标记文档加红线是指使用红线或标注来指示对文档的更改、编辑或修订。这个术语的灵感来源于使用红色笔在打印文档上做标记的做法。红线批注被广泛应用在不同场景下，如：在编辑文档时为作者、编辑和审阅人清楚地显示建议的更改。在法律协议或合同中提出变更和修改对论文、演讲等提出建设性的批评和建议。如何给W

无法打开word文档中的超链接 Feb 18, 2024 pm 06:10 PM

近年来，随着网络技术的不断发展，我们的生活中离不开各种数字工具和互联网。在处理文档时，特别是在写作中，我们经常会使用到word文档。然而，有时我们可能会遇到一个棘手的问题，那就是word文档中的超链接无法打开。下面将就这个问题进行一番探讨。首先，我们需要明确的是，超链接是指在word文档中添加的指向其他文档、网页、目录、书签等的链接。当我们点击这些链接时，我

Word文档在Windows 11/10上打开时为空白 Mar 11, 2024 am 09:34 AM

当您在Windows11/10计算机上打开Word文档时遇到空白页面的问题，可能需要进行修复以解决此状况。造成这一问题的根源多种多样，其中最普遍的原因之一是文档本身损坏。此外，Office文件的损坏也可能导致类似的情况。因此，本文提供的修复方法可能会对您有所帮助。您可以尝试使用一些工具来修复损坏的Word文档，或者尝试将文档转换为其他格式再重新打开。另外，检查系统中的Office软件是否需要更新也是解决此问题的一种方法。通过这些简单的步骤，您可能能够解决Word文档空白打开的Word文档在Win

Java如何遍历文件夹并获取所有文件名 Mar 29, 2024 pm 01:24 PM

Java是一种流行的编程语言，具有强大的文件处理功能。在Java中，遍历文件夹并获取所有文件名是一种常见的操作，可以帮助我们快速定位和处理特定目录下的文件。本文将介绍如何在Java中实现遍历文件夹并获取所有文件名的方法，并提供具体的代码示例。1.使用递归方法遍历文件夹我们可以使用递归方法来遍历文件夹，递归方法是一种自身调用自身的方式，可以有效地遍历文件夹中

详解Word文档操作：将两页合并为一页 Mar 26, 2024 am 08:18 AM

Word文档是我们日常工作和学习中使用频率较高的应用程序之一。在处理文档时，有时会遇到需要将两页内容合并为一页的情况。本文将详细介绍在Word文档中如何将两页合并为一页，帮助读者更高效地处理文档排版。在Word文档中，将两页合并为一页的操作通常用于节省纸张和打印成本，或者为了使文档更加紧凑和整洁。以下是合并两页为一页的具体步骤：第一步：打开需要操作的Word

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务

See all articles

JS如何遍历DOM文档树

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题