`
cakin24
  • 浏览: 1384180 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

遍历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,'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>
 
四 运行结果

 
  • 大小: 6.7 KB
1
0
分享到:
评论

相关推荐

    JS遍历DOM文档树的方法实例详解

    JS遍历DOM文档树是前端JavaScript开发中的一项基础而重要的技能。DOM(文档对象模型)是JavaScript操作HTML和XML文档的接口,DOM树是一个以树形结构表示文档的模型。每一个HTML或XML文档的节点都对应着DOM树上的一个...

    生成、解析xml的四种方式(dom,dom4j,sax,jdom)

    SAX是一种基于事件驱动的解析器,它不构建完整的XML文档树,而是通过事件回调的方式处理XML元素。当解析器遇到文档的开头、元素开始、元素结束等事件时,会调用预先定义的处理器方法。这种方式节省了内存,但操作...

    用DOM SAX JDom dom4j 对xml文档解析实例

    SAX是一种基于事件驱动的解析器,它不创建整个XML文档树,而是逐行读取文件,当遇到元素开始、结束、属性等事件时,调用预先定义好的回调函数。这种方法节省了内存,但需要编写更多的代码来处理事件。SAX适合处理大...

    DOM4jAPI文档

    - DOM4j提供两种解析方式:SAXReader用于事件驱动的解析,而DocumentBuilder则用于构建完整的XML文档树。 - 使用`SAXReader.read()`方法可以读取XML文件,并转化为Document对象。 - 解析过程中,可以设置各种解析...

    dom4j-1.6.1.jar

    首先,DOM解析允许开发者创建一个完整的XML文档树,然后通过树形结构进行遍历和操作。DOM4J提供了Element、Attribute、Namespace等接口,使得操作XML元素和属性变得直观。例如,你可以通过Element对象的child...

    dom4j_XML.rar_DOM4J_dom4j xml

    解析过程中,DOM4J会构建出一个完整的XML文档树。 3. **访问和操作元素**:`Element`是DOM4J中的基本节点类型,代表XML文档中的元素。可以使用`Document.getRootElement()`获取根元素,然后通过`Element`的`...

    layoutlib-api-22.5.1.zip

    2. 强大的查询功能:yaidom提供了一套强大的查询工具,如选择元素、查找子元素、获取属性值等,可以高效地遍历XML文档树。 3. 解析与序列化:yaidom可以解析XML字符串或文件到其内部表示,同时也能将内部表示的XML...

    DIHtmlParser.v3.0

    此外,DIHtmlParser还支持DOM(Document Object Model)操作,可以方便地遍历HTML文档树,进行增删改查等操作。 源码的开放性是DIHtmlParser的一大优势。开发者不仅可以根据需求自定义功能,还可以深入理解控件的...

    c#使用HtmlParser建立文档树 DomTree

    一旦有了DOM树,我们可以遍历和操作HTML元素。例如,查找特定的节点: ```csharp HtmlNode headline = doc.DocumentNode.SelectSingleNode("//h1"); Console.WriteLine(headline.InnerText); // 输出 "Hello, World...

    php解析xml文档

    DOMDocument允许创建、修改和遍历XML文档树,而XMLReader则是一个向前只读的流解析器,它在内存占用方面比DOMDocument更高效。 在实际项目中,选择哪种XML处理方法取决于具体需求,如性能、内存使用和代码简洁性等...

    VC++ ,XML类,XML文件读写类

    - 解析过程可能涉及递归地遍历XML文档树,构建内部的数据结构以供后续操作。 5. **XML文件的写入** - 对于写入,类可能提供方法来创建新XML文档,或者修改现有文档的节点和属性。 - 序列化时,类将内部数据结构...

    dom4j 解析xml

    2. **DOM解析**:DOM4J也可以使用DOM解析器构建整个XML文档树,适合小规模的XML文档。通过`DocumentBuilder`可以构建XML文档,然后遍历整个文档结构。 ```java DocumentBuilderFactory factory = ...

    生成+解析XML

    SAX是一种基于事件驱动的解析器,它不创建整个XML文档树,而是逐行读取文件,当遇到元素开始、结束、属性等事件时触发回调函数。这种方式适用于处理大型XML文件,因为它节省了内存。Java中,可以通过org.xml.sax包来...

    dom:实践 DOM 概念

    2. **文档树(Document Tree)**:所有节点组织成一棵树,根节点是`document`对象,其他节点按照HTML结构嵌套。 3. **访问与遍历(Traversal)**:通过DOM API,我们可以查找特定节点(如`getElementById()`)、...

    JAVA操作XML文件

    如果文件结构复杂,可以使用类似的方法遍历整个XML文档树,获取所需的信息。 总的来说,Java操作XML文件的能力强大且灵活,可以根据实际需求选择合适的解析方式。无论是简单的读取配置,还是复杂的XML数据处理,都...

    dragontest

    此外,考虑到自动化测试,"龙测试"可能会提供功能,如自动遍历HTML文档树,查找并操作DOM元素,以及进行断言以确认预期结果。 自动化测试通常包括单元测试、集成测试和端到端测试。在HTML环境下,单元测试可能针对...

    jQuery基础

    jQuery是一个流行的JavaScript库,它极大地简化了JavaScript编程,使得操作HTML文档树、添加动画效果、处理用户事件、以及与服务器交互变得更加容易。该库主要通过以下几种方式来简化JavaScript编程: 1. HTML元素...

    html-slate-parser:一个htmlslate解析器

    解析过程中,解析器会遍历 HTML 文档树,根据预设的规则将每个元素和其属性转换为 Slate.js 的 `operations` 或 `value` 对象。 3. 将解析后的 JSON 数据插入到 Slate.js 编辑器中,这样编辑器就能正确显示 HTML ...

Global site tag (gtag.js) - Google Analytics