MutationObserver 监听dom 变化api

最新推荐文章于 2022-08-14 10:59:15 发布
最新推荐文章于 2022-08-14 10:59:15 发布
阅读量162 收藏
点赞数
分类专栏： dom
原文链接：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="add()">add</button>
    <textarea id="app">
     
    </textarea>
    <script>
      // 选择需要观察变动的节点
      const targetNode = document.getElementById("app");

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

      function add() {
        let odiv = document.createElement("div");
        odiv.innerHTML = "my name odiv";
        targetNode.appendChild(odiv);
      }

      // 当观察到变动时执行的回调函数
      const callback = function (mutationsList, observer) {
        console.log(mutationsList, observer, "========");
        // 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." 
              ,targetNode.style.width,targetNode.style.height,mutation.target.style.value,
            );
          }
        }
      };

      // 创建一个观察器实例并传入回调函数
      const observer = new MutationObserver(callback);

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

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

参考链接:https://javascript.ruanyifeng.com/dom/mutationobserver.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>
      CodePen - Mutation Observer &amp; customize resize event listener &amp;
      demo
    </title>
  </head>

  <body translate="no">
    <!DOCTYPE html>
    <html lang="zh-Hans">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <meta name="author" content="xgqfrms" />
        <meta name="generator" content="VS code" />
        <title>
          Mutation Observer & customize resize event listener & demo
        </title>
        <style>
          ol {
            box-sizing: border-box;
            width: 110px;
            height: 110px;
            border: 1px solid red;
            padding: 10px;
            resize: both;
            overflow: auto;
          }
        </style>
      </head>

      <body>
        <section>
          <h1>Mutation Observer & customize resize event listener & demo</h1>
        </section>
        <section>
          <ol contenteditable oninput="">
            <li>Press enter</li>
          </ol>
        </section>
        <!-- js -->
        <script>
          const MutationObserver =
            window.MutationObserver ||
            window.WebKitMutationObserver ||
            window.MozMutationObserver;
          // target
          const list = document.querySelector(`ol`);
          // options
          const config = {
            attributes: true,
            childList: true,
            characterData: true,
            subtree: true,
          };
          // instance
          const observer = new MutationObserver(function (mutations) {
            // console.log(`mutations =`, mutations); // MutationRecord
            mutations.forEach(function (mutation) {
              // console.log("mutation =", mutation);
              if (mutation.type === "characterData") {
                // target & object === typeof(mutation.target)
                // console.log("A child node has been added OR removed.", mutation.target, typeof(mutation.target));
                // console.log("[...mutation.addedNodes].length", [...mutation.addedNodes].length);
                // console.log("[...mutation.removedNodes].length", [...mutation.removedNodes].length);
                // if (mutation.target && [...mutation.addedNodes].length) {
                //     // [...mutation.addedNodes].length
                //     console.log(`A child node ${mutation.target} has been added!`, mutation.target);
                // }
                // if (mutation.target && [...mutation.removedNodes].length) {
                //     // [...mutation.removedNodes].length
                //     console.log(`A child node ${mutation.target} has been removed!`, mutation.target);
                // }
              }
              if (mutation.type === "childList") {
                if (mutation.target && [...mutation.addedNodes].length) {
                  console.log(
                    `A child node ${mutation.target} has been added!`,
                    mutation.target
                  );
                }
                if (mutation.target && [...mutation.removedNodes].length) {
                  console.log(
                    `A child node ${mutation.target} has been removed!`,
                    mutation.target
                  );
                }
                // do somwthings
                let list_values = [];
                list_values = [].slice
                  .call(list.children)
                  .map(function (node) {
                    return node.innerHTML;
                  })
                  .filter(function (str) {
                    if (str === "<br>") {
                      return false;
                    } else {
                      return true;
                    }
                  });
                console.log(list_values);
              }
              if (mutation.type === "attributes") {
                console.log("mutation =", mutation);
                console.log(
                  `The \`${mutation.attributeName}\` attribute was modified.`
                );
                // console.log("list style =", list.style);
                let { width, height } = list.style;
                let style = {
                  width,
                  height,
                };
                console.log("style =\n", JSON.stringify(style, null, 4));
              }
            });
          });
          observer.observe(list, config);
          // 相关属性 dom
          // Later, you can stop observing
          // setTimeout(() => {
          //     observer.disconnect();
          // }, 1000 * 100);
          // bug ??? after disconnect
          // list.attributes;
          // list.setAttribute(`style`, `height: 212px; width: 213px;`);
          // list.setAttribute(`data-test`, `666`);
          // list.removeAttribute(`data-test`);
          // list.children;
          // list.childElementCount;
          // list.childNodes;
          // list.hasChildNodes();
          // list.firstElementChild;
          // list.firstChild;
          // list.removeChild(li);
          // list.removeChild(list.firstElementChild);
          // list.replaceChild(li, li);
          // list.replaceChild(list.firstElementChild, list.lastElementChild);
        </script>
      </body>
    </html>
  </body>
