DOM节点树和元素树--深度遍历-白红宇

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

阅读量：6817 次

发布时间：2019-06-26

本文共 1834 字，大约阅读时间需要 6 分钟。

我们在阅读JS高级程序设计的时候，提到了节点树的概念。比如说：

elem.parentNode---找elem的父节点；

elem.childNodes---找elem的所有的直接子节点；

elem.nextSibling---找elem的下一个同辈节点‘；

elem.previousSibling---找elem的上一个同辈节点

因为childNodes包含看不见的空格文本，还有注释等内容，所以使用起来不是太方便。

因此，JS又重新引入了元素树的概念。这个的话，在我们实际应用中，用的比较普遍。

元素树：仅仅包含元素节点的树结构，不是一颗新树，尽是节点数的子集；

elem.parentElement 找节点的父元素；

elem.children返回节点的所有子元素；

elem.firstElementChild 第一个直接子元素；

elem.lastElementChild 最后一个直接字元素；

elem.previousElementSibling 找elem的前一个兄弟元素；

elem.nextElementSibling 找elem的下个兄弟元素；

在这里，我们介绍一个笔试题：

遍历一个指定父节点下的所有后代节点，这里需要明确一点，就是所有的后代节点都需要遍历到：

这里我们需要知道一个算法-----深度优先遍历：当同时有兄弟节点和子节点的时候，总是优先遍历子节点。

上面代码的遍历顺序，就是优先遍历子节点。

我们在高性能JS这本书学到过，就是递归的运行效率没有迭代的运行效率高，所以，我们优化的话，一般都需要把递归的循环优化成迭代的循环。

上面的例子如何修改呢，这里我们要提到一个新的概念，那就是：

NodeIterator 对象，可以对 DOM 树进行深度优先的搜索。

创建 NodeIterator 对象，需要使用 document 对象的 createNodeIterator() 方法，该方法接收四个参数：

root，搜索开始的节点

whatToShow，一个数值代码，表示哪些节点需要搜索

filter，NodeFilter 对象，决定忽略哪些节点

entityReferenceExpansion，布尔值，表示是否需要扩展实体引用

whatToShow 参数：

NodeFilter.SHOW_ALL，显示所有节点

NodeFilter.SHOW_ELEMENT，元素节点

NodeFilter.SHOW_ATTRIBUTE，属性节点

NodeFilter.SHOW_TEXT，文本节点

NodeFilter.SHOW_CDATA_SECTION，![CDATA] 节点

NodeFilter.SHOW_ENTITY_REFERENCE，实体引用节点（&quot）

NodeFilter.SHOW_ENTITY，实体元素节点（<!ENTITY foo "foo">）

NodeFilter.SHOW_PROCESSING_INSTRUCTION，PI 节点

NodeFilter.SHOW_COMMENT，XML 注释节点

NodeFilter.SHOW_DOCUMENT，文档顶层节点

NodeFilter.SHOW_DOCUMENT_TYPE，DTD 节点

NodeFilter.SHOW_DOCUMENT_FRAGMNT

NodeFilter.SHOW_NOTATION

我们重新修改后的代码如下：

                               
function getChildren(parent){ 
                 
//获取NodeIterator对象
                  
var t = document.createNodeIterator(parent,NodeFilter.SHOW_ALL,null,false);
                  
//循环遍历对象的下一个节点；
                                            var currNode=null; 
                  
while((currNode=t.nextNode())!=null){ 
       
//节点不为空，就一直循环遍历下去；直到为null，才中断循环；
                     
console.log(node.nodeType!=3?node.nodeName:node.nodeValue)
                      
}
             
}
                   
getChildren(document.body);