MutationObserver 監聽DOM對象的變化

MutationObserver 可以通過監聽DOM對象的子節點的變化（childList）、屬性的變化（attributes）和後代節點的變化（subtree），當以上內容發生改變時觸發回調函數。

實例化 MutationObserver

const observer = new MutationObserver(callback)

創建監聽 observe

observer.onserve(ele,{
	childList: true, // 子節點的變化
	attributes: true, // 屬性的變化
	subtree: true, // 後代節點的變化
})

取消監聽

observer.disconnect()

實例

<ul id="container"></ul>
<button id="btn">點擊</button>

const ul = document.getElementById("container")
let count = 0
document.getElementById('btn').onclick = () => {
    count++;
    const li = document.createElement('li');
    li.innerHTML = count;
    ul.appendChild(li)
}

const observer = new MutationObserver((e) => {
    console.log('發生改變',e)
})

observer.observe(ul, {
    attributes: true,
    childList: true,
    subtree: true
})