[JavaScript] 第1371天 使用js写一个方法遍历输出页面中的所有元素

121 阅读1分钟

递归方法

function traverseElement(element) {
  // 遍历当前元素的子节点
  for (let i = 0; i < element.childNodes.length; i++) {
    const node = element.childNodes[i];
    // 判断当前节点是否是元素节点
    if (node.nodeType === 1) {
      console.log(node); // 输出当前元素
      traverseElement(node); // 递归遍历当前元素的子节点
    }
  }
}

// 调用方法开始遍历页面中的所有元素
traverseElement(document.documentElement);

循环方法

const stack = [document.documentElement];

while (stack.length > 0) {
  const element = stack.pop();
  // 遍历当前元素的子节点并将其压入栈中
  for (let i = 0; i < element.childNodes.length; i++) {
    const node = element.childNodes[i];
    if (node.nodeType === 1) {
      stack.push(node);
    }
  }
  console.log(element); // 输出当前元素
}

以上两种方法都可以遍历页面中的所有元素,并输出到控制台中。

更多题目

github.com/haizlin/fe-…