常用的遍历节点方法 -

zzc1684

浏览: 1225934 次
性别:
来自: 广州

最近访客更多访客>>

songronghu

atianchen

gol

ytleon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

常用的遍历节点方法

博客分类：

[常用的遍历节点方法]
取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素): next()
取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素): prev()
取得匹配元素前后所有的同辈元素: siblings()

查找相关元素的前一个兄弟元素的函数
elem = elem.previousSibling;
查找相关元素的下一个兄弟元素的函数
elem = elem.nextSibling;
查找元素第一个子元素的函数
elem = elem.firstChild;
查找元素最后一个子元素的函数
elem = elem.lastChild;
返回当前元素的父元素，类似parentNode元素属性。你可以一次用一个数字来操纵多个父元素，例如parent(elem,2)就等同于parent(parent(elem))。
查找元素父元素的函数
elem.parentNode;

代码清单5-2　XML文档空格bug的补救方案

function cleanWhitespace( element ) {

// 如果不提供参数，则处理整个HTML文档

element = element || document;

// 使用第一个子节点作为开始指针

var cur = element.firstChild;

// 一直到没有子节点为止

while ( cur != null ) {

// 如果节点是文本节点，并且只包含空格

if ( cur.nodeType == 3 && ! /\S/.test(cur.nodeValue) ) {

// 删除这个文本节点

element.removeChild( cur );

// 否则，它就是一个元素

} else if ( cur.nodeType == 1 ) {

// 递归整个文档

cleanWhitespace( cur );

}

cur = cur.nextSibling; // 遍历子节点

}

假设你要在前面例子中使用这个函数来查找位于<h1>元素后的元素。那么代码应该类似这样：

cleanWhitespace();

// 查找H1元素

document.documentElement

.firstChild // 查找Head元素

.nextSibling // 查找<body>元素

.firstChild // 得到H1元素

.nextSibling // 得到相邻的段落（p）

该技术有优点也有缺点。最大的优点在于，你可以保证DOM文档的遍历在一定程度上的稳定性。但明显性能太差，想想必须遍历每个DOM元素和文本节点，目的只是为了找出包含空格的文本节点。假设你有一个包含大量内容的文档，它可能会严重降低网站的加载速度。此外，每次为文档注入新的HTML，你都需要重新扫描DOM中的新内容，确保没有增加新的有空格填充的文本节点。

此外此函数重要的方面是节点类型的使用。节点的类型可以由检查它的nodeType属性来确定。可能会出现好几种值，但你经常会碰到的是以下3个：

l 元素（nodeType=1）：匹配XML文件中的大部分元素。比如，<li>、<a>、<p>和<body>元素都有一个值为1的nodeType。

l 文本（nodeType=3）：匹配文档内的所有文本块。当使用previousSibling和nextSibling来遍历DOM结构时，你会经常碰到元素内和元素间的文本块。

l 文档（nodeType=9）：匹配文档的根元素。比如，在HTML文档内，它是<html>元素。

此外，你可以用常量来表明不同的DOM节点类型（但只是对非IE浏览器有用）。与其去记住1、3或9，还不如直接直观地使用document.ELEMENT_NODE、document.TEXT_NODE或者document.DOCUMENT_NODE。因为经常清空DOM的空格会让人感到厌烦，所以你应该探索其他遍历DOM结构更有效的方法。

5.2.2　简单的DOM遍历

可以使用纯粹的DOM遍历规则（每个遍历方向都有指针）来开发一些更适合你的HTMLDOM文档遍历函数。大部分Web开发者在大多数情况下仅仅需要遍历DOM元素而非相邻的文本节点，该规则就是基于这样的事实而制定的。以下一系列的辅助函数可以帮助你，它们能够取代标准的previousSibling、nextSibling、firstChild、lastChild和parentNode。代码清单5-3展示的函数，返回的是当前元素的前一个元素，如果前一个元素不存在则是null，类似于元素的previousSibling属性。

代码清单5-3　查找相关元素的前一个兄弟元素的函数

function prev( elem ) {

do {

elem = elem.previousSibling;

} while ( elem && elem.nodeType != 1 );

return elem;

}

代码清单5-4展示的函数，返回的是当前元素的下一个元素，如果下一个元素不存在则是null，类似于元素的nextSibling属性。

代码清单5-4　查找相关元素的下一个兄弟元素的函数

function next( elem ) {

do {

elem = elem.nextSibling;

} while ( elem && elem.nodeType != 1 );

return elem;

}

代码清单5-5展示的函数，返回的是当前元素的第一个子元素，类似于firstChild元素属性。

代码清单5-5　查找元素第一个子元素的函数

function first( elem ) {

elem = elem.firstChild;

return elem && elem.nodeType != 1 ?

next ( elem ) : elem;

}

代码清单5-6展示的函数，返回的是当前元素的最后一个子元素，类似lastChild元素属性。

代码清单5-6　查找元素最后一个子元素的函数

function last( elem ) {

elem = elem.lastChild;

return elem && elem.nodeType != 1 ?

prev ( elem ) : elem;

}

代码清单5-7展示的函数，返回当前元素的父元素，类似parentNode元素属性。你可以一次用一个数字来操纵多个父元素，例如parent(elem,2)就等同于parent(parent(elem))。

代码清单5-7　查找元素父元素的函数

function parent( elem, num ) {

num = num || 1;

for ( var i = 0; i < num; i++ )

if ( elem != null ) elem = elem.parentNode;

return elem;

}

使用这些新函数你就可以迅速遍历DOM文档了，而且不必再为元素间的文本操心。比如，需要查找<h1>元素的下一个元素，现在可以这么做了：

// 查找<h1>元素的下一个元素

next( first( document.body ) )

在这段代码内有两件事值得注意。首先，此处有一个新的引用：document.body。所有的现代浏览器都在HTML DOM文档内通过body属性提供一个对<body>元素的引用。你可以用它来简化你的代码。另一件事情你可能已经注意到，那就是这些函数的书写方式十分违反直觉。一般来说，在遍历时会想：“从<body>元素开始，获取第一个元素，然后获取下一个元素”。但从我们实际编写方式来看，它是按相反的顺序。要解决这个问题，我们将讨论一些可以让自定义的遍历代码更清晰的方式。

分享到：

poi设置行高列宽 | 清空StringBuffer

2011-09-20 13:06
浏览 1054
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

常用的遍历节点方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

常用的遍历节点方法

评论

发表评论

相关推荐

前端js和css的压缩合并之wro4j

易百教程

已测试-幻灯滑动+滚动列表

iscroll4升级到iscroll5全攻略笔记 (博主已改行，不再更新）

IScroll5实现下拉刷新上拉加载更

iscroll5 上下拉动刷新

html页面滚动到最底部时，无限滚动

原生JS实现addClass,removeClass,toggleClass

简约时尚的纯CSS3 Tabs选项卡特效

JS组件系列——表格组件神器：bootstrap table

Bootstrap可编辑表格

HTML5中的Range对象的研究

js createRange与createTextRange的一些用法实例

JS Range HTML文档/文字内容选中、库及应用介绍

JavaScript中textRange对象使用方法小结

javascript Range对象跨浏览器常用操作第1/2页

JS获取节点的兄弟，父级，子级元素

javascript 包裹节点 提高效率

js添加视频并获取视频时间

js添加视频并获取视频时间

最近访客更多访客>>

javascript 包裹节点提高效率