js中text方法是啥意识_JS中的遍历方法有哪些？？

题记

js 的遍历是一个老生常谈的问题，你可能一下子会想到常用的遍历方法，比如for , foreach, for...in, for...of 等等，但是让我们来深入的思考以下这个问题，这些方法有什么异同点？如何对他们进行分类？

如何分类

按照我个人的理解，js中的遍历方法可以分为一下几类：

1. 遍历DOM 的方法。

2. 遍历数组的方法。

3. 遍历对象的方法。

遍历Dom ||  元素遍历

Element Traversal 规范有以下几个属性

1. childElementCount：返回子元素(不包括文本节点和注释)的个数。

2. firstElementChild：指向第一个子元素；firstChild 的元素版。

3. lastElementChild：指向最后一个子元素；lastChild 的元素版。

4. previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。

5. nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。

如何遍历，代码如下：

var i, len, child = element.firstElementChild; while(child != element.lastElementChild){   processChild(child); //已知其是元素    child = child.nextElementSibling;}

DOM2 级遍历和范围模块定义了两个用于辅助完成顺序遍历 DOM 结构的类型：NodeIterator 和 TreeWalker。

这两个类型能够基于给定的起点对 DOM 结构执行深度优先(depth-first)的遍历操作。

NodeIterator

NodeIterator 类型是两者中比较简单的一个，可以使用 document.createNodeIterator()方 法创建它的新实例。这个方法接受下列 4 个参数。

1. root：想要作为搜索起点的树中的节点。

2. whatToShow：表示要访问哪些节点的数字代码。

3. filter：是一个 NodeFilter 对象，或者一个表示应该接受还是拒绝某种特定节点的函数。

4. entityReferenceExpansion：布尔值，表示是否要扩展实体引用。

如何遍历，代码入下：

// 假如需要遍历如下DOM

"div1"> <p> <b>Hellob>    world!  p> <li>List item 1li> List item 2</li> List item 3li>    ul> </div>//  则var div = document.getElementById("div1");var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false);var node = iterator.nextNode();while (node !== null) {  console.log(node.TagName) node = iterator.nextNode();}

TreeWalker

TreeWalker 是 NodeIterator 的一个更高级的版本。除了包括 nextNode()和 previousNode() 在内的相同的功能之外，这个类型还提供了下列用于在不同方向上遍历 DOM 结构的方法。

1. parentNode()：遍历到当前节点的父节点；

2. firstChild()：遍历到当前节点的第一个子节点；

3. lastChild()：遍历到当前节点的最后一个子节点；

4. nextSibling()：遍历到当前节点的下一个同辈节点；

5. previousSibling()：遍历到当前节点的上一个同辈节点。

创建 TreeWalker 对象要使用 document.createTreeWalker()方法:这个方法接受的4个参数与document.createNodeIterator()方法相同:作为遍历起点的根节点,要显示的节点类型、过滤器和一个表示是否扩展实体引用的布尔值。

使用TreeWalker的方法与NodeIterator基本相同，但是TreeWalker 真正强大的地方在于能够在 DOM 结构中沿任何方向移动。使用 TreeWalker 遍历DOM树，即使不定义过滤器,也可以取得所有元素。

var div = document.getElementById("div1");var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);walker.firstChild(); // pwalker.nextSibling(); // ulvar node = waler.firstChild();while(node !== null){  console.log(node.TagName);  node = walker.nextSibling()}

每篇文章尽量不超过1000字，遍历数组和遍历对象的方法，下回再说。

欢迎关注，点赞，转发，评论。。。