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
})