如何使用 MutationObserver？

Question

我最近遇到了這個很棒的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 ）。 文檔中是否有我遺漏的內容，或者我只是誤解了觀察者功能。

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