使用深度优先遍历(DFS)查找 document.body 下面所有 class 为 a 的 dom 节点的代码示例:
function findNodeByClassDeep(node, className){
let result = [];
if(node.classList && node.classList.contains(className)){
// classList.contains 确定元素中是否包含指定的类名,返回true/false
result.push(node);
}
let children = node.children;
for(let i = 0 ; i < children.length ; i++){
result = result.concat(findNodeByClassDeep(children[i],className))
}
return result;
}
findNodeByClassDeep(document.body,'a')
使用广度优先遍历(BFS)查找 document.body 下面所有 class 为 a 的 dom 节点的代码示例:
function findNodesByClassWide(node, className) {
let result = [];
let queue = [node];
while (queue.length) {
let cur = queue.shift();
if (cur.classList && cur.classList.contains(className)) {
result.push(cur);
}
let children = cur.children;
for (let i = 0; i < children.length; i++) {
queue.push(children[i]);
}
}
return result;
}
let nodes = findNodesByClassWide(document.body, 'li');
深度优先遍历(DFS)和广度优先遍历(BFS)是图和树等数据结构中常用的遍历算法。
深度优先遍历从起点出发,依次访问与其相邻的节点,并沿着每一条路径继续往下访问直到无法继续为止,然后回溯到最近的一个未访问过的节点,重复上述过程,直到所有节点都被访问。可以使用递归或栈来实现。
广度优先遍历则按照离起点的距离从近到远依次访问与其相邻的节点,即先访问与起点距离为1的节点,再访问距离为2的节点,以此类推,直到所有节点都被访问。可以使用队列来实现。
因此,两者主要的区别在于遍历顺序不同:DFS 沿着一条路径进行遍历,而 BFS 则按照广度优先的顺序进行遍历。