我最近遇到了这个很棒的 MutationObserver 功能，它可以跟踪任何 dom 元素的变化。我使用了 mozilla 开发者网络上显示的代码，但似乎无法运行。这是我使用的代码 ( link ):
// create an observer instance
var target = document.querySelector('#something');
console.log(target);
var observer = new WebKitMutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log("Success");
//$('#log').text('input text changed: "' + target.text() + '"');
//console.log(mutation, mutation.type);
});
});
observer.observe(target, { attributes: true, childList: true, characterData: true });
//observer.disconnect(); - to stop observing
// test case
setInterval(function(){
document.querySelector('#something').innerHTML = Math.random();
},1000);
上面的代码似乎不起作用。但是，如果我用一些 jQuery 修改相同的代码，一切似乎都工作得很好(演示 here)。文档中是否缺少某些内容，或者我只是误解了观察者功能。
最佳答案
你需要subtree: true
内部文本通常是 DOM 中的子 text() 元素。如果没有子树，它只会监视元素本身。
围绕“characterData”(https://developer.mozilla.org/en-US/docs/Web/API/CharacterData)可能存在混淆，但这似乎仅适用于直接包含文本的节点。 DOM 的结构使得大多数标记元素包含混合类型，可以选择包含子文本节点(这反过来将实现 characterData，但将是目标节点的子节点)。
关于javascript - 如何使用 MutationObserver？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24344022/