面试题：遍历DOM树

问题：遍历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)
复制代码

搞定！