DOM遍历－NodeIterator VS TreeWalker

DOM遍历是以深度优先遍历的，定义了两种遍历DOM的结构类型NodeIterator和 TreeWalker

深度优先遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom遍历</title>
</head>
<body>
<div>
    <ul>
        <li>1</li>
    </ul>
</div>
</body>
</html>

顺序：document -> html -> head -> title -> Dom遍历 -> body -> div -> ul ->li -> 1

NdeIterator
方法：document.createNodeIterator()
四个参数:

root:搜索起点的节点
whatToShow:节点数字代码
filter:过滤器
entityReferenceException:布尔值,表示是否要扩展实体引用。这个参数在HTML页面中没有用，因为其中的实体引用不能扩展。
在Firefox和Chrome中，createNodeIterator函数除了的一个参数外的其它参数都是可选的。但是在IE中四个参数必须齐全，所以使用时一般四个参数全传上。

whatToShow参数可以有下列这些常量或其组合的取值：
1、NodeFilter.SHOW_ALL：搜索所有节点；
2、NodeFilter.SHOW_ELEMENT：搜索元素节点；
3、NodeFilter.SHOW_ATRRIBUTE：搜索特性节点；
4、NodeFilter.SHOW_TEXT：搜索文本节点；
5、NodeFilter.SHOW_ENTITY_REFERENCE：搜索实体引用节点；
6、NodeFilter.SHOW_ENTITY：搜索实体节点；
7、NodeFilter.SHOW_PROCESSING_INSTRUCTION：搜索PI节；
8、NodeFilter.SHOW_COMMENT：搜索注释节点；
9、NodeFilter.SHOW_DOCUMENT：搜索文档节点；
10、NodeFilter.SHOW_DOCUMENT_TYPE：搜索文档类型节点；
11、NodeFilter.SHOW_DOCUMENT_FRAGMENT：搜索文档碎片节节；
12、NodeFilter.SHOW_NOTATION：搜索记号节点；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom遍历</title>
</head>
<body>
<div id="myDiv">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
</body>
</html>

<script type="text/javascript">
    let div = document.getElementById("myDiv");
    let iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,
null,false);
    let node = iterator.nextNode();
    alert(node);
    while(node!==null){
        alert("node : "+ node.tagName);
        node = iterator.nextNode();
    }
</script>


    alert("只想显示li标签");
    let filter = function (node2) {
        return node2.tagName.toLowerCase() === "li" ?
            NodeFilter.FILTER_ACCEPT:
            NodeFilter.FILTER_SKIP;
    };
    let iterator2 = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,
filter,false);
    let node2 = iterator2.nextNode();
    alert(node2);
    while(node2!==null){
        alert("node2 : "+ node2.tagName);
        node2 = iterator2.nextNode();
    }

TreeWalker
建立和上面一样，但是它更加灵活：
parentNode():进入当前节点的父节点;
firstChild():进入当前节点的第一子节点;
lastChild():进入当前节点的最后一个子节点
nextSibling():进入当前节点的下一个兄弟节点
previousSibling():进入当前节点的前一个兄弟节点
可以任意方向查找
filter值
TreeWalker除了上面出现的NodeFilter.FILTER_ACCEPT， NodeFilter.FILTER_SKIP;还有NodeFilter.FILTER_REJECT。
NodeFilter.FILTER_SKIP:跳过相应的节点继续到下一节点
NodeFilter.FILTER_REJECT:跳过相应节点以及整个子树

DOM遍历－NodeIterator VS TreeWalker

推荐阅读更多精彩内容