MutationObserver 监视 DOM 树改变的api

1、介绍

MutationObserver是一个构造函数，可以用来监听某个节点的变化，当节点发生变化时，可以执行一些回调函数。
它不会立即执行，需要调用MutationObserver的observe方法，传入你想要监听的节点，以及一些配置，然后当节点发生变化时，就会执行你传入的回调函数。

2、基本使用

MutationObserver的构造函数的入参是数组
MutationObserver的observe函数，第一个参数是目标节点，第二个参数是 配置项
- childList：布尔值，默认为 false。设置为 true 时，表示观察目标节点的子节点列表的变化，包括添加或删除子节点。
- attributes：布尔值，默认为 false。设置为 true 时，表示观察目标节点的属性变化。
- characterData：布尔值，默认为 false。设置为 true 时，表示观察目标节点文本内容的变化。
- subtree：布尔值，默认为 false。设置为 true 时，表示观察目标节点以及其所有后代节点的变化。
- attributeFilter：数组，用于指定要观察的属性名。如果不设置此选项，则观察目标节点的所有属性变化。
- attributeOldValue：布尔值，默认为 false。如果设置为 true，则在回调函数的 MutationRecord 对象中包含被修改属性的旧值。
- characterDataOldValue：布尔值，默认为 false。如果设置为 true，则在回调函数的 MutationRecord 对象中包含被修改的文本节点的旧值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="target" style="height: 400px;">

  </div>
  <script>
    // MutationObserver 接口提供了监视对 DOM 树所做更改的能力。
    var target = document.getElementById('target');
    function observe() {

      var observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          console.log(mutation, mutation.type);
          // mutation 是一个对象，包含：变化类型、旧值、目标元素等信息
        });
      });
      observer.observe(target, {
        attributes: true, // 布尔值，默认为 false。设置为 true 时，表示观察目标节点的属性变化。
        childList: true, //布尔值，默认为 false。设置为 true 时，表示观察目标节点的子节点列表的变化，包括添加或删除子节点。
        characterData: true, // 布尔值，默认为 false。设置为 true 时，表示观察目标节点文本内容的变化
        subtree: true,// 布尔值，默认为 false。设置为 true 时，表示观察目标节点以及其所有后代节点的变化。
        attributeOldValue: true,// 布尔值，默认为 false。如果设置为 true，则在回调函数的 MutationRecord 对象中包含被修改属性的旧值。
      });
    }
    observe()


    setTimeout(() => {
      target.style.height = '100px'
      target.style.backgroundColor = 'red'
    }, 2000)
  </script>
</body>

</html>

3、使用场景

监听水印被删除
监听某个DOM被动态添加或删除
监听文本内容的变化
Vue 的 nextTick

举例水印被删除

在这里插入图片描述

  <script>
    // MutationObserver 接口提供了监视对 DOM 树所做更改的能力。
    // var target = document.getElementById('target');
    // function observe() {

    //   var observer = new MutationObserver((mutations) => {
    //     mutations.forEach((mutation) => {
    //       console.log(mutation, mutation.type);
    //       // mutation 是一个对象，包含：变化类型、旧值、目标元素等信息
    //     });
    //   });
    //   observer.observe(target, {
    //     attributes: true, // 布尔值，默认为 false。设置为 true 时，表示观察目标节点的属性变化。
    //     childList: true, //布尔值，默认为 false。设置为 true 时，表示观察目标节点的子节点列表的变化，包括添加或删除子节点。
    //     characterData: true, // 布尔值，默认为 false。设置为 true 时，表示观察目标节点文本内容的变化
    //     subtree: true,// 布尔值，默认为 false。设置为 true 时，表示观察目标节点以及其所有后代节点的变化。
    //     attributeOldValue: true,// 布尔值，默认为 false。如果设置为 true，则在回调函数的 MutationRecord 对象中包含被修改属性的旧值。
    //   });
    // }
    // observe()


    // setTimeout(() => {
    //   target.style.height = '100vh'
    //   target.style.backgroundColor = 'red'
    // }, 2000)

    // 调用
    __canvasWM({
      content: '呆呆狗'
    })

    // canvas 实现 watermark
    function __canvasWM({
      container = document.body,
      width = '200px',
      height = '150px',
      textAlign = 'center',
      textBaseline = 'middle',
      font = "20px microsoft yahei",
      fillStyle = 'rgba(184, 184, 184, 0.8)',
      content = '请勿外传',
      rotate = '30',
      zIndex = 1000
    } = {}) {
      var args = arguments[0];
      var canvas = document.createElement('canvas');

      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      var ctx = canvas.getContext("2d");

      ctx.textAlign = textAlign;
      ctx.textBaseline = textBaseline;
      ctx.font = font;
      ctx.fillStyle = fillStyle;
      ctx.rotate(Math.PI / 180 * rotate);
      ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

      var base64Url = canvas.toDataURL();
      const watermarkDiv = document.createElement("div");
      watermarkDiv.setAttribute('style', `
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          z-index:${zIndex};
          pointer-events:none;
          background-repeat:repeat;
          background-image:url('${base64Url}')`);
      watermarkDiv.id = "watermarkDiv"
      container.style.position = 'relative';
      container.insertBefore(watermarkDiv, container.firstChild);


    }
    let watermarkEl = document.querySelector('#watermarkDiv')
    var watermarkElObserver = new MutationObserver((mutations) => {
      console.log(mutations, '发生变化');
      mutations.forEach((mutation) => {
        // 方案1
        // if (!document.body.contains(document.querySelector('#watermarkDiv'))) {
        //   alert('水印被删除')
        // }
        // 方案2
        if (Array.from(mutation.removedNodes).includes(watermarkEl)) {
          alert('水印被删除')
        }
      });
    });

    // 如果目标元素是动态生成的或者它的父节点被替换，可能导致观察器无法正确识别目标元素的删除。你可以检查一下DOM结构是否发生了变化。
    watermarkElObserver.observe(document.body, {
      subtree: true,// 布尔值，默认为 false。设置为 true 时，表示观察目标节点以及其所有后代节点的变化。
      childList: true, //布尔值，默认为 false。设置为 true 时，表示观察目标节点的子节点列表的变化，包括添加或删除子节点。
      attributes: true,
    });
  </script>