15

我最近遇到了这个很棒MutationObserver的功能，它可以跟踪任何 dom 元素的变化。我使用了 Mozilla 开发人员网络上显示的代码，但似乎无法使其运行。这是我使用的代码（链接）：

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

4

3 回答 3

13

你需要subtree: true

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

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

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

于 2014-06-21T17:29:29.357 回答
0

简单示例：

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

于 2020-07-20T14:02:24.283 回答
0

观看文本或输入更改

利用

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

于 2021-02-02T10:11:48.873 回答