MDN 上的文档有一个通用的不完整示例，没有展示常见的陷阱。 变异摘要库提供了一个人性化的包装器，但与所有包装器一样，它增加了开销。请参阅MutationObserver 的性能以检测整个 DOM 中的节点。

创建并启动观察者。

让我们使用递归文档范围的 MutationObserver 来报告所有添加/删除的节点。

var observer = new MutationObserver(onMutation);
observer.observe(document, {
  childList: true, // report added/removed nodes
  subtree: true,   // observe any descendant elements
});

添加节点的简单枚举。

减慢极大/复杂页面的加载速度，请参阅性能。
有时会错过在父容器中合并的 H1 元素，请参阅下一节。

function onMutation(mutations) {
  mutations.forEach(mutation, m => {
    [...m.addedNodes]
      .filter(node =>
        node.localName === 'h1' && /foo/.test(node.textContent))
      .forEach(h1 => {
        h1.innerHTML = h1.innerHTML.replace(/foo/, 'bar');
      });
  });
}

添加节点的有效枚举。

现在是困难的部分。在加载页面时，突变记录中的节点可能是容器（就像整个站点标题块，其所有元素都报告为一个添加的节点）：规范不要求单独列出每个添加的节点，因此我们必须使用querySelectorAll（非常慢）或getElementsByTagName（非常快）查看每个元素的内部。

function onMutation(mutations) {
  for (var i = 0, len = mutations.length; i < len; i++) {
    var added = mutations[i].addedNodes;
    for (var j = 0, node; (node = added[j]); j++) {
      if (node.localName === 'h1') {
        if (/foo/.test(node.textContent)) {
          replaceText(node);
        }
      } else if (node.firstElementChild) {
        for (const h1 of node.getElementsByTagName('h1')) {
          if (/foo/.test(h1.textContent)) {
            replaceText(h1);
          }
        }
      }
    }
  }
}

function replaceText(el) {
  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
  for (let node; (node = walker.nextNode());) {
    const text = node.nodeValue;
    const newText = text.replace(/foo/, 'bar');
    if (text !== newText) {
      node.nodeValue = newText;
    }
  }
}

为什么有两个丑陋的香草for循环？因为forEachandfilter和 ES2015for (val of array)在某些浏览器中可能会很慢，请参阅MutationObserver 的性能以检测整个 DOM 中的节点。

为什么是树行者？保留附加到子元素的任何事件侦听器。仅更改Text节点：它们没有子节点，并且更改它们不会触发新的突变，因为我们使用了childList: true，而不是characterData: true。

通过实时 HTMLCollection 处理相对稀有的元素，而无需枚举突变。

因此，我们寻找应该很少使用的元素，如 H1 标签或 IFRAME 等。在这种情况下，我们可以使用 getElementsByTagName 返回的自动更新的 HTMLCollection 来简化和加速观察者回调。

const h1s = document.getElementsByTagName('h1');

function onMutation(mutations) {
  if (mutations.length === 1) {
    // optimize the most frequent scenario: one element is added/removed
    const added = mutations[0].addedNodes[0];
    if (!added || (added.localName !== 'h1' && !added.firstElementChild)) {
      // so nothing was added or non-H1 with no child elements
      return;
    }
  }
  // H1 is supposed to be used rarely so there'll be just a few elements
  for (var i = 0, h1; (h1 = h1s[i]); i++) {
    if (/foo/.test(h1.textContent)) {
      // reusing replaceText from the above fragment of code 
      replaceText(h1);
    }
  }
}

我以 A/B 测试为生，我经常使用 MutationObservers，结果很好，但更多时候我只是做长轮询，这实际上是大多数 3rd 方平台在使用他们的 WYSIWYG（或有时甚至他们的代码编辑器）。50 毫秒的循环不应减慢页面速度或导致 FOUC。

我通常使用一个简单的模式，如：

var poller = setInterval(function(){
  if(document.querySelector('#question-header') !== null) {
    clearInterval(poller);

    //Do something
  }
}, 50);

您可以使用 sizzle 选择器获取任何 DOM 元素，就像在 jQuery 中使用 document.querySelector 一样，这有时是您唯一需要库的东西。

事实上，我们在我的工作中经常这样做，我们有一个构建过程和一个module库，其中包括一个名为When的函数，它完全符合您的要求。这个特定的函数会检查 jQuery 和元素，但是修改库而不依赖于 jQuery 是微不足道的（我们依赖 jQuery，因为它在我们客户的大多数站点上，我们将它用于很多东西）。

说到第 3 方测试平台和 javascript 库，根据实施情况，许多平台（如 Optimizely、Qubit 和我认为 Monetate）捆绑了一个 jQuery 版本（有时被精简），在执行代码时立即可用，因此如果您使用的是 3rd 方平台，则需要研究一下。