var node = document.getElementById('D1');
function rangeInterator(node){
var arr = [];
arr.push(node);
while(arr.length > 0){
node = arr.shift();
if(node.children.length > 0){
for (var i = 0; i < node.children.length; i++){
arr.push(node.children[i])
}
}
}
}
console.time('rangeInterator')
rangeInterator(node)
console.timeEnd('rangeInterator')
function depInterator(node){
if(node.children.length>0){
for(let j=0;j<node.children.length;j++){
depInterator(node.children[i])
}
}
}
console.time('depInterator')
rangeInterator(node)
console.timeEnd('depInterator')
<div id="D1" class="D1">
<div class="d1">
<p class="p1"></p>
</div>
<div class="d2">
<p class="p2">
<i></i>
</p>
</div>
</div>
个人理解是当数据多的时候明显是深度遍历更优，少的时候广度遍历更优
其实这里我开始的时候纠结了一会，因为当时我找不到广度遍历和深度遍历区别，后来我发现了，其实广度遍历就是从根结点开始，然后把，子节点（所有）通过for循环放到数组里面，然后去这个数组中的第一个元素，注意：此时我们判断这个元素有没有子元素，如果有，只取子节点的，循环把子节点push到数组里面。
这就是实现顺序的精髓所在，不懂得可以看看打印的东西，可以帮助理解