遍历节点树

从以下属性读出来的信息可以让我们了解相邻节点之间的关系。

  • childNodes属性将返回一个数组,这个数组由给定元素节点的子节点构成:
nodeList = node.childNodes

这个属性返回的数组是一个nodeList集合。这个nodeList集合里的每个节点都是一个节点对象。这些节点对象都有着nodeType、nodeName、nodeValue等常见的节点属性。

文本节点和属性节点都不可能包含任何的子节点,所以他们的childNodes属性永远返回一个空数组。

  如果只是想知道某个元素有没有子节点,可以使用hasChildNodes方法。

  如果想知道某个元素有多少个节点,请使用childNodes数组的length属性:

node.childNodes.length

即使元素只有一个子节点,childNodes属性也将返回一个节点数组而不是返回一个单个的节点,此时,childNodes数组的length的长度值将是1,比如说,如果某个网页上的document元素只有html元素这个子节点,那么document.childNodes[0].nodeName值将是HTML。

childNodes属性是一个只读属性,如果需要给某个元素增加子节点,可以使用appendChild()或insertBefore()方法;如果需要删除某个元素节点,可以使用removeChild()方法;在使用这几个方法曾、减某个元素子节点时,这个元素childNodes属性也将自动刷新。

  • firstChild
reference = node.firstChild

这个属性返回一个节点对象的引用指针,这个节点对象有nodeType、nodeName、nodeValue等常见属性。

文本节点和属性节点不可能在包含任何的子节点,所以他们的firstChild属性永远会返回null。

firstChild是一个只读属性。

  • lastChild

lastChild:属性将返回一个给定元素的最后一个子节点:

reference = node.lastChild

这个属性返回一个节点对熊引用指针,这个节点对象都有着nodeType、nodeName、nodeValue等常见节点属性。

文本节点属性和属性节点属性都不可能在包含任何子节点,所以lastChild属性永远返回null。

某个元素的lastChild属性等价于元素childNodes节点集合的最后一个节点:

refrence = node.childNodes[element.childNodes.lelgth-1]

如果想知道某个元素有没有子节点,可以使用hasChildNodes方法,如果某个节点没有任何子节点,它的lastChild属性将返回null。

lastChild属性是一个只读属性。

  • nextSibing

nextSibing属性将返回一个给定节点的下一个子节点:

reference = node.nextSibing

这个属性返回一个节点对象引用指针,这个节点对象都有着nodeType、nodeName、nodeValue等常见属性。

如果给定节点后面没有同属于父节点的节点,它的nextSibling属性将返回null。

nextSibling属性是一个只读属性。

  • parentNode

parentNode属性将返回一个给定节点的父节点:

reference = node.parentNode

这个属性返回一个节点对象的引用指针,这个节点对象都有着nodeType、nodeName、nodeValue等常见节点属性。

parentNode属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点,唯一的例外是document节点,他没有父节点,换句话说,document节点的parentNode属性将返回null。

parentNode属性是一个只读属性。

  • previousSibling
reference  = node.previousSibling

这个属性返回前一个节点对象的引用指针,这个节点对象都有着nodeType、nodeName、nodeValue等常见节点属性。

  如果没有前一个元素节点返回null。

  previousSibling属性是一个只读属性。

时间: 2024-08-06 06:44:41

遍历节点树的相关文章

递归遍历节点树

<!DOCTYPE HTML> <html> <head> <title>遍历节点树</title> <meta charset="utf-8"/> <script src="js/3_2.js"></script> </head> <body> <span>Hello World !</span> <ul id=&q

JavaScript之DOM-4 文档结构和遍历(节点树、元素树、文档的遍历)

一.节点树 节点树 概念 - HTML DOM 将 HTML 文档视作树结构 - 文档中的元素.属性.文本.注释等都被看作一个节点 - 这种结构被称为节点树: 上下层节点 - 节点树中的节点彼此拥有层级关系,DOM 使用如下属性遍历整棵节点树: 平行的节点 - 节点树中使用如下方法访问平行的兄弟节点: 二.元素树 元素树 概念 - 元素树是节点树的一个子集,只包含其中的元素节点 上下层元素 - 与节点树一样,元素树上的元素节点也有父子关系,使用如下属性可以获取这些关系: 平行的元素 - 元素树使

06. 父子节点(树)遍历写法小结

原文:06. 父子节点(树)遍历写法小结 对于树/图的遍历,通常有2种算法来实现:迭代(Iteration)和递归(Recursion),迭代是利用循环反复取值/赋值的过程:递归则是反复自己调用自己来获得最终结果.SQL Server里的递归有32层嵌套限制,目的在于防止代码进入死循环,除非使用提示OPTION (MAXRECURSION 0). 测试数据: if OBJECT_ID('city') is not null drop table city GO create table city

节点树和元素树--深度遍历

我们在阅读JS高级程序设计的时候,提到了节点树的概念.比如说: elem.parentNode---找elem的父节点: elem.childNodes---找elem的所有的直接子节点: elem.nextSibling---找elem的下一个同辈节点': elem.previousSibling---找elem的上一个同辈节点 因为childNodes包含看不见的空格文本,还有注释等内容,所以使用起来不是太方便. 因此,JS又重新引入了元素树的概念.这个的话,在我们实际应用中,用的比较普遍.

JS遍历DOM 节点树的实现

本文将分享 DOM 节点树深度遍历.广度遍历代码. 假定我仅遍历 body 且其结构如下: <body> <section class="container"> <div class="left"> <div class="menu"></div> </div> <div class="right"> <div class="b

Cocos2d之Node类详解之节点树(二)

一.声明 本文属于笔者原创,允许读者转载和分享,只要注明文章来源即可. 笔者使用cocos2d框架的cocos2d-x-3.3rc0版本的源代码做分析.这篇文章承接上篇<Cocos2d之Node类详解之节点树(一)>. 二.简介 节点 一个Node对象. 节点树 上篇文章介绍到,Node类有一个成员变量 Vector<Node*> _children,这是一个保存所有子节点的数组,因为Node类采用遍历树的方式获取子节点进行渲染,所以我管这两个东西的结合叫节点树. 三.源码详解 &

Cocos2d之Node类详解之节点树(一)

一.声明 笔者分析的是用C++语言实现.版本号为cocos2d-x-3.3rc0的cocos2d框架的源代码.本文为笔者原创,允许读者分享和转载,只要读者注明文章来源即可. 二.简介 Node对象时场景图的基本元素,并且场景图的基本元素必须是Node对象和Node的子类对象.常见的Node类的子类有:Scene.Layer.Sprite.Menu和Label类. Node类主要实现几个特性: Node对象的 addChild(Node *child).getChildByTag(int tag)

jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先

cocos2dx3.4 导出节点树到XML文件

l利用cocostudio做UI和场景时,经常要去获取某个节点,cocostudio2.1开始加入了文件的概念,可以创建场景,节点,层等文件,把公用的东西创建到文件里,然后把这个文件拖到场景里使用,达到充分利用的目的. 从场景中获取某个文件的节点时,经常发现找不到,于是把场景节点树导出为XML文件,节点树也一目了然了,节点属性如名称等也可以根据需要导出来,效果如下: 代码: //导出从pNode节点开始的节点树到XML文件,bIsRoot:是否为根节点 static void ExptScene