<!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>
<div id="dom">
<div id="dom1">
<div id="dom1-1"></div>
<div id="dom1-2"></div>
<div id="dom1-3"></div>
</div>
<div id="dom2">
<div id="dom2-1"></div>
<div id="dom2-2"></div>
<div id="dom2-3"></div>
</div>
<div id="dom3">
<div id="dom3-1"></div>
<div id="dom3-2"></div>
<div id="dom3-3"></div>
</div>
</div>
<script>
let root = document.querySelector("#dom")
function width(node) {
const queue = []
const nodes = []
if(node) {
queue.push(node)
while(queue.length) {
const item = queue.shift()
const children = item.children
nodes.push(item)
// 队列,先进先出
// nodes = [] stack = [parent]
// nodes = [parent] stack = [child1,child2,child3]
// nodes = [parent, child1] stack = [child2,child3,child1-1,child1-2]
// nodes = [parent,child1,child2]
for (let i = 0; i < children.length; i++) {
queue.push(children[i])
}
}
}
return nodes
}
console.log(width(root));
</script>
</body>
</html>