面試題：遍歷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)
複製代碼

搞定！