`
zzc1684
  • 浏览: 1201892 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

常用的遍历节点方法

    博客分类：
  • Js
 
阅读更多

[常用的遍历节点方法]
取得匹配元素的所有子元素组成的集合: 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>元素开始，获取第一个元素，然后获取下一个元素”。但从我们实际编写方式来看，它是按相反的顺序。要解决这个问题，我们将讨论一些可以让自定义的遍历代码更清晰的方式。

 

分享到：
| 清空StringBuffer
评论
发表评论

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

相关推荐

    CTreeCtrl遍历和查找

    如何对CTreeCtrl遍历VC编程中，若要展现一个树形结构，我们基本都会继承CTreeCtrl进行扩展。通过InsertItem、...对树的操作，最常用的就是遍历和查找。如何遍历一个CTreeCtrl呢，以下是采用递归完成的遍历树的函数

    二叉树遍历流程图.pdf

    先序遍历是一种最常用的遍历方法，遍历顺序为：根节点 -&gt; 左子树 -&gt; 右子树。在先序遍历中，我们首先访问根节点，然后递归地访问左子树和右子树。图1至图4为先序遍历的流程图，展示了遍历的顺序和实现细节。 在图1...

    java实现二叉树的Node节点定义手撕8种遍历(一遍过).doc

    递归前序遍历是一种常用的遍历算法，它的遍历顺序是：根节点 -&gt; 左子树 -&gt; 右子树。该算法可以用递归函数来实现。 递归前序遍历的 Java 实现： ```java public void preOrder(Node node) { if (node == null) { ...

    二叉树遍历问题C语言源码和简单教程

    // 遍历节点 visit(node); if (node-&gt;right != nullptr) { s.push(node-&gt;right); } if (node-&gt;left != nullptr) { s.push(node-&gt;left); } } } 中序遍历是指先访问左子树，然后访问根节点，最后访问右子树...

    二叉树的中序线索化和遍历

    我们首先从线索二叉树的当前节点开始遍历，然后访问每个节点的数据元素。 在main函数中，我们首先创建一个二叉树，然后使用中序线索化算法将其转换成线索二叉树。最后，我们使用中序遍历算法来遍历线索二叉树，并...

    二叉树三种遍历算法的源码背诵版

    二叉树的遍历是指从根节点出发，按照某种顺序访问二叉树中的所有节点。二叉树的遍历有多种方式，本文将详细介绍二叉树的三种常见遍历算法：先序遍历、 中序遍历和后序遍历。 1. 先序遍历非递归算法 先序遍历是一种...

    C语言中常用的10中遍历算法实现

    先序遍历（Preorder Traversal）：首先访问根节点，然后按照先序遍历的方式递归访问左子树，最后递归访问右子树。 中序遍历（Inorder Traversal）：首先按照中序遍历的方式递归访问左子树，然后访问根节点，最后...

    二叉树的遍历的介绍.docx

    二叉树的遍历 二叉树的遍历是二叉树操作的... 中序遍历是二叉搜索树（BST）中常用的遍历方式，其结果是有序的。 后序遍历（Post-order Traversal） 后序遍历左子树 后序遍历右子树 访问根节点 后序遍历的结果通

    C++数据结构已知二叉树的前序遍历与中序遍历结果求后序遍历.pdf

    "二叉树的遍历问题" ...10. 递归函数的应用：递归函数是解决二叉树问题的常用方法。通过递归函数，可以实现二叉树的构建和遍历。在给定的代码中，create函数用于构建二叉树，post函数用于遍历二叉树。

    邻接矩阵存储图的深度优先遍历

    深度优先遍历（DFS）是一种经典的图遍历算法，其基本思想是：从某个起始节点开始，依次遍历该节点的所有邻居节点；然后递归遍历这些邻居节点的未被访问过的邻居节点，直到所有节点都被遍历为止。

    C++ 实现二叉树的建立和遍历

    先序遍历是指从根节点开始，先访问当前节点，然后递归地访问左子树和右子树。下面是先序遍历的实现： ```c void preorder(BTNode *t) { if(t!=NULL) { printf("%c\t",t-&gt;data); preorder(t-&gt;lchild); preorder...

    无向图深度遍历邻接矩阵报告.doc

    深度优先遍历算法是一种常用的图遍历算法。该算法从图的某个节点开始，沿着边深入图的内部，直到遍历到所有节点为止。深度优先遍历算法可以用于查找图中的连通分量、拓扑排序、最短路径等。 四、邻接矩阵的深度优先...

    二叉树的遍历 多项式的加法等等

    这些算法可以用来遍历二叉树的所有节点，并输出节点的内容。 void PreOrderTraverse(BiTree &T){ if(T){ visit(T-&gt;data); PreOrderTraverse(T-&gt;lchild); PreOrderTraverse(T-&gt;rchild); } } void ...

    数据结构二叉树遍历有关算法.doc

    数据结构中的二叉树是一种常用的数据结构形式，二叉树遍历是一种基本的算法操作，旨在访问二叉树中的每个节点，并对其进行相应的处理。以下是相关的知识点： 一、 二叉树的定义 在数据结构中，二叉树是一种树形...

    Python3实现二叉树的遍历算法（源代码）

    首先定义了一个二叉树节点类TreeNode，然后分别实现了三种遍历算法的函数。前序遍历（根-左-右）和中序遍历（左-根-右）使用了栈来辅助遍历过程，通过迭代的方式模拟了递归遍历的行为。而后序遍历（左-右-根）由于栈...

    浅析jQuery 遍历函数，javascript中的each遍历_.docx

    5. `.contents()` 方法：获得匹配元素集合中每个元素的子元素，包括文本和说明节点。 6. `.each()` 方法：对 jQuery 对象进行迭代，为每个匹配元素执行函数。 7. `.end()` 方法：结束当前链中最近的一次筛选操作，并...

    MFC CTreeCtrl控件使用例子

    MFC树形结构的常用方法使用例子，包括对树形节点的添加，删除，查找，遍历，排序，在节点中绑定资源等。

    手稿_V1.076

    `ret_val` 用于存储结果，`travelGrandson` 函数用于遍历节点的孙子节点，并将其值累加到 `ret_val` 中，`dfs` 函数用于遍历二叉树，并在遍历过程中检查每个节点的祖父节点的值是否为偶数。如果是，则将该节点的孙子...

    实现深度优先搜索与广度优先搜索算法.doc

    它们都是从图的某个节点出发，遍历图中的所有节点，并输出遍历的顺序。 深度优先搜索（DFS） 深度优先搜索是一种遍历图的算法，它从图的某个节点出发，沿着图的边遍历图中的所有节点。在遍历过程中，每个节点只有...

    基于C语言数据结构二叉树建立遍历冒泡排序快速排序等的毕业设计，二叉树不仅是一种数据结构，而且还是许多算法的基础

    冒泡排序和快速排序是两种常用的排序算法，它们的实现依赖于对数据的遍历。因此，本毕设旨在通过二叉树的遍历来实现这两种排序算法的实现。 ## 二、研究内容 本毕设将包括以下内容： 1. 二叉树的建立和遍历：包括...

Magicbox
Global site tag (gtag.js) - Google Analytics