MutationObserver 元素节点变化监控API

//监听的dom元素
let targetNode = document.querySelector(`#id`);

// 监听的配置，也就是要监听哪些东西
let config = {
    attributes: true,
    childList: true,
    subtree: true
};

// dom变化之后的回调函数
const mutationCallback = (mutationsList) => {
    for(let mutation of mutationsList) {
        let type = mutation.type;
        switch (type) {
            case "childList":
                console.log("A child node has been added or removed.");
                break;
            case "attributes":
                console.log(`The ${mutation.attributeName} attribute was modified.`);
                break;
            case "subtree":
                console.log(`The subtree was modified.`);
                break;
            default:
                break;
        }
    }
};
// 创建一个链接到回调函数的观察者实例
let observer = new MutationObserver(mutationCallback);
// 然后监听DOM 元素
observer.observe(targetNode, config);
// 销毁本次监听
observer.disconnect();