dom节点遍历 NodeIterator

最新推荐文章于 2024-03-29 10:34:43 发布

2422400672

最新推荐文章于 2024-03-29 10:34:43 发布

阅读量175

点赞数

分类专栏：前端 javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_36154659/article/details/125354014

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

javascript

23 篇文章 0 订阅

订阅专栏

dom节点遍历 NodeIterator

const iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, filter); 创建一个root为起点的dom节点迭代器
root，需要遍历的dom树根节点
NodeFilter.SHOW_ELEMENT，需要访问的节点类型，支持一下值
- NodeFilter.SHOW_ALL 所有类型的节点
- NodeFilter.SHOW_ELEMENT 元素节点
- NodeFilter.SHOW_TEXT 文本节点
- NodeFilter.SHOW_COMMENT 注释节点
- NodeFilter.SHOW_DOCUMENT 文档节点
filter ，遍历时接受或者拒绝某个节点，返回值为NodeFilter.FILTER_REJECT，NodeFilter.FILTER_ACCEPT，NodeFilter.FILTER_SKIP。FILTER_REJECT和FILTER_SKIP会跳过该节点但是还是会遍历其子节点

<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() !== 'div' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
}
const root = document.getElementById("root");
const iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, filter);
let node = iterator.nextNode();
while (node !== null) {
    if (node.tagName.toLowerCase() === 'div') {
        console.log(node.className);
    } else {
        console.log(node.tagName);
        node.classList.add('cls-li')
    }
    node = iterator.nextNode();
}