使用

// 选择需要观察变动的节点
const targetNode = document.getElementById("some-id");
// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };
// 当观察到变动时执行的回调函数
const callback = function (mutations, observer) {mutations.forEach(function(mutation) {console.log('元素发生了变化！');console.log('变化类型：', mutation.type);console.log('变化的节点：', mutation.target);console.log('新的子节点：', mutation.addedNodes);console.log('被移除的节点：', mutation.removedNodes);});
}const Observer = new ElObserver;// 方式一：
Observer.setTargetEle(targetNode);
Observer.setOptions(config);
Observer.listen(callback); // 开始观察目标节点// 方式二(链式调用)：
Observer.setTargetEle(targetNode).setOptions(config).listen(callback);// 停止观察
Observer.stop();

封装ElObserver类

export class ElObserver {private _obTargetEl?:obServeTarget|null;private _obServer?:obServe;private _obServerConfig:obServeOptions = {attributes: true,      // 监视属性的更改childList: true,       // 监视子元素的增加/删除subtree: true,         // 监视所有的后代节点attributeOldValue: true // 将旧值传递给回调函数};setOptions(config:obServeOptions){Object.assign(this._obServerConfig, config);return this;}setTargetEle(el:string|obServeTarget){if (typeof el === "string"){this._obTargetEl = document.querySelector(el) || null;}else{this._obTargetEl = el || null;}return this;}listen(callback?: obServeCallback){this._obServer = new MutationObserver(function (mutations, observer) {if(callback)callback(mutations, observer);});if (this._obTargetEl){this._obServer.observe(this._obTargetEl, this._obServerConfig);}}stop(){if (this._obServer){this._obServer.disconnect();}}
}export default new ElObserver()

TS声明

declare interface obServeTarget extends HTMLElement {}declare interface obServe extends MutationObserver {}
declare interface obServeOptions extends MutationObserverInit {}declare interface obServeCallback extends MutationCallback {(mutations: MutationRecord[], observer: MutationObserver): void;
}