DOM中BFS(廣度優先遍歷)和DFS(深度優先遍歷)的方法
廣度優先遍歷,即父層遍歷結束,才開始遍歷子層,然後一直往下遍歷,如果是下面這樣一顆DOM樹
<div class="root">
<div class="container">
<section class="sidebar">
<ul class="menu"></ul>
</section>
<section class="main">
<article class="post"></article >
<p class="copyright"></p>
</section>
</div>
</div>
則需要遍歷為
DIV .root
DIV .container
SECTION .sidebar
SECTION .main
UL .menu
ARTICLE .post
P .copyright
這種形式,平級的子元素顯示在一起,並且最好隔開,這樣更容易理解。下面就開始寫BFS的實現方法。
首先需要一個列印函式,便於列印資訊
let printInfo = (node) => {
console.log(node.tagName, '.' + node.className)
然後是遍歷函式,遍歷中需要一箇中間陣列,即父層遍歷時每遍歷一個元素即將此元素的子元素寫入中間陣列,遍歷完之後,如果此陣列長度不為0,則接著遍歷下一層,直至最後一層。
// root為你需要遍歷的根節點,此處為.root
let root = document.getElementsByClassName('root')[0]
// 此時遍歷的為current,記錄下一層遍歷的為nextRound,初始值為root
let current = []
let nextRound = [root]
// 遍歷函式
function bfs () {
current = nextRound
// 將nextRound重置,切記不可直接設定length為0,這樣current也會重置
nextRound = []
Array.from(current).forEach(function (el) {
printInfo(el)
Array.from(el.children).forEach(function (element) {
nextRound.push(element)
})
})
}
// 開始遍歷
while(nextRound.length){
bfs()
}
深度優先遍歷以深度為主,即遍歷完某一個節點之後,才會繼續往下遍歷兄弟節點,這個只需要迴圈遍歷就行了。
function dfs (node) {
printInfo(node)
if(node.children.length){
Array.from(node.children).forEach(function (el) {
dfs(el)
})
}
}
dfs(root)
這樣打印出來的就是
DIV .root
DIV .container
SECTION .sidebar
UL .menu
SECTION .main
ARTICLE .post
P .copyright
還有一點就是childNodes和children這兩個時不太一樣的,childNodes會將文字節點也打印出來,這時候你就會看到很多undefined .undefined
這樣的東西,所以儘量使用children,然後用Array.from將其從HTMLCollection變為一個真正的陣列。
相關推薦
DOM中BFS(廣度優先遍歷)和DFS(深度優先遍歷)的方法
廣度優先遍歷,即父層遍歷結束,才開始遍歷子層,然後一直往下遍歷,如果是下面這樣一顆DOM樹 <div class="root"> <div class="container"> <section cla
BFS(廣搜)和DFS(深搜)演算法原理(通俗易懂版)
DFS 演算法思想:一直往深處走,直到找到解或者走不下去為止BFS演算法DFS:使用棧儲存未被檢測的結點,結點按照深度優先的次序被訪問並依次被壓入棧中,並以相反的次序出棧進行新的檢測。BFS:使用佇列儲存未被檢測的結點。結點按照寬度優先的次序被訪問和進出佇列。框架:BFS#i
c#中的delegate(委托)和event(事件)
sel 指針 添加 自動 關鍵字 only cnblogs 私有 part 委托: 托付其他人做這件事 ,包括 托付自己 ,即 一個方法 可以 調用 沒有關系的其他方法 , 也可以 將委托傳遞過去 ,回調自己的方法 ,且 可以自定義參數 ,非常方便 互相傳值, 適
elasticsearch--聚合中桶(Buckets)和指標(Metrics)的概念
就會 只有一個 img max() earch 執行 都是 access buck 寫在前面的話:讀書破萬卷,編碼如有神--------------------------------------------------------------------主要內容包括:
.Net: C#中的委托(Delegate)和事件(Event)
一道 中大 每次 summary lang tro 避免 strong lse 委托和事件在 .Net Framework中的應用非常廣泛,然而,較好地理解委托和事件對很多接觸C#時間不長的人來說並不容易。它們就像是一道檻兒,過了這個檻的人,覺得真 是太容易了,而沒有過去的
C#中重寫(override)和覆蓋(new)的區別
實現 div del end 抽象方法 ring reg strong AR 重寫 用關鍵字 virtual 修飾的方法,叫虛方法。可以在子類中用override 聲明同名的方法,這叫“重寫”。相應的沒有用virtual修飾的方法,我們叫它實方法。重寫會改變父類方法的功能。
jQuery中的prop()和attr()的區別
att 設置 參數 bsp 之前 () prop 使用 不同 1、jQuery中的prop()和attr()的區別 prop()是在jQuery1.6版本之後才有的,在之前一直都是使用attr(), prop()修復了attr()的一些小bug。 2、推薦用法:
python中np.multiply()、np.dot()和星號(*)三種乘法運算的區別
圖片 分享 png blog details 分享圖片 blank net ref https://blog.csdn.net/zenghaitao0128/article/details/78715140 總結一下: python中np.multiply()、np.
python中的encode()和decode()函式
前言: 我們知道,計算機是以二進位制為單位的,也就是說計算機只識別0和1,也就是我們平時在電腦上看到的文字,只有先變成0和1,計算機才會識別它的意思。這種資料和二進位制的轉換規則就是編碼。計算機的發展中,有ASCII碼,GBK,Unicode,utf-8編碼。我們先從編碼的發展史瞭解一下編碼的進化過程。
css中文字(text)和字型(font)屬性
文字屬性 1、text-decoration屬性表示文字的修飾 none:取消裝飾 underline :下劃線,與標籤、效果相同 overline :上劃線 line-through :貫穿線(刪除線),與標籤、效果相同 blink :閃爍(因相容性問題很少使用)
Web開發——JavaScript庫(jQuery HTML——獲取/設定內容和屬性(DOM操作) 續,需要整合在一起)
3.2 text()、html() 以及 val()的回撥函式 上面的三個 jQuery 方法:text()、html() 以及 val(),同樣擁有回撥函式。回撥函式由兩個引數:被選元素列表中當前元素的下標,以及原始(舊的)值。然後以函式新值返回您希望使用的字串。 下面的例子演示
Web開發——JavaScript庫(jQuery HTML——獲取/設定內容和屬性(DOM操作))
jQuery 擁有可操作 HTML 元素和屬性的強大方法。 1、jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力。 jQuery 提供一系列與 DOM 相關的方法,這使訪問和操作元素和屬性變得很容易。 提示:DOM = Document Object
spring中過濾器(filter)、攔截器(interceptor)和切面(aop)的執行順序
1.程式執行的順序是先進過濾器,再進攔截器,最後進切面。注意:如果攔截器中preHandle方法返回的為false時,則無法進入切面,例子如下 @RestController @RequestMapping("/user") public class UserController {
迷宮問題BFS和DFS(模板)
迷宮問題BFS和DFS(模板) DFS的基本結構: void dfs(int 引數1,int 引數2) { if(不滿足要求) return; //剪枝條件 if(達到目標值) { 儲存當前答案;
python中lambda表示式的使用以及兩個BIF即filter()和map()的使用
1.lambda表示式 作用:在用python寫一些執行指令碼時,使用lambda就可以省下定義函式過程,比如我們只是需要寫一個簡單的指令碼來管理伺服器時間,我們就不需要專門定義一個函式然後再寫呼叫,使用lambda就可以使的程式碼更加簡潔 對於一些比較抽象並且整個程式使用下來只需要呼叫
js便籤筆記(2)——DOM元素的特性(Attribute)和屬性(Property)
** 本文轉載自:https://www.cnblogs.com/wangfupeng1988/p/3631853.html (感謝分享) 1.介紹: 上篇js便籤筆記http://www.cnblogs.com/wangfupeng1988/p/3626300.html最後提到了d
Python中的bytearray()和bytes()函式
Python中的bytearray()和bytes()函式 概述 bytearray() 函式返回新位元組陣列,數組裡的元素可變,且每個元素的值在0至255之間。bytes()函式是Python 3中增加的內建函式,語法、引數與bytearray() 一樣,只是返回的新位元組陣列不可
Canvas中的beginPath()和closePath()
在學習H5新元素的時候,瞭解到了畫布canvas:可以在網頁中繪製所需要的圖形;其中在描繪扇形圖時發現了關於beginPath()和closePath()的問題,在接下來將會進行分析和總結; 第一步:提畫筆,點江山 <!--html程式碼--> &l
Python中的容器(container)、迭代器(iterator)和生成器(generator:yield)
1、容器迭代器iterator 以list容器(tuple,range,file類似)為例,list容器可以呼叫自己的__iter__()方法獲取用來迭代自己內部元素的迭代器。例如: # list容器 myList = [1, 2, 3] # 獲取list容器的迭代器 it
c#中的delegate(委託)和event(事件)
一、delegate到底是什麼東西 孩子,C語言總學過吧,如果你學得不像我那麼差的話,函式指標總用過吧,就算沒用過總聽說過吧,嗯,大膽的告訴你,你完全可以把delegate理 解成C中的函式指標,它允許你傳遞一個類A的方法m給另一個類B的物件,使得類B的物件能夠呼叫這個方法m,