成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

DOM樹(shù)遍歷之JS實(shí)現(xiàn)DFS&BFS

imccl / 1382人閱讀

摘要：對(duì)于上面例子遍歷結(jié)果應(yīng)為則總是先遍歷當(dāng)前層級(jí)的所有節(jié)點(diǎn)，只有當(dāng)當(dāng)前層級(jí)所有節(jié)點(diǎn)都遍歷結(jié)束后才會(huì)進(jìn)入下一層級(jí)。

我們一般可以采用DFS（深度優(yōu)先遍歷）和BFS（廣度優(yōu)先遍歷）來(lái)遍歷DOM樹(shù)

介紹 DFS & BFS

我們來(lái)結(jié)合具體例子進(jìn)行分析，給出HTML代碼片段如下：

    DFS總是先進(jìn)入下一級(jí)節(jié)點(diǎn)，只有當(dāng)下一級(jí)沒(méi)有未遍歷的子節(jié)點(diǎn)時(shí)才會(huì)進(jìn)入到當(dāng)前層級(jí)的其它節(jié)點(diǎn)。對(duì)于上面例子DFS遍歷結(jié)果應(yīng)為：

    root, container, sidebar, menu, main, post, copyright

    BFS則總是先遍歷當(dāng)前層級(jí)的所有節(jié)點(diǎn)，只有當(dāng)當(dāng)前層級(jí)所有節(jié)點(diǎn)都遍歷結(jié)束后才會(huì)進(jìn)入下一層級(jí)。對(duì)于上面例子BFS遍歷結(jié)果應(yīng)為：

    root, container, sidebar, main, menu, post, copyright
    DFS的具體實(shí)現(xiàn)

    DFS主要采用遞歸實(shí)現(xiàn)，依次遍歷節(jié)點(diǎn)，如果遍歷到的節(jié)點(diǎn)有子節(jié)點(diǎn)，則開(kāi)始遍歷子節(jié)點(diǎn)

    const DFSTraverse = (rootNodes, rootLayer) => {
      const roots = Array.from(rootNodes)
      while (roots.length) {
        const root = roots.shift()
        printInfo(root, rootLayer)
        // 如果有子節(jié)點(diǎn)，直接遍歷子節(jié)點(diǎn)，同時(shí)將層級(jí)加1
        if (root.children.length) {
          DFSTraverse(root.children, rootLayer + 1)
        }
      }
    }
    BFS的具體實(shí)現(xiàn)

    BFS采用隊(duì)列的思想，采用出隊(duì)的方式遍歷節(jié)點(diǎn)，如果遍歷到的節(jié)點(diǎn)有子節(jié)點(diǎn)，則將子節(jié)點(diǎn)入隊(duì)（這里處理節(jié)點(diǎn)層級(jí)的方式比DFS更復(fù)雜一些，因?yàn)檫@里將所有節(jié)點(diǎn)都放到了同一個(gè)數(shù)組中進(jìn)行處理）

    const BFSTraverse = (rootNodes, rootLayer) => {
      const roots = Array.from(rootNodes)
      const rootsLayer = [] // 單用一個(gè)數(shù)組存放每個(gè)節(jié)點(diǎn)的的層級(jí)
      // 初始化
      for (let i = 0; i < roots.length; i++) {
        rootsLayer.push(rootLayer)
      }
      var rootIdx = 0 // 記錄當(dāng)前處理roots中的第幾個(gè)節(jié)點(diǎn)，方便查找rootsLayer中對(duì)應(yīng)的層級(jí)
      while (roots.length) {
        const root = roots.shift() // 出隊(duì)
        printInfo(root, rootsLayer[rootIdx])
        // 如果有子節(jié)點(diǎn)，將子節(jié)點(diǎn)放到roots隊(duì)列中
        if (root.children.length) {
          Array.prototype.push.apply(roots, Array.from(root.children))
          // 將當(dāng)前層級(jí)加1得到子節(jié)點(diǎn)的層級(jí)
          rootLayer = rootsLayer[rootIdx] + 1
          for (let i = 0; i < root.children.length; i++) {
            rootsLayer.push(rootLayer)
          }
        }
        // 處理下一個(gè)root節(jié)點(diǎn)
        rootIdx++
      }
    }
    結(jié)果

    先給大家補(bǔ)全代碼：

    // 輸入節(jié)點(diǎn)信息
const printInfo = (node, layer) => {
      var str = ""
      for (let i = 1; i < layer; i++) {
        str += " "
      }
      console.log(`${layer}:${str}${node.tagName} .${node.className}`);
    }

