console 命令行工具 X clear

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>