面试题:遍历DOM树

1,490 阅读1分钟

问题:遍历DOM树并打印出DOM节点的tagName和className

思路:

首先我们不确定当前dom下有多少各节点,也不知道有多少层。 我们创建一个队列,并把当前最外层dom放进去,while遍历,拿出队列第一个dom并判断当前dom是否有子级dom,如果没有 跳过(这里为什么是跳过是因为有可能当前节点没有子级,有可能当前节点还有兄弟节点)如果有子级节点 那么遍历子级节点 push到队列,继续while。

function traversDom(boxNode){
            //创建一个队列,并把最外层放入队列
            let queue = [boxNode]
            // 遍历队列
            while (queue.length){
                // 获取队列第一个dom
                let node = queue.shift()
                // 打印dom信息
                pointNodeInfo(node)
                // 判断当前都没是否有子级,如果没有跳过 可能会有兄弟节点
                if(!node.children.length){
                    continue
                }
                // 如果有遍历 子级节点 并插入到队列,继续循环
                Array.from( node.children ).forEach( item =>{
                    queue.push(item)
                })

            }
        }

        function pointNodeInfo(node){
            console.log(node.tagName+"-"+node.className)
        }

        traversDom(obox)

搞定!