</html>
web修理工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端水印-canvas、MutationObserver
weixin_43760969的博客
10-17 357
前端水印 canvas添加水印 通过canvas生成base64图片，生成一个绝对定位的大小与body一样的div–waterDiv，将waterDiv的背景设置为canvas的base64图片，将waterDiv挂在到body下面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
MutationObserver 监听DOM变化
窝儿卡母Here~
06-28 2419
MutationObserver 监听DOM变化
监听dom变化-Mutation observers
weixin_42733155的博客
11-07 2235
一、背景 通常，为了响应某个变化而执行一段逻辑，我们可以将这段逻辑的调用，放在这个变化的入口或者出口。所谓入口，是指这个变化发生的源头，所谓出口，是指这个变化发生之后走的逻辑。 这么说可能比较抽象，举个例子，页面上有个输入框，用户可以输入数字，也可能是通过后端推送的websocket更改输入框的数字，我们要在数字变化的时候触发个逻辑。有两种选择，一是入口。因为改变数字的原因，我们全都知道，所以可以监听输入框的Input事件，在这个事件里面触发对应的逻辑，同时在websocket的回调里触发对应的逻辑，此
MutationObserver、IntersectionObserver、ResizeObserver
Jsoning的博客
03-09 2099
前言 阅读本文你可以获取到以下3个知识点 通过原生javascript的API 监听DOM元素的改变（文字、大小、背景等等） 监听DOM元素之间是否相交等信息 监听DOM元素大小改变，基本可以放弃全局监听window.rize了 动动小手，先点赞再观看???????????? MutationObserver MutationObserver 创建一个观察器，提供了对监视DOM树更改的能力，是DOM3 Even...
js监听页面元素变化window.MutationObserver
xiaoxu的博客
08-20 1万+
相信前端开发同学都熟悉各种各样的监听事件，比如元素点击事件onClick，鼠标事件onMouseDown、onMouseHover，键盘按键onKeyDown，浏览器窗口改变事件onResize等等。 那我们如何监听页面某个元素的属性变化呢？ window.MutationObserver（callback） 该接口用来观察节点变化，MutationObserver是一个构造器，接收一个回调函数c...
JavaScript监听一个DOM元素大小变化
11-21
在JavaScript开发中，有时我们需要...总之，监听DOM元素的尺寸变化是JavaScript开发中常见的需求，可以通过iframe、MutationObserver或其他技术手段来实现。在选择方案时，应综合考虑性能、兼容性和代码复杂性等因素。
angular监听dom加载完毕
01-09
创建一个观察者实例，监听DOM的变化，当DOM加载完成时，停止观察： ```typescript import { Component, OnInit, OnDestroy } from '@angular/core'; @Component({...}) export class YourComponent implements...
javascript dom api
06-28
- 监听DOM变化，当DOM结构发生改变时，可以触发回调函数。 这个.chm文件"jsdom.chm"应该包含了JavaScript DOM API的详细解释和示例，涵盖了以上所有知识点，是学习和查找DOM API的实用工具。通过深入学习和实践，...
JavaScript DOM API
09-17
通过创建一个观察者实例并配置要监听的变动类型，可以实现对DOM变化的监听。 总结，JavaScript DOM API是网页动态化的核心，通过这个API，开发者可以无限制地操作页面元素，实现交互、动画等各种效果。熟练掌握DOM ...
Dom.rar_DOM
09-23
10. **MutationObserver**：用于监听DOM变化的新API，可以高效地监控特定DOM节点的变化。 通过深入理解和熟练运用DOM，开发者可以构建出高度交互、动态的Web应用程序。DOM不仅适用于JavaScript，许多其他编程语言和...
一段观察者对象(MutationObserver)的使用
关灯吃面
08-14 1890
// ...   copyright.DOMLocation = function() {       var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;   // 兼容性ie11+、Safar6(需要-web
来一波原生的观察者模式 | MutationObserver
weixin_33939843的博客
04-05 421
MutationObserver Mutation Observer API 用来监视DOM变动。DOM的任何变动，比如节点的增删、属性的变动、文本内容的变化，这个API都可以得到通知。 首先这个API归属于微任务，也就是说是异步的，这样设计也是为了应付Dom变动频繁的特点，防止频繁变动占用js执行栈造成页面卡顿。比如说：如果不是异步当DOM变动触发观察者的回调函数执行，就会堵塞后续代码的执行；是...
前端水印生成方案(网页水印+图片水印)
JineD的博客
12-07 6832
参考链接 不能说的秘密——前端也能玩的图片隐写术 阮一峰-Mutation Observer API lucifer-基于KM水印的图片网页水印实现方案 damon-网页水印明水印前端SVG实现方案 前端水印生成方案 前段时间做某系统审核后台，出现了审核人员截图把内容外泄露的情况，虽然截图内容不是特别敏感，但是安全问题还是不能忽视。于是便在系统页面上面加上了水印，对于审核人员截图等敏感操作有一定的提示作用。 网页水印生成解决方案 通过canvas生成...
MutationObserver 监听 DOM 树变化
weixin_34281537的博客
01-08 356
MutationObserver 是用于代替 MutationEvents 作为观察 DOM 树结构发生变化时，做出相应处理的 API 。为什么要使用 MutationObserver 去代替 MutationEvents 呢，我们先了解一下 MutationEvents MutationEvents 它简单的用法如下： document...
MutationObserver对象
WindrunnerMax
08-14 456
MutationObserver (W3C DOM4)对象提供了监视对DOM树所做更改的能力，其被设计为旧的Mutation Events功能的替代品(该功能是DOM3 Events规范的一部分)。
html5 observer api,极其有用的DOM API——MutationObserver监听节点变化详解
weixin_29503445的博客
06-16 528
今天来介绍一个很有用的DOM API——MutationObserver使用背景页面或者某个父类DOM需要监听子节点的变化，来进行统一回调，这个变化包括了：特定属性名称的变化，例如class等属性的变化整个DOM树中子节点的变化MutationObserver介绍这里采用了MDN的官方介绍，MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Ev...
js实现监听dom元素的属性变化
热门推荐
D_bel的博客
07-24 2万+
通过MutationObserver来实现： MutationObserver可以用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知，也就是说DOM 发生变动就会触发回调函数，是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连...
你不知道的MutationObserver观察DOM树变动
liuhao9999的博客
11-19 843
MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。 构造函数 MutationObserver() 创建并返回一个新的MutationObserver它会在指定的DOM发生变化时被调用。 方法 disconnect() 阻止MutationObserver实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。 obse...
Mutation Observer API 监视 DOM 变动
1073960086的博客
05-08 376
Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。 项目使用示例： 使用场景： 监听$(#search-qywg.k-ext-treeview）dom元素的属性变化，同时可以获取到属性变化之前的旧值。满足一定条件，执行我们自定义的操作。 var observerQywg2 =...
js监听dom元素大小变化
最新发布
04-29
MutationObserver API 是浏览器提供的一种用于监听 DOM 变化的 API，它可以监听 DOM 元素的属性、子节点等变化，并在这些变化发生时触发回调函数。 使用 MutationObserver API 监听 DOM 元素大小变化的步骤如下： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值