console
// dfs 深度优先 栈
// 以纵向的维度对dom树进行遍历，从一个dom节点开始，
// 一直遍历其子节点，直到它的所有子节点都被遍历完毕之后在遍历它的兄弟节点
function deepFirstSearch(node) {
let nodes = [];
if (node != null) {
let stack = []; // 栈 push pop
stack.push(node); // 进栈
while (stack.length != 0) {
let item = stack.pop(); // 出栈
nodes.push(item);
let children = item.children;
for (let i = children.length - 1; i >= 0; i--)
stack.push(children[i]);
}
}
return nodes;
}
// bfs 广度优先 队列
// 以横向的维度对dom树进行遍历，从该节点的第一个子节点开始，遍历其所有的兄弟节点，
// 再遍历第一个节点的子节点，完成该遍历之后，暂时不深入，开始遍历其兄弟节点的子节点
function breadthFirstSearch(node) {
let nodes = []
if (node != null) {
let queue = [] // 队列 push shift
queue.push(node)
while (queue.length != 0) {
let item = queue.shift()
nodes.push(item)
let children = item.children
for (let i = 0, len = children.length; i < len; i++) {
queue.push(children[i])
}
}
}
return nodes
}
let root = document.getElementById('root')
let dfsArr = deepFirstSearch(root)
let bfsArr = breadthFirstSearch(root)
console.log(dfsArr) // [div#root, ul, li, a, img, li, span, li, p, button]
console.log(bfsArr) // [div#root, ul, p, button, li, li, li, a, span, img]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li>
<a href="">
<img src="" alt="">
</a>
</li>
<li>
<span></span>
</li>
<li>
</li>
</ul>
<p></p>
<button></button>
</div>
</body>
</html>