2017-08-24 101 views
1

這是一個遍歷整個文檔對象模型的簡單函數。我被捆綁明白,如果這是第一次廣度和深度第一,如何理解爲什麼:- 這是廣度優先還是深度優先示例?

var traverseDOM = function() { 
    function traverse (parent) { 
    // mark 1 
    _(parent.childNodes).forEach((child) => { 
     traverse(child); 
    } 
    // mark 2 
    } 
    traverse(document.body); 
} 

這似乎是從這個相關SO Post深度優先搜索。

它可以根據wikipedia進一步分類。

InOrder,PreOrder和PostOrder。

+4

這是DFS。 BFS並不那麼簡單。 –

+7

手動執行它,並查看它處理樹中節點的順序。 – Barmar

+0

順便說一句,不會終止圓形圖... – pedromss

回答

1

正如Eugene所說,它是Depth First Search算法的一個例子。如果你在4號線發現,它使用遞歸併通過它搜索的第一個孩子:

`traverse(child);` 

和這條線被稱爲父節點for each child

UPDATE:添加爲清楚起見評論:「孩子,再次對孩子叫移功能,強制系統往下走,直到遇到一個節點‘ ’儘快,因爲它得到」第一

+0

雖然這是不正確的推理,或者沒有完全推理。廣度優先搜索還將遍歷子節點。 – Amy

+0

擊中第一個孩子是它每次做的第一件事,因此它將盡快深入 – dandavis

+0

@Amy,只要它獲得「第一個」孩子,它就會再次對該孩子調用遍歷函數,迫使系統下降直到它命中一個節點。讓我更新我的答案。感謝您指出。 – user3815252

3

考慮下面的樹:

Initial tree

你開始traverse(1)

traverse(1) 

traverse(1)

而經過 「標記1」 的方法將開始遍歷所有子節點,每個呼叫traverse。第一,traverse(1.1),將 「關於執行闖進」:

traverse(1) 
traverse(1.1) 

traverse(1.1)

由於traverse(1.1)點擊 「標記1」,它會開始進行兒童,並呼籲traverse(1.1.1)

traverse(1) 
traverse(1.1) 
traverse(1.1.1) 

traverse(1.1.1)

S因斯「1.1.1」沒有任何子女,traverse(1.1.1)達到「標記2」和執行流程將返回forEach循環父方法traverse(1.1)的:

traverse(1) 
traverse(1.1) 

traverse(1.1)

循環會一直繼續traverse將被稱爲第二個孩子, 「1.1.2」:

traverse(1) 
traverse(1.1) 
traverse(1.1.2) 

traverse(1.1.2)

之後「1。1" 已經被處理,traverse(1.1)達到 「標記2」,並且執行流現在回到在forEach環的traverse(1)

traverse(1) 

traverse(1)

用程序 「1.2」:

traverse(1) 
traverse(1.2) 

traverse(1.2)

我會停在這裏,但你應該得到它的竅門。值得一提的是,在「1.2」之前訪問「1.1.1」和「1.1.2」,使其成爲深度優先搜索。廣度優先搜索將在「1.1.1」之前訪問「1.2」和「1.3」。

+0

你用什麼工具繪製圖表?很好的解釋和出色的工作! – deblocker

+0

@deblocker:那是https://www.draw.io/ – Marvin