如何用BFS和DFS遍歷Dom樹？

看看樹

先來看一顆Dom樹，html代碼以下

<div id="container">
	<div class="node_1">
		<div class="node_1_1"></div>
		<div class="node_1_2"></div>
		<div class="node_1_3"></div>
	</div>
	<div class="node_2">
		<div class="node_2_1"></div>
		<div class="node_2_2"></div>
	</div>
	<div class="node_3"></div>	
</div>
複製代碼

對應的Dom圖片以下(用Word畫的，本靈魂畫手實在盡力了。。)

從圖片中咱們能夠直觀的看出:

BFS遍歷結果:#container,node_1, node_2 ,node_3, node_1_1, node_2_1, node_2_2

DFS遍歷結果:#container,node_1,node_1_1,node_2,node_2_1,node_2_2,node_3

BFS(廣度優先遍歷)

BFS從一個節點開始，嘗試訪問儘量靠近它的目標節點。本質上這種遍歷在圖上是逐層移動的，首先檢查最靠近第一個節點的層，再逐漸向下移動到離起始節點最遠的層。簡單來講在樹中BFS其實就是層次遍歷。

步驟:

• 建立一個隊列，並將開始節點放入隊列中
• 若隊列非空，則從隊列中取出第一個節點，並檢測它是否爲目標節點
• 如果目標節點，則結束搜尋，並返回結果 若不是，則將它全部沒有被檢測過的字節點都加入隊列中
• 若隊列爲空，表示圖中並無目標節點，則結束遍歷

代碼:

const parentDOM = document.getElementById('container');
function breathTravalSal(node){
	const nodes = [];
	const queue = [];
	if(node){
		queue.push(node);
		while(queue.length){
			const item = queue.shift();
			nodes.push(item);
			for(const v of item.children){
				queue.push(v);
			}
		}
	}
	return nodes;
}
console.log(breathTravalSal(parentDOM));
複製代碼

輸出結果：

DFS(深度優先遍歷)

DFS就是從圖中的一個節點開始追溯，直到最後一個節點，而後回溯，繼續追溯下一條路徑，直到到達全部的節點，如此往復，直到沒有路徑爲止。

步驟：

• 訪問頂點v
• 依次從v的未被訪問的鄰接點出發，對圖進行深度優先遍歷；直至圖中和v有路徑相通的頂點都被訪問
• 若此時途中尚有頂點未被訪問，則從一個未被訪問的頂點出發，從新進行深度優先遍歷，直到全部頂點均被訪問過爲止

代碼:

const parentDOM = document.querySelector('#container');
function deepTravalSal(node){
	const nodes = [];
	const stack = [];
	if(node){
		stack.push(node);
		while(stack.length){
			const item = stack.pop();
			const len = item.children.length;
			nodes.push(item);
			for(let i = len - 1; i >= 0; i--){
				stack.push(item.children[i])
			}
		}
	}
	return nodes;
}
console.log(deepTravalSal(parentDOM));
複製代碼

輸出結果:

輸出正確~

小結:

把學過的算法知識用在了前端上，舒坦~