前情

一直以来都没有好的方式可以监听元素变化，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. 揭秘最为知名的黑客工具之一： Netcat！适用安全测试、渗透测试、黑客攻击！

    在网络安全领域,黑客工具一直备受关注.它们既可以被用于攻击,也可以用于防御.本文将为大家揭秘一款知名的黑客工具: Netcat. 1.Netcat是什么? Netcat被誉为"网络的瑞士军刀 ...

  2. OpenGL和OpenCL区别

    1.OpenGL用于图形渲染程序:OpenCL用于复杂的计算.他们都是由Khronos管理并使用C语言编译. 2.OpneGL使编程能够进行图形操作:OpenCL使编程能够在多个处理器中进行计算. 3 ...

  3. 好文分享 | 记一次Oracle12c数据库SQL短暂缓慢问题分析

    本文为墨天轮社区作者 张sir 原创作品,记录了日常运维Oracle数据库过程中遇到的一个慢SQL问题的解决.优化过程,文章内容全面具体.分析到位,且含有经验总结,分享给各位. 问题现象 这次出问题的 ...

  4. google 搜索技巧

    size qq.com inurl : size 指定网站 inurl 这个网站的指定内容 filetype 指定搜索的文件类型

  5. .NET 内存管理两种有效的资源释放方式

    前言 嗨,大家好!今天我们要聊一聊 .NET 中的内存管理.你知道吗?虽然 .NET 有一个很好的垃圾回收系统来自动清理不再使用的对象,但在某些情况下,我们还需要自己动手来释放一些特殊的资源,比如打开 ...

  6. PHP的json浮点精度难题

    前言 之前开发的接口需要用到json加签,有一次对接JAVA时,签名怎么都过不了,仔细对比了字符串,发现是PHP进行json_encode时,会将浮点型所有无意义的0给去掉(echo和var_dump ...

  7. 为什么会有unknown模块

    当一个模块在free后,他的线程仍然在运行时,会导致GetModuleName失败,返回unknown

  8. 谈一谈 Netty 的内存管理 —— 且看 Netty 如何实现 Java 版的 Jemalloc

    本文基于 Netty 4.1.112.Final 版本进行讨论 在之前的Netty 系列中,笔者是以 4.1.56.Final 版本为基础和大家讨论的,那么从本文开始,笔者将用最新版本 4.1.112 ...

  9. mysql 查询两个日期之间所有天数（查询近两个月所有日期）

    本文转自博文:https://blog.csdn.net/qq_42795259/article/details/126722209 遇到一个需求需要查询近两个月所有日期,如下图: 首先实现解决问题如 ...

  10. kubectl常用命令（一）

    一.查看 1.查看集群状态 # 查看客户端及服务端程序版本信息 kubectl version --short=true