廣度優先遍歷，即父層遍歷結束，才開始遍歷子層，然後一直往下遍歷，如果是下面這樣一顆DOM樹

<div class="root">
    <div class="container">
        <section class="sidebar">
            <ul class="menu"></ul>
        </section>
        <section class="main">
            <article class="post"></article
 
>
            <p class="copyright"></p>
        </section>
    </div>
</div>

則需要遍歷為

DIV .root
DIV .container
SECTION .sidebar
SECTION .main
UL .menu
ARTICLE .post
P .copyright

這種形式，平級的子元素顯示在一起，並且最好隔開，這樣更容易理解。下面就開始寫BFS的實現方法。

首先需要一個列印函式，便於列印資訊

let printInfo = (node)
 
 => {
    console.log(node.tagName, '.' + node.className)

然後是遍歷函式，遍歷中需要一箇中間陣列，即父層遍歷時每遍歷一個元素即將此元素的子元素寫入中間陣列，遍歷完之後，如果此陣列長度不為0，則接著遍歷下一層，直至最後一層。

// root為你需要遍歷的根節點，此處為.root
let root = document.getElementsByClassName('root')[0]

// 此時遍歷的為current，記錄下一層遍歷的為nextRound，初始值為root
let current = []
let nextRound = [root]

// 遍歷函式
 

function bfs () {
    current = nextRound
    // 將nextRound重置，切記不可直接設定length為0，這樣current也會重置
    nextRound = []
    Array.from(current).forEach(function (el) {
        printInfo(el)
        Array.from(el.children).forEach(function (element) {
            nextRound.push(element)
        })
    })
}

// 開始遍歷
while(nextRound.length){
    bfs()
}

深度優先遍歷以深度為主，即遍歷完某一個節點之後，才會繼續往下遍歷兄弟節點，這個只需要迴圈遍歷就行了。

function dfs (node) {
    printInfo(node)
    if(node.children.length){
        Array.from(node.children).forEach(function (el) {
            dfs(el)
        })
    }
}

dfs(root)

這樣打印出來的就是

DIV .root
DIV .container
SECTION .sidebar
UL .menu
SECTION .main
ARTICLE .post
P .copyright

還有一點就是childNodes和children這兩個時不太一樣的，childNodes會將文字節點也打印出來，這時候你就會看到很多undefined .undefined這樣的東西，所以儘量使用children，然後用Array.from將其從HTMLCollection變為一個真正的陣列。