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
循环?因为forEach
andfilter
和 ES2015for (val of array)
在某些浏览器中可能非常慢,请参阅Performance of 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);
}
}
}