如何使用MutationObserver？

Question

我最近遇到了这个很棒的

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）。文档中是否遗漏了一些内容，或者我只是误解了观察者功能。

Answer 1

你需要

subtree: true

http://jsfiddle.net/6Jajs/1/

内部文本通常是 DOM 中的子 text() 元素。如果没有子树，它只会观察元素本身。

围绕“characterData”可能存在混淆（https://developer.mozilla.org/en-US/docs/Web/API/CharacterData），但这似乎仅适用于直接包含文本的节点。 DOM 的结构使得大多数标记元素包含混合类型，其中可以选择包含子文本节点（该子文本节点反过来将实现 characterData，但将是目标节点的子节点）。

Answer 2

观看文本或输入更改

使用

characterData: true

示例：

var target = document.querySelector('#text');

var observer = new MutationObserver(function(mutations) {
  
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

var config = {
 
  characterData: true,
        subtree: true,

};

observer.observe(target, config);

// otherwise
observer.disconnect();
observer.observe(target, config);

<div id="text" contenteditable="true">characterData:true</div>

观看子项或附加文本或插入 Dom

childList:true

示例：

var target = document.querySelector('#text');

var observer = new MutationObserver(function(mutations) {
  
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

var config = {

  childList: true,
      subtree: true,
      };

observer.observe(target, config);

// otherwise
observer.disconnect();
observer.observe(target, config);

<div id="text" contenteditable="true">characterData:true</div>

<button onclick="testappend();
function testappend(){
document.getElementById('text').append('tesxt')
}">append</button>

查看 dom 属性

   attributes: true

示例

var target = document.querySelector('#text');

var observer = new MutationObserver(function(mutations) {
  
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

var config = {
 
  characterData: true,
   attributes: true,
 
};

observer.observe(target, config);

// otherwise
observer.disconnect();
observer.observe(target, config);

<div id="text" contenteditable="true">characterData:true</div>

<button onclick="testappend();
function testappend(){
document.getElementById('text').classList.add('tesxt')
}">add class</button>

<button onclick="setat();
function setat(){
document.getElementById('text').setAttribute('data-prop','text')
}">set attribute</button>

attribute old value

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributeOldValue

Answer 3

简单示例：

<div contentEditable id="myID">MUST EDIT NOW</div>
<script>
let x = new MutationObserver(   function(){ alert('DETECTED'); }   );
x.observe( myID , {subtree:true,characterData:true} );
</script>

查看实时示例：https://jsfiddle.net/mbo9eLt5/