问题:遍历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)
搞定!