MDN文档提供了一个普通而不完整的示例，并没有展示常见的陷阱。
Mutation summary库提供了一个用户友好的封装，但就像所有的封装一样，它增加了开销。
参见Performance of MutationObserver to detect nodes in entire DOM。
创建并启动观察器。
让我们使用递归的全局文档MutationObserver来报告所有添加/删除节点。
var observer = new MutationObserver(onMutation);
observer.observe(document, {
childList: true,
subtree: true,
});
简单列举添加的节点。
会减缓极大/复杂页面的加载速度，请参见性能。
有时会错过合并在父容器中的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;
}
}
}
为什么要使用两个丑陋的vanilla for循环？因为在某些浏览器中，forEach、filter和ES2015 for (val of array) 可能非常慢，请参见Performance of MutationObserver to detect nodes in entire DOM。
为什么要使用TreeWalker？为了保留附加到子元素的任何事件侦听器。仅更改Text节点：它们没有子节点，并且更改它们不会触发新的突变，因为我们已经使用了childList: true而不是characterData: true。
通过实时HTMLCollection处理相对较少的元素而不枚举突变。
因此，我们寻找一个应该很少使用的元素，例如H1标签或IFRAME等。在这种情况下，我们可以使用由getElementsByTagName自动更新返回的HTMLCollection来简化和加速观察程序回调。
const h1s = document.getElementsByTagName('h1');
function onMutation(mutations) {
if (mutations.length === 1) {
const added = mutations[0].addedNodes[0];
if (!added || (added.localName !== 'h1' && !added.firstElementChild)) {
return;
}
}
for (var i = 0, h1; (h1 = h1s[i]); i++) {
if (/foo/.test(h1.textContent)) {
replaceText(h1);
}
}
}
