JavaScript如何获取动态插入的DOM元素（类似AdBlock逻辑）

要实现类似AdBlock的动态元素捕获能力，优先使用浏览器原生MutationObserver API，这也是目前广告拦截类工具的通用实现方案，性能远高于定时轮询。

方案1：MutationObserver 事件监听（推荐） #

• 核心逻辑：向浏览器注册DOM变动监听器，当监听范围内出现节点新增、删除等变动时，会立刻触发回调，不需要定时遍历DOM，没有多余性能开销。
• 完整实现代码：

// 用WeakSet存储已处理过的元素，避免重复逻辑触发，不影响垃圾回收
const handledSet = new WeakSet();

const domObserver = new MutationObserver((mutationList) => {
  for (const mutation of mutationList) {
    // 只处理新增的节点
    for (const node of mutation.addedNodes) {
      // 过滤非元素节点（文本、注释等节点直接跳过）
      if (node.nodeType !== Node.ELEMENT_NODE) continue;
      if (handledSet.has(node)) continue;

      // 此处写自定义匹配逻辑，示例为匹配span标签
      if (node.tagName === 'SPAN') {
        // 匹配到目标元素后的处理逻辑，比如AdBlock的屏蔽逻辑直接调用 node.remove()
        console.log('捕获到新增span元素:', node);
      }
      // 若新增节点内部包含目标子元素，递归查询处理
      const innerTarget = node.querySelectorAll('span');
      innerTarget.forEach(el => {
        if (!handledSet.has(el)) {
          console.log('捕获到新增节点内部的span元素:', el);
          handledSet.add(el);
        }
      })

      handledSet.add(node);
    }
  }
})

// 启动监听：监听整个body下所有层级的节点新增
domObserver.observe(document.body, {
  childList: true,
  subtree: true, // 开启后代节点递归监听
  attributes: false, // 不需要监听属性变动时关闭，降低性能消耗
  characterData: false // 不需要监听文本变动时关闭
})

// 验证用的动态插入逻辑
// 注意：原示例代码存在逻辑问题：同一个DOM节点反复append只会移动位置，不会生成多个新节点
// 要生成多个独立元素，必须在定时器内部重新创建节点
setInterval(() => {
  const newSpan = document.createElement('span');
  newSpan.textContent = `动态插入span_${Date.now()}`;
  document.body.append(newSpan);
}, 1000)

方案2：定时轮询（仅兼容老旧环境使用，不推荐） #

如果需要兼容极老旧、不支持MutationObserver的浏览器，可以用全量DOM查询+差量对比的方式实现，但性能较差：

// 缓存上一次查询到的元素集合
let cachedElements = new Set();

setInterval(() => {
  const allSpans = document.querySelectorAll('span');
  allSpans.forEach(span => {
    if (!cachedElements.has(span)) {
      console.log('轮询捕获到新增span:', span);
      cachedElements.add(span);
    }
  })
}, 100)

• 缺点：轮询间隔过短会持续占用主线程资源，间隔过长会出现捕获延迟；页面DOM节点数量大时，全量查询的开销会明显升高。

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