MutationObserver 浏览器dom操作监听

最新推荐文章于 2024-05-27 17:51:58 发布

阿豪boy

最新推荐文章于 2024-05-27 17:51:58 发布

阅读量197

点赞数

文章标签： java dom vue jquery javascript

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064909

版权

原文链接: MutationObserver 浏览器dom操作监听

上一篇: 使用GitHub gist 写博客

下一篇: win10使用自带的Hyper-V安装win7虚拟机

参考

https://segmentfault.com/a/1190000023707760

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationRecord

https://juejin.im/post/6844904167618641927

要干掉也可以, 利用插件直接干掉这个api就行了

删不掉的dom

<!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>
      <span>hello</span>
    </div>
    <script>
      const targetNode = document.body;
      // 观察器的配置（需要观察什么变动）
      const config = {
        attributes: true,
        childList: true,
        characterData: true,
        subtree: true,
        attributes: true,
        childList: true,
        subtree: true,
        attributeOldValue: true,
      };

      // 当观察到变动时执行的回调函数
      const callback = function (mutationsList, observer) {
        console.log("mutationsList", observer === observer$, mutationsList);
        // Use traditional 'for loops' for IE 11
        for (let mutation of mutationsList) {
          if (mutation.type === "childList") {
            const removedNodes = mutation["removedNodes"] || [];
            for (const i of removedNodes) {
              console.log("i", i);
              const target = mutation["target"];
              target.appendChild(i);
            }
            console.log("A child node has been added or removed.");
          } else if (mutation.type === "attributes") {
            console.log(
              "The " + mutation.attributeName + " attribute was modified."
            );
          }
        }
      };
      // 创建一个观察器实例并传入回调函数
      const observer$ = new MutationObserver(callback);
      // 以上述配置开始观察目标节点
      observer$.observe(targetNode, config);

      // 之后，可停止观察
      //   observer$.disconnect();
    </script>
  </body>
</html>

主要用于监听dom的操作记录, 生成一组record

每个不同的操作都有不同的type, 不同的type中的属性也不一样

主要用途:

1, 可以用于监听dom的修改, 比如当你删除一个节点的时候, 把这个节点重新加进去, 达到删不掉的效果

2, 同步... 应该是最简单的dom同步方案了, 对于A页面的所有操作, 通过监听dom的变化. 传到B页面直接执行

3, vdom的diff, 主要是worker中跑diff算法时用, 可能吧....

一些可选参数

当调用 observe() 方法时，childList，attributes 或者 characterData 三个属性之中，至少有一个必须为 true，否则会抛出 TypeError 异常。

attributeFilter 可选
要监视的特定属性名称的数组。如果未包含此属性，则对所有属性的更改都会触发变动通知。无默认值。
attributeOldValue 可选
当监视节点的属性改动时，将此属性设为 true 将记录任何有改动的属性的上一个值。有关观察属性更改和值记录的详细信息，详见Monitoring attribute values in MutationObserver。无默认值。
attributes 可选
设为 true 以观察受监视元素的属性值变更。默认值为 false。
characterData 可选
设为 true 以监视指定目标节点或子节点树中节点所包含的字符数据的变化。无默认值。
characterDataOldValue 可选
设为 true 以在文本在受监视节点上发生更改时记录节点文本的先前值。详情及例子，请查看 Monitoring text content changes in MutationObserver。无默认值。
childList 可选
设为 true 以监视目标节点（如果 subtree 为 true，则包含子孙节点）添加或删除新的子节点。默认值为 false。
subtree 可选
设为 true 以将监视范围扩展至目标节点整个节点树中的所有节点。MutationObserverInit 的其他值也会作用于此子树下的所有节点，而不仅仅只作用于目标节点。默认值为 false。

<!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="box">
      <span>hello</span>
    </div>
    <button onclick="add()">add</button>
    <script>
      const targetNode = document.getElementById("box");
      function add() {
        const span = document.createElement("span");
        span.innerText = "add" + +new Date();
        targetNode.appendChild(span);

        targetNode.setAttribute("a", "a");
      }

      // 选择需要观察变动的节点
      //   const targetNode = document.body;

      // 观察器的配置（需要观察什么变动）
      const config = {
        attributes: true,
        childList: true,
        characterData: true,
        subtree: true,
        attributes: true,
        childList: true,
        subtree: true,
        attributeOldValue: true,
      };

      // 当观察到变动时执行的回调函数
      const callback = function (mutationsList, observer) {
        console.log("mutationsList", observer === observer$, mutationsList);
        // Use traditional 'for loops' for IE 11
        for (let mutation of mutationsList) {
          if (mutation.type === "childList") {
            console.log("A child node has been added or removed.");
          } else if (mutation.type === "attributes") {
            console.log(
              "The " + mutation.attributeName + " attribute was modified."
            );
          }
        }
      };
      // 创建一个观察器实例并传入回调函数
      const observer$ = new MutationObserver(callback);

      // 以上述配置开始观察目标节点
      observer$.observe(targetNode, config);

      // 之后，可停止观察
      //   observer$.disconnect();
    </script>
  </body>
</html>