前情

一直以来都没有好的方式可以监听元素变化，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. PTA甲级—图

    1.图的遍历 1013 Battle Over Cities (25 分) 一种方法使用dfs求连通块的个数 #include <cstdio> #include <cstring& ...

  2. Go runtime 调度器精讲（九）：系统调用引起的抢占

    原创文章,欢迎转载,转载请注明出处,谢谢. 0. 前言 第八讲介绍了当 goroutine 运行时间过长会被抢占的情况.这一讲继续看 goroutine 执行系统调用时间过长的抢占. 1. 系统调用时 ...

  3. 大模型训练：K8s 环境中数千节点存储最佳实践

    今天这篇博客来自全栈工程师朱唯唯,她在前不久举办的 KubeCon 中国大会上进行了该主题分享. Kubernetes 已经成为事实的应用编排标准,越来越多的应用在不断的向云原生靠拢.与此同时,人工智 ...

  4. [OI] 容斥原理拓展

    10.容斥原理拓展 10.1 二项式反演 \[P.10.1(1) \] 设 \(U=\{S_1,S_2,S_3...S_n\}\),且任意 \(i\) 个元素的交集都相等 定义 \(g(x)\) 为 ...

  5. Docker基本操作（镜像操作？容器操作？）（四）

    Docker 的基本原理我们已经了解了,也已经安装上了,接下来我们就一起来学习下 Docker 的常用操作,实际上主要就是 Docker CLI 的一些常用命令使用. 一.镜像操作 之前我们提到过 D ...

  6. Java中浮点数运算存在的精度问题以及解决方法

    观察以下一段代码,相信小朋友都可以一眼看出答案,但是计算机给出的答案是这样吗? public class TestDouble { public static void main(String arg ...

  7. Ant Design Vue 在表格中插入图片

    这两天一直在用 Antdv 做一些小 demo,今天在做表格的时候想在表格中插入图片,简单翻了下文档和国内的博客,发现所有的方法竟然都不好使,最后还是在官网的示例代码中看到相关的部分,不得不说这种 u ...

  8. USB总线-Linux内核USB3.0 Hub驱动分析（十四）

    1.概述 USB Hub提供了连接USB主机和USB设备的电气接口.USB Hub拥有一个上行口,至少一个下行口,上行口连接上一级的Hub的下行口或者USB主机,连接主机的为Root Hub,下行口连 ...

  9. Uefi ABL读取XBL设置的标志位

    PBL(启动固化程序)-> XBL(扩展引导加载程序,负责初始化芯片驱动和核心应用功能.XBL通常会加载一些平台相关的驱动程序,并提供通用接口)-> ABL(应用引导加载程序,负责引导操作 ...

  10. USB Type-C Power Role

    USB Power Role 是指 USB 设备在供电方面所扮演的角色,主要分为供电方(Provider)和受电方(Consumer).在 USB 供电协议中,电源角色的管理尤为重要,尤其是在 USB ...