<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="container">
<li class="child-1">
<div class="child-1-1">
<div class="child-1-1-1">a</div>
</div>
<div class="child-1-2">
<div class="child-1-2-1">b</div>
</div>
</li>
<li class="child-2">
<div class="child-2-1">c</div>
<div class="child-2-2">d</div>
</li>
<li class="child-3">
<div class="child-3-1">e</div>
<div class="child-3-2">f</div>
</li>
</ul>
<script>
let node = document.getElementsByClassName('container')[0];
let nodeList = [];
nodeList = widthTraversal(node);
console.log(nodeList);
/*深度优先遍历三种方式*/
function deepTraversal1 (node, nodeList = []) {
if (node !== null) {
nodeList.push(node)
let children = node.children
for (let i = 0; i < children.length; i++) {
deepTraversal1(children[i], nodeList)
}
}
return nodeList
}
function deepTraversal2(node) {
let nodes = []
if (node !== null) {
nodes.push(node)
let children = node.children
for (let i = 0; i < children.length; i++) {
nodes = nodes.concat(deepTraversal2(children[i]))
}
}
return nodes
}
// 非递归
function deepTraversal3 (node) {
let stack = []
let nodes = []
if (node) {
// 推入当前处理的node
stack.push(node)
while (stack.length) {
console.log(stack)
let item = stack.pop()
let children = item.children
nodes.push(item)
// node = [] stack = [parent]
// node = [parent] stack = [child3,child2,child1]
// node = [parent, child1] stack = [child3,child2,child1-2,child1-1]
// node = [parent, child1-1] stack = [child3,child2,child1-2]
for (let i = children.length - 1; i >= 0; i--) {
stack.push(children[i])
}
}
}
return nodes
}
// 广度优先遍历
function widthTraversal(node) {
let nodes = [];
let stack = [];
if(node){
stack.push(node);
while(stack.length){
console.log(stack)
let item = stack.shift();
let child = item.children;
nodes.push(item);
for(let i = 0; i < child.length; i ++){
stack.push(child[i]);
}
}
}
return nodes;
}
</script>
</body>
</html>