如何使用JavaScript选择除所有<p>元素及其子元素外的全部页面元素

方案1：使用TreeWalker（性能最优，适合大页面爬取场景） #

该方案利用DOM原生的遍历器能力，遍历过程中直接过滤掉不符合要求的节点，不需要二次遍历校验，执行效率最高：

// 初始化DOM遍历器
const domWalker = document.createTreeWalker(
  document.body, // 可修改为你需要遍历的根容器节点
  NodeFilter.SHOW_ELEMENT,
  {
    acceptNode(node) {
      // 遇到p标签直接拒绝，该标签及其所有子元素都会被跳过
      if (node.tagName === 'P') return NodeFilter.FILTER_REJECT;
      return NodeFilter.FILTER_ACCEPT;
    }
  }
);

// 收集所有符合要求的元素
const matchedElements = [];
let current = domWalker.nextNode();
while (current) {
  matchedElements.push(current);
  current = domWalker.nextNode();
}

方案2：使用querySelectorAll+ 父级校验（写法简洁，适合中小DOM结构） #

如果页面DOM节点数量不大，可以用更简洁的写法实现需求：

// 先选中页面所有元素，再做过滤
const allElements = Array.from(document.querySelectorAll('*'));
const matchedElements = allElements.filter(el => {
  // 排除p标签本身，同时排除所有父级存在p标签的元素
  return el.tagName !== 'P' && !el.closest('p');
});

适配爬取场景的补充说明 #

• 如果是在Node.js环境搭配jsdom等服务端DOM库使用，上述两种方法均可直接适配，不需要修改语法
• 若只需爬取页面部分区域的内容，把遍历根节点从document.body替换为对应区域的容器节点即可，能进一步提升执行效率

内容的提问来源于stack exchange，提问作者Goutham