MutationObserver

MutationObserver childList行為觀察

by sj82516

HTML

<ul id="observer-list">
<li id="child_1" class="oberserver-list__item">hello</li>
<li class="oberserver-list__item">mutation oberser</li>
</ul>

CSS

.highlight{
    color: red;
}

JavaScript

/*
creator : YJ Cheng
*/

const target = document.querySelector('#observer-list');

let observer1 = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(
    "屬性：",mutation.type, 
    "新增的節點：",mutation.addedNodes,
    "刪除的節點：",mutation.removedNodes);
  });
});

setTimeout(()=>{
	observer1.observe(target, {
    	childList: true,
        subtree: true
    });
    target.removeChild(document.getElementById("child_1"))
}, 1000)

setTimeout(()=>{
	observer1.observe(target, {
    	childList: true,
        subtree: true
    });
    // w3c 範例
    var node = document.createElement("LI");
    var textnode = document.createTextNode("Water");
    node.appendChild(textnode);
    target.appendChild(node);
}, 2000)