console.log("DFS *******************************");
DFSTraverse(document.querySelectorAll(".root"), 1);
console.log("BFS *******************************");
BFSTraverse(document.querySelectorAll(".root"), 1);

    上面例子的運(yùn)行結(jié)果為：

    參考

    破解前端面試（80% 應(yīng)聘者不及格系列）：從 DOM 說(shuō)起
    Javascript-ONLY DOM Tree Traversal - DFS and BFS?

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82556.html

    相關(guān)文章

    • DOM樹(shù)遍歷之JS實(shí)現(xiàn)DFS&amp;BFS

      摘要：對(duì)于上面例子遍歷結(jié)果應(yīng)為則總是先遍歷當(dāng)前層級(jí)的所有節(jié)點(diǎn)，只有當(dāng)當(dāng)前層級(jí)所有節(jié)點(diǎn)都遍歷結(jié)束后才會(huì)進(jìn)入下一層級(jí)。 我們一般可以采用DFS（深度優(yōu)先遍歷）和BFS（廣度優(yōu)先遍歷）來(lái)遍歷DOM樹(shù) 介紹 DFS & BFS 我們來(lái)結(jié)合具體例子進(jìn)行分析，給出HTML代碼片段如下： DFS總是先進(jìn)入下一...

      fengxiuping 評(píng)論0 收藏0

    • JS算法之深度優(yōu)先遍歷(DFS)和廣度優(yōu)先遍歷(BFS)

      摘要：算法之深度優(yōu)先遍歷和廣度優(yōu)先遍歷背景在開(kāi)發(fā)頁(yè)面的時(shí)候，我們有時(shí)候會(huì)遇到這種需求在頁(yè)面某個(gè)節(jié)點(diǎn)中遍歷，找到目標(biāo)節(jié)點(diǎn)，我們正常做法是利用選擇器，或者，但在本文，我們從算法的角度去查找節(jié)點(diǎn)，同時(shí)理解一下深度優(yōu)先遍歷和廣度優(yōu)先遍歷的原理。 JS算法之深度優(yōu)先遍歷(DFS)和廣度優(yōu)先遍歷(BFS) 背景 在開(kāi)發(fā)頁(yè)面的時(shí)候，我們有時(shí)候會(huì)遇到這種需求：在頁(yè)面某個(gè)dom節(jié)點(diǎn)中遍歷，找到目標(biāo)dom節(jié)點(diǎn)，...

      roadtogeek 評(píng)論0 收藏0

    • JavaScript樹(shù)結(jié)構(gòu)深度優(yōu)先算法

      　　什么是樹(shù)　　現(xiàn)實(shí)中樹(shù)隨處可見(jiàn)；在計(jì)算機(jī)世界，樹(shù)就是一種分層結(jié)構(gòu)的抽象模型。　　如下圖所示：　　樹(shù)結(jié)構(gòu)的可以用在很多情景，就如下圖公司的組織架構(gòu)，用樹(shù)就可以表達(dá)出來(lái)，如下圖：　　組織架構(gòu)只是其中之一，比如族譜、省市等用樹(shù)的結(jié)構(gòu)形式展現(xiàn)是完全可以。　　樹(shù)的術(shù)語(yǔ)　　樹(shù)有很多的術(shù)語(yǔ)，如下圖：　　樹(shù)：n(n≥0)個(gè)節(jié)點(diǎn)所構(gòu)成的有限集合，當(dāng)n=0時(shí)，稱為空樹(shù)；　　節(jié)點(diǎn)的度：節(jié)點(diǎn)的子樹(shù)個(gè)數(shù)，例如B節(jié)點(diǎn)的度就...

      3403771864 評(píng)論0 收藏0

    • 用JavaScript來(lái)學(xué)習(xí)樹(shù)「譯」

      摘要：樹(shù)可謂是開(kāi)發(fā)者最常碰到的數(shù)據(jù)結(jié)構(gòu)之一了要知道整張網(wǎng)頁(yè)就是一棵樹(shù)啊所以我們就來(lái)學(xué)習(xí)樹(shù)這一數(shù)據(jù)結(jié)構(gòu)吧在這篇文章中我們將創(chuàng)建一棵樹(shù)并且用兩種不同的方法來(lái)遍歷它深度優(yōu)先遍歷和寬度廣度優(yōu)先遍歷方法使用借助棧這一數(shù)據(jù)結(jié)構(gòu)來(lái)訪問(wèn)樹(shù)的每個(gè)節(jié)點(diǎn)則借助了隊(duì) 樹(shù)可謂是web開(kāi)發(fā)者最常碰到的數(shù)據(jù)結(jié)構(gòu)之一了. 要知道, 整張網(wǎng)頁(yè)就是一棵DOM樹(shù)啊 (Document Object Model ). 所以我...

      Youngdze 評(píng)論0 收藏0

    • js 中二叉樹(shù)的深度遍歷與廣度遍歷(遞歸實(shí)現(xiàn)與非遞歸實(shí)現(xiàn))

      摘要：樹(shù)中結(jié)點(diǎn)的最大層次稱為樹(shù)的深度或高度。二叉樹(shù)有深度遍歷和廣度遍歷，深度遍歷有前序中序和后序三種遍歷方法。二叉樹(shù)的前序遍歷可以用來(lái)顯示目錄結(jié)構(gòu)等中序遍歷可以實(shí)現(xiàn)表達(dá)式樹(shù)，在編譯器底層很有用后序遍歷可以用來(lái)實(shí)現(xiàn)計(jì)算目錄內(nèi)的文件及其信息等。 樹(shù)的簡(jiǎn)介 棧、隊(duì)列、鏈表等數(shù)據(jù)結(jié)構(gòu)，都是順序數(shù)據(jù)結(jié)構(gòu)。而樹(shù)是非順序數(shù)據(jù)結(jié)構(gòu)。樹(shù)型結(jié)構(gòu)是一類非常重要的非線性結(jié)構(gòu)。直觀地，樹(shù)型結(jié)構(gòu)是以分支關(guān)系定義的層次結(jié)...

      Yuanf 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <