Skip to content

DOM 监测

如何定义DOM监测

  • 新加 DOM
  • DOM 属性变更
  • 移除 DOM

通常有两种方式,早期使用 DOM 事件监听节点的变化,目前已不再推荐。当前推荐使用MutationObserver

一、DOM 事件

事件作用注意事项
DOMNodeInsertedIntoDocument用于检测节点的插入当 Node 被插入到 Document 时,才会触发此事件
DOMNodeInserted用于检测节点的插入当 Node 被插入到 Document 或非 Document 时,都会被触发
DOMNodeRemovedFromDocument用于检测节点的移除当 Node 从 Document 移除时,才会触发此事件
DOMNodeRemoved用于检测节点的移除当 Node 从 Document 或非 Document 时移除时,才会触发此事件
DOMAttributeModified用于检测 DOM 属性变化
DOMCharacterDataModified检测 DOM 节点的文本变化
DOMSubtreeModified用于代替(DOMAttributeModified、DOMCharacterDataModified、DOMNodeInserted、DOMNodeInsertedIntoDocument、DOMNodeRemoved 和 DOMNodeRemovedFromDocument)IE9 环境存在 BUG,当 Node 第一时间被插入时,不会立即触发此事件

这里的非Document指的是,节点不在 DOM 树上的场景。如节点存放与内存中,Code 演示

二、MutationObserver

MutationObserver提供了一种监控自身节点以及子节点变化的能力,包括新增、移除、属性变化。示例:

js
const callback = (mutationRecords) => {};
const observer = new MutationObserver(callback);

const targetNode = document.querySelector("#node");
const option = {
  subtree: false,
  childList: false,
  attributes: true,
  attributeFilter: undefined,
  attributeOldValue: false,
  characterData: false,
  characterDataOldValue: false,
};
observer.observe(targetNode, option);
配置默认值说明
subtreefalse监听目标节点的所有后代节点
childListfalse监听目标节点的新增、移除子节点的行为
attributesfalse监听目标节点的属性的变化
attributeFilterundefined当值为数组时,仅检测指定的属性的值的变化。
attributeOldValuefalse是否记录属性的旧值
characterDatafalse是否监控文本节点的变化
characterDataOldValuefalse是否记录文本节点的旧值

三、参考

Released under the MIT License.