【JS 接口-MutationObserver】监听DOM变化前言有时候我们想要监听某个DOM的变化，可能第一时间想到

前言

有时候我们想要监听某个DOM的变化，可能第一时间想到的就是使用定时器轮询的方式，但这样往往比较笨逼。不过好在浏览器提供了MutationObserver这个API让我们可以在DOM被修改（或者说变化）的时候异步执行回调。

使用

<body>
    <button>新增元素</button>
    <div id="app">
    </div>
</body>

const btn = document.querySelector('button')
let index = 0

btn.addEventListener('click', () => {
    const p = document.createElement('p')
    p.textContent = `${index++}`
    document.body.appendChild(p)
})

const observer = new MutationObserver(recordList => {
    recordList.forEach(item => {
        item.addedNodes.forEach(node => {
            console.log(`${node.nodeName}：${node.textContent}`)
        })
    })
})

// 第一个参数为要观察的对象，第二个参数是可配置对象，比如监听属性的变化，监听子元素的变化
observer.observe(document.body, {childList: true})

可以看到，这个API确实很好的接听到了新增元素的变化

配置项

当然配置项还是特别丰富的，比如 target、type、oldValue、attributeName等等，网上一找都很多说明，这里就不一一列举了