浅谈 JavaScript 处理DOM树形结构-优快云博客

本文介绍了两种遍历DOM树的方法：递归模式和循环模式。递归模式通过递归调用实现深度优先搜索，而循环模式则利用数组来实现广度优先搜索。这两种方法均考虑了document节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遍历 DOM 树

方案1：递归模式

function walkDom(node, callback) {
    if (node === null) { //判断node是否为null
        return
    }
    callback(node) //将node自身传入callback
    node = node.firstElementChild //改变node为其子元素节点
    while (node) {
        walkDom(node, callback) //如果存在子元素，则递归调用walkDom
        node = node.nextElementSibling //从头到尾遍历元素节点
    }
}
walkDom(document, function(node) {console.count()}) //包含document节点
document.querySelectorAll('*').length //数量比上面输出的少1，因为不包含document节点

将上述代码黏贴到任意页面的控制台 console 中执行。
方案2：循环模式

function walkDom(node, callback) {
    if (node === null) {
        return
    }
    var stack = [node] //存入数组
    var target
    while(stack.length) { //数组长度不为0，继续循环
        target = stack.shift() //取出元素
        callback(target) //传入callback
        Array.prototype.push.apply(stack, target.children) //将其子元素一股脑推入stack，增加长度
    }
}
walkDom(document, function(node) {console.count()}) //包含document节点
document.querySelectorAll('*').length //数量比上面输出的少1，因为不包含document节点