MutationObserver 可以监听dom的变化，插入，移除等
image.png

初始化MutationObserver

构造函数

MutationObserver 构造函数的语法为：

  1. const observer = new MutationObserver(callback);

相关的参数说明如下：

  • callback：一个回调函数，每当被指定的节点或子树有发生 DOM 变动时会被调用。该回调函数包含两个参数：一个是描述所有被触发改动的 MutationRecord 对象数组，另一个是调用该函数的 MutationObserver 对象。

    1. const mutationObserver = new MutationObserver(function(mutationRecords, observe){
    2. mutationRecord.forEach(mutation => {
    3.   console.log(mutation);
    4. });
    5. });

    方法

  • disconnect()：阻止 MutationObserver 实例继续接收通知，除非再次调用其 observe() 方法，否则该观察者对象包含的回调函数都不会再被调用。

  • observe(target[, options])：该方法用来启动监听，它接受两个参数。第一个参数，用于指定所要观察的 DOM 节点。第二个参数，是一个配置对象，用于指定所要观察的特定变动。
  • takeRecords()：返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表，使变更队列保持为空。此方法最常见的使用场景是 在断开观察者之前立即获取所有未处理的更改记录，以便在停止观察者时可以处理任何未处理的更改。
  1. const editor = document.querySelector('#editor');
  3. const options = {
  4.   childList: true, // 监视node直接子节点的变动
  5.   subtree: true, // 监视node所有后代的变动
  6.   attributes: true, // 监视node属性的变动
  7.   characterData: true, // 监视指定目标节点或子节点树中节点所包含的字符数据的变化。
  8.   attributeOldValue: true // 记录任何有改动的属性的旧值
  9. };
  11. observer.observe(article, options);

MutationRecord 对象

DOM 每次发生变化，就会生成一条变动记录，即 MutationRecord 实例。该实例包含了与变动相关的所有信息。Mutation Observer 对象处理的就是一个个 MutationRecord 实例所组成的数组。
MutationRecord 实例包含了变动相关的信息，含有以下属性：

  • type：变动的类型，值可以是 attributes、characterData 或 childList；
  • target：发生变动的 DOM 节点；
  • addedNodes：返回新增的 DOM 节点，如果没有节点被添加，则返回一个空的 NodeList；
  • removedNodes：返回移除的 DOM 节点，如果没有节点被移除，则返回一个空的 NodeList；
  • previousSibling：返回被添加或移除的节点之前的兄弟节点，如果没有则返回 null；
  • nextSibling：返回被添加或移除的节点之后的兄弟节点，如果没有则返回 null；
  • attributeName：返回被修改的属性的属性名，如果设置了 attributeFilter，则只返回预先指定的属性；
  • attributeNamespace：返回被修改属性的命名空间；

  • oldValue：变动前的值。这个属性只对 attribute 和 characterData 变动有效，如果发生 childList 变动，则返回 null。

    MutationObserver 使用示例

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>DOM 变动观察器示例</title>
    7.   <style>
    8.     .editor {border: 1px dashed grey; width: 400px; height: 300px;}
    9.   </style>
    10. </head>
    11. <body>
    12.   <h3>阿宝哥：DOM 变动观察器（Mutation observer）</h3>
    13.   <div contenteditable id="container" class="editor">大家好，我是阿宝哥！</div>
    15.   <script>
    16.     const containerEle = document.querySelector("#container");
    18.     let observer = new MutationObserver((mutationRecords) => {
    19.       console.log(mutationRecords); // 输出变动记录
    20.     });
    22.     observer.observe(containerEle, {
    23.       subtree: true, // 监视node所有后代的变动
    24.       characterDataOldValue: true, // 记录任何有变动的属性的旧值
    25.     });
    26.   </script>
    27. </body>
    28. </html>