如何使用突变观察者？

Posted 2023-02-19

【中文标题】如何使用突变观察者？

【英文标题】：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）。文档中是否缺少某些内容，或者我只是误解了观察者功能。

【参考方案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);

<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