浅谈DOM数遍历

Posted 2020-07-07

最近一直在研究DOM遍历以及范围的定义；

其实，JS中DOM模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先的遍历操作；

然，此上出自与“DOM2 级遍历和范围”的内容;不过你们懂得，IE不支持DOM遍历。所以，使用下列代码可以检测浏览器对DOM2级遍历能力的支持情况；

var  sTraversals = document.implementation.hasFeature("Traversal","2.0");

var sNodeIterator = (typeof document.createNodeIterator == "function");

var sTreeWalker = (typeof document.createTreeWalker == "function");

其实，现在好多从事前端的人员对于一些前端框架如Jquery等了如指掌，但是一旦触及到原声JS，却无从下手，原因很简单，就是自己还是没有深入了解JS的运行机制，我们只是简单的像机器一样用着Jquery，因为Jquery已经帮你解决好了一些浏览器兼容性问题；

以及一些潜在的bug；而原声JS对于这些问题还是需要你一步一步去研究的；话题扯远了，继续......

任何节点都可以作为遍历的根节点；主要是看你选择谁为根节点；

一：NodeIterator 是这两个比较简单的一个，可以使用document.createNodeIterator()方法创建它的实例；参数参考：

1，root: 想要作为搜索起点的树中的节点；

2，whatToShow:表示要访问那些节点的数字代码；

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

4，entityReferenceExpansion:布尔值，表示是否扩展实体引用。这个参数在html页面中没有用，因为其中的实体引用不能扩展；

这个类型两个主要的方法是nextNode()和previousNode()；nextNode()方法用于向前前进一步，而previousNode()用于向后后退一步；

如：

<div id="my1">

　　<p><b>Hello</b>Andy!</p>

　　<ul>

　　　　<li>Num1</li>

　　　　<li>Num2</li>

　　　　<li>Num3</li>

　　</ul>

</div>

若要遍历div元素中所有元素：

var div =document.getElementById("my1");

var itertaor = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,fasle);

var node = itertaor.nextNode();

while(node !== null){

　　alert(node.tagName);

　　node = itertaor.nextNode();

}

ps:自己可以试试打印出什么结果？

 

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

1，parentNode();遍历到当前节点的父节点；

2，firstChild();遍历到当前节点的第一子节点；

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

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

5，previousSibling();遍历到当前节点的上一个同辈节点；

 

创建TressWalker对象使用document.createTreeWalker()方法，这个方法接收的4个参数与document.createNodeIterator()方法相同；