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修改相同的代码，一切似乎都很好（Demo 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

简单示例：

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

Answer 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

如何使用MutationObserver？

3 个答案: