浏览器 - 监听 DOM 的修改 (advanced)

2019-11-26

描述

返回 MutationObserver 创建的对象，当指定的元素发生每一次变化时，都会运行提供的回调函数。

提示

• 使用 MutationObserver 观察给定元素的变化
• 使用 Array.prototype.forEach() 为每一次被检测到的变化执行回调
• 第三个参数 options 的各项值都设置为 true，其具体说明可参见 MutationObserverInit

代码

const observeMutations = (element, callback, options) => {
  const observer = new MutationObserver(mutations => mutations.forEach(m => callback(m)));
  observer.observe(
    element,
    Object.assign(
      {
        childList: true,
        attributes: true,
        attributeOldValue: true,
        characterData: true,
        characterDataOldValue: true,
        subtree: true
      },
      options
    )
  );
  return observer;
};

示例

打印发生在页面中的所有变化：

const obs = observeMutations(document, console.log); 
obs.disconnect(); // 断开监听，不再打印页面中的变化

返回总目录

每天 30 秒系列之 JavaScript 代码