深度优先搜索（DFS）
百度百科：深度优先搜索属于图算法的一种，英文缩写为DFS即Depth First Search。其过程简要来说是对每一个可能的分支路径深入到不能再深入为止，而且每个节点只能访问一次。
<div id="app" data-index="0">
<ul data-index="1">
<li data-index="2">
<p data-index="3">
<span data-index="4"></span>
</p>
</li>
<li data-index="5"></li>
</ul>
<p data-index="6"></p>
</div>
深度优先搜索遍历该DOM结构，输出的结构是：["div", "ul", "li", "p", "span", "li", "p"]
function dfs(dom){
const result = []
const map = item => {
result.push(item.nodeName.toLocaleLowerCase())
Array.from(item.children).forEach(child => {
map(child)
})
}
map(dom)
return result
}
console.log(dfs(document.querySelector('#app')))
广度优先搜索（BFS）
百度百科：英文全称是Breadth First Search，属于一种盲目搜寻法，目的是系统地展开并检查图中的所有节点，以找寻结果。换句话说，它并不考虑结果的可能位置，彻底地搜索整张图，直到找到结果为止。
<div id="app" data-index="0">
<ul data-index="1">
<li data-index="3">
<p data-index="5">
<span data-index="6"></span>
</p>
</li>
<li data-index="4"></li>
</ul>
<p data-index="2"></p>
</div>
广度优先搜索遍历该DOM结构，输出的结构是： ["div", "ul", "p", "li", "li", "p", "span"]
function bfs(dom){
const list = [dom]
const result = []
while(list.length){
const item = list.shift()
result.push(item.nodeName.toLocaleLowerCase())
list.push(...item.children)
}
return result
}
console.log(bfs(document.querySelector('#app')))
