问题描述
我想监控完整的 HTML 是否有以下变化:
所以,我只想监视 DOM 中的文本更改。可能是因为添加了一些文本的新节点,可能是因为某个现有标签中的文本从 a
更改为 b
,或者可能是因为文本添加到了原本为空的标记<h1></h1> --> <h1>hello</h1>
我怎么能这样做?我尝试了 MutationObserver,但我发现它很混乱,我无法正确使用它。我想检测新添加的文本并通过转换函数对其进行转换。例如,
<span>apple</span>
已添加,它将被转换为:
const transformedText = transform("apple");
// update the text
<span>transformedText</span>
这是我尝试过的:
const config = {
attributes: false,childList: true,subtree: true,characterData: true,characterDataOldValue: true
};
const callback = function (mutationsList,observer) {
// Use Traditional 'for loops' for IE 11
const dict = transformDictionary();
for (const mutation of mutationsList) {
if (mutation.type === "childList") {
for (const node of mutation.addednodes) {
if (node.setAttribute) {
// TRANSFORM
}
}
if (mutation.target) {
// TRANSFORM
}
} else if (mutation.type === "characterDataOldValue") {
console.log(mutation);
} else if (mutation.type === "characterData") {
}
}
};
const o = new MutationObserver(callback).observe(document.body,config);
但是对于不是文本节点的节点,似乎有很多触发器。例如,也会收到一个节点的触发器,例如这个完整的 div
:
<div>
wow
<div>
ok
<p>
<span>hello</span>
</p>
</div>
</div>
我怎样才能做到这一点?
解决方法
"use strict";
const NOT_AVAILABLE = "NOT AVAILABLE";
let dictionary = new Map();
dictionary.set("apple","transformedAppleText");
dictionary.set("pickle","transformedPickleText");
dictionary.set("pumpkin","transformedPumpkinText");
const callback = function(mutationsList,observer) {
const transform = (node) => {
let transformedText = dictionary.get(node.textContent);
node.textContent = transformedText !== undefined ? transformedText : NOT_AVAILABLE;
};
for (let mutation of mutationsList) {
if (mutation.type === "childList") {
for (let node of mutation.addedNodes) {
// Thanks to:https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
if (node.nodeType === Node.TEXT_NODE) {
transform(node);
} else if (node.childNodes.length > 0) {
for (let childNode of node.childNodes) {
if (childNode.nodeType === Node.TEXT_NODE) {
transform(childNode);
}
}
}
}
}
}
// clear out any changes made during this function - prevents bouncing
observer.takeRecords();
};
const config = {
childList: true,subtree: true
};
const o = new MutationObserver(callback).observe(document.getElementById("main"),config);
// DOM updates for testing
const div = document.createElement("div");
document.body.appendChild(div);
const apple = document.createTextNode("apple");
const p = document.createElement("p");
p.id = "apple";
p.appendChild(apple);
document.getElementById("div").appendChild(p);
const orange = document.createTextNode("orange");
const p2 = document.createElement("p");
p2.appendChild(orange);
document.getElementById("div").appendChild(p2);
document.getElementById("span").textContent = "pumpkin";
setTimeout(() =>
document.getElementById("apple").textContent = "pickle",4000);
<main id="main">
<h1>Demo</h1>
<p>New line</p>
<div id="div">
<p>Some text</p>
<div>cat
<span id="span"></span>
</div>
</div>
</main>
.takeRecords
方法读取队列中的所有突变并返回它们。它还清空队列。我用它来丢弃由观察者中的代码更改文本引起的任何突变。 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/takeRecords