MutationObserver 监控指定Dom的变化

MDN
详解

DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

使用

        // 选择需要观察变动的节点
        const targetNode = document.querySelector('#main')

        // 观察器的配置（需要观察什么变动）
        const config = { attributes: true, childList: true, subtree: true };

        // 当观察到变动时执行的回调函数
        const callback = function (mutationsList, observer) {
            console.log(mutationsList);
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    console.log('添加或删除了一个子节点.');
                }
                else if (mutation.type === 'attributes') {
                    console.log(mutation.attributeName + ' 属性被修改.');
                }
            }
        };

        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(callback);

        // 以上述配置开始观察目标节点
        observer.observe(targetNode, config);

        // 调用之后，可停止观察
        observer.disconnect();