前情

一直以来都没有好的方式可以监听元素变化，Mutation events虽然可以监听DOM树结构变化，但是因性能问题和差的兼容问题（Webkit内核不支持）并不推荐使用。

MutationObserver介绍

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分，兼容IE11+

调用方式：

// 创建一个观察器实例并传入回调函数，它会在指定的DOM发生变化时被调用回调函数

const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点

observer.observe(element, config);

observer实例方法：

disconnect 阻止MutationObserver实例继续接收通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用
observe 启动监听，observe(target, config)：
target：要监听的元素，config：监听配置，指定监听哪些变化
takeRecords 从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到MutationRecord对象的新Array中

MutationObserver监听配置，observe的第二个参数：

属性 说明
attributes 设为 true 以观察受监视元素的属性值变更，默认值false
attributeFilter 要监视的特定属性名称的数组。如果未包含此属性，则对所有属性的更改都会触发变动通知
characterData 设为 true ，以监视指定目标节点或子节点树中节点所包含的字符数据的变化
childList 设为 true ，以监视目标节点及其子节点，默认值为 false
subtree 设为 true，以监视目标节点及其子孙节点，默认值为 false

使用示例

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

    <style>

        *{

          padding: 0;

          margin: 0;

        }

        .item{

          width: 100%;

          min-height: 40px;

          overflow: hidden;

          resize: both;

          margin-bottom: 5px;

          color: #fff;

          background-color: red;

        }

    </style>

</head>

<body>

    <div class="test">

      <div class="item">item0</div>

      <div class="item item-input" contentEditable></div>

      <p>拖动右下角resize手柄或者输入文本，都能监听到变化</p>

    </div>

    <script>

        window.onload = function() {

          // Firefox和Chrome早期版本中带有前缀

          var MutationObserver = window.MutationObserver|| window.WebKitMutationObserver || window.MozMutationObserver

          // 选择目标节点

          var target = document.querySelector('.test');

          // 创建观察者对象

          var observer = new MutationObserver(function(mutations) {

            console.log('--observer test--');

          });

          // 配置观察选项:

          var config = {

            childList: true,

            attributes: true,

            characterData: true,

            subtree: true

          }

          // 传入目标节点和观察选项

          observer.observe(target, config);

          var input = document.querySelector('.item-input');

          input.innerHTML = '123654';

        }

    </script>

</body>

</html>

演示地址：https://jsbin.com/nakobuv/edit?html,css,js,console,output

前端好用API之MutationObserver的更多相关文章

  1. 前端调用百度API

    <!DOCTYPE html> <html> <head>         <meta charset="UTF-8">       ...

  2. 那些前端二进制操作API

    一直以来,前端的工作主要涉及的是字符串操作,而对二进制的数据接触较少.但是这种需求却一直存在着,尤其是HTML5之后,随着web应用越来越复杂,File,Blob,TypedArray这些API的出现 ...

  3. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_02-我的课程-前端页面与Api说明

    我的课程列表使用element 的card组件,如下: 前端页面代码 点击新增到了一个新增课程的页面 新增课程的界面 下面的card是循环遍历的代码 写死的card的静态数据 请求服务端的接口拿到数据 ...

  4. 前端好用API之getBoundingClientRect

    前情 在前端开发需求中,经常需要获取元素的尺寸位置相关的属性,以往的做法是调用不同api获取相关属性的. getBoundingClientRect介绍 getBoundingClientRect() ...

  5. 前端好用API之Fullscreen

    前情 在前端开发需求中,特别网页有视频需求时,需要做视频全屏功能,或者在某些可视化大屏项目也要做全屏. Fullscreen介绍 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占 ...

  6. 前后端分离开发之前端自己的API（DB）---- （1）

    Creating demo APIs for Front-End Developer 心理准备 Tool-1 开发工具/编辑器:Visual Studio Code , 即 VSCode官网: htt ...

  7. 总结一下公司项目使用各种较新的前端技术和 Api 的一些经验。

    关于 ES6: 需要注意 ES6 的一些特性和 API 是需要一个 200k 的 Polyfill 才能得到支持的,特性如 for ... of 循环,generator,API 如 Object.a ...

  8. JavaScript前端最全API集锦

    一.节点1.1 节点属性Node.nodeName   //返回节点名称,只读Node.nodeType   //返回节点类型的常数值,只读Node.nodeValue  //返回Text或Comme ...

  9. ABP .Net Core API和Angular前端APP集成部署

    前言:在ABP官网(https://aspnetboilerplate.com)生成的.Net Core + Angular项目前后端是两个独立的项目,我们可以分开部署,也可以将前端和Web API一 ...

  10. 前端API层架构，也许你做得还不够

    上午好,今天为大家分享下个人对于前端API层架构的一点经验和看法.架构设计是一条永远走不完的路,没有最好,只有更好.这个道理适用于软件设计的各个场景,前端API层的设计也不例外,如果您觉得在调用接口时 ...

随机推荐

  1. SpringBoot——更换Tomcat服务器为 Jetty 服务器

    Jetty服务器(可能会用到) Jetty 比 Tomcat更轻量级,可拓展性更强(相较于Tomcat),谷歌应用引擎(GAE)已经全面切换为Jetty 首先要启动Jetty服务器  -->  ...

  2. MyBatis——简介

    MyBatis MyBatis 是一款优秀的持久层框架,用于简化 JDBC 开发 官网:https://mybatis.net.cn/ 持久层 负责将数据保存到数据库的那一层代码 javaEE 三层架 ...

  3. C#/.NET/.NET Core技术前沿周刊 | 第 6 期（2024年9.16-9.22）

    前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...

  4. 10-04 NOIP模拟赛

    10-04 NOIP模拟赛 喜提80+30+10=120分 T1 水管(flow) 题目描述 某国有 \(n\) 个城市,水利调配非常有问题,这导致部分地区出现严重的缺水,而部分地区却全年洪灾泛滥.政 ...

  5. neo4j 统计多个节点之间关系总和的写法-包含多个collect合并成一个并去重操作

    在使用neo4j数据库时,会遇到计算与指定节点产生关联的数量统计需求,例如指定6个节点1,2,3,4,5,6需要找出与这6个节点中4个节点有关联的节点(要求排除这6个节点的数据) 先看实现查询语句: ...

  6. pip下载太慢，换源

    1.安装pqi pip install pqi 2.改变pip源 比如换成清华源: pqi use tuna 3.显示当前源

  7. Windows10 安装使用 Docker

    Windows10 安装使用 Docker 下载安装 Docker Desktop https://docs.docker.com/docker-for-windows/install/ 点击运行 D ...

  8. 开源项目更新｜WPF/Uno Platform/WinUI 3三个版本的《英雄联盟客户端》

    ​ 哈喽大家好! 我们是中韩Microsoft MVP夫妇 Vicky&James^^很高兴能加入博客园和大家分享我们的技术! 自2008年以来,我们一直深耕于WPF技术,积累了丰富的经验.这 ...

  9. ⼯作中有做过数据处理吗？ tree 组件 根据 pid 寻找父节点

    主要是在组件和后端返回的数据之间,或者组件产⽣的数据和需要提交给后端的数据之间,有可能会出 现结构对不上,这个时候可能会处理⼀下,举个例⼦,⽐如说我们常⽤的tree型组件要求必须是嵌套的 tree型数 ...

  10. 015 Python 的输入输出和字符串格式化（终于可以和计算机交流了）

    #!/usr/bin/env python # -*- coding:utf-8 -*- # Datatime:2022/7/26 20:11 # Filename:015 Python 的输入输出和 ...