JS遍歷DOM 節點樹的實現

本文將分享 dom 節點樹深度遍歷、廣度遍歷**。

假定我僅遍歷 body 且其結構如下：

class="

container
">
class="
left
">
class="
menu
">
class="
right
">
class="
box1
">
class="
box2
">

遍歷完父節點的所有子節點的子節點的子節點...再遍歷其兄弟節點。

輸出：[section.container, div.left, div.menu, div.right, div.box1, div.box2]

const dfs = 

}return this.nodes;
}}console.log(dfs.do(document.body));

遍歷完父節點的所有兄弟節點再遍歷其子節點。

輸出：[section.container, div.left, div.right, div.menu, div.box1, div.box2]

const bfs =

}if(children.length) 
else
return
tmp;
}}console.log(bfs.
do(document.body.childnodes));

非遞迴版：

const bfs = 

}return this.nodes;
}}console.log(bfs.do(document.body.childnodes));

原文：呆戀小喵  

js總結 （6） DOM操作 節點元素 遍歷樹

dom，主要用來修改html的標準程式設計介面，可以用來修改各種html標籤內容 和屬性 樣式。查詢 document 整個文件。document.getelementsbytagname document.getelementbyid document.getelementsbyclassname...

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...