dom节点遍历 TreeWalker

dom节点遍历 TreeWalker

1. const iterator = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, filter); 创建一个root为起点的dom节点迭代器

2. root， 需要遍历的dom树根节点

3. NodeFilter.SHOW_ELEMENT，需要访问的节点类型，支持一下值

   • NodeFilter.SHOW_ALL 所有类型的节点

   • NodeFilter.SHOW_ELEMENT 元素节点

   • NodeFilter.SHOW_TEXT 文本节点

   • NodeFilter.SHOW_COMMENT 注释节点

   • NodeFilter.SHOW_DOCUMENT 文档节点

4. filter ， 遍历时接受或者拒绝某个节点，返回值为NodeFilter.FILTER_REJECT，NodeFilter.FILTER_ACCEPT，NodeFilter.FILTER_SKIP。FILTER_REJECT和FILTER_SKIP会跳过该节点但是还是会遍历其子节点

TreeWalker和NodeIterator比较类似，差异点：

• TreeWalker支持一下方法

  • parentNode() 遍历到当前节点的父节点

  • firstChild() 遍历到当前节点的第一个子节点

  • lastChild() 遍历到当前节点的最后一个子节点

  • nextSibling() 遍历到当前节点的下一个同辈节点

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

• FILTER_REJECT表现不同，在NodeIterator中返回该值还会进入其子节点，但是TreeWalker中返回该值的话会直接跳过该节点及其子节点

<div id="root" class="root">
    <div class="cls-1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="cls-2">
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="cls-3">
        <div class="cls-3-1"></div>
        <div class="cls-3-2"></div>
        <div class="cls-3-3"></div>
    </div>
</div>

    const filter = function(node){
        return node.tagName.toLowerCase() !== 'ul' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
    const root = document.getElementById("root");
    const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, filter);
    let node = treeWalker.nextNode();
    while (node !== null) {
        if (node.tagName.toLowerCase() === 'div') {
            console.log(node.className);
        } else {
            console.log(node.tagName);
            node.classList.add('cls-li')
        }
        node = treeWalker.nextNode();
    }