MutationObserver
是JS的API,可以用于观察文档中的 DOM 树变化,并在这些变化发生时执行特定的回调函数。
使用
// 选择需要观察变动的节点
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;
}
相关文献: