如何使用突变观察者？答案

【问题标题】：How to use MutationObserver?如何使用突变观察者？
【发布时间】：2014-08-12 04:48:40
【问题描述】：

我最近遇到了这个很棒的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 修改相同的代码，一切似乎都可以正常工作（Demo here）。文档中是否缺少某些内容，或者我只是误解了观察者功能。

【问题讨论】：

标签： javascript mutation-observers

【解决方案1】：

你需要subtree: true

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

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

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

【讨论】：

感谢您的澄清。在开始提问之前，我应该做更多的研究。 :)
在原生 JavaScript 和 DOM API 变得更加强大的情况下，坚持使用 jQuery 等工具也是一个论据。底层 API 不会（而且 IMO 也不应该）隐藏这些类型的技术细节，因此额外的可用性抽象层会带来好处。

【解决方案2】：

简单示例：

<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/

【讨论】：

【解决方案3】：

观察文本或输入变化

使用

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);

&lt;div id="text" contenteditable="true"&gt;characterData:true&lt;/div&gt;

监视子级或附加文本或插入 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

【讨论】：