前情

一直以来都没有好的方式可以监听元素变化，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. OData – Routing

    前言 以前我都是把 ODataController 和普通 API Controller 分开做. (因为 OData 实在多 Bug, 好东西尽量不要掺和它) Read 的部分用 OData, CU ...

  2. 分享3款开源、免费的Avalonia UI控件库

    Avalonia介绍 Avalonia是一个强大的框架,使开发人员能够使用.NET创建跨平台应用程序.它使用自己的渲染引擎绘制UI控件,确保在Windows.macOS.Linux.Android.i ...

  3. 无人值守的IDC机房动环综合运维方案

    ​ 企业数字化转型以及5G.物联网.云计算.人工智能等新业态带动了数据中心的发展,在国家一体化大数据中心及"东数西算"节点布局的推动下,数据中心机房已成为各大企事业单位维持业务正常 ...

  4. LeetCode 1388. Pizza With 3n Slices(3n 块披萨)(DP)

    给你一个披萨,它由 3n 块不同大小的部分组成,现在你和你的朋友们需要按照如下规则来分披萨: 你挑选 任意 一块披萨.Alice 将会挑选你所选择的披萨逆时针方向的下一块披萨.Bob 将会挑选你所选择 ...

  5. eBPF 概述：第 3 部分：软件开发生态

    1. 前言 在本系列的第 1 部分和第 2 部分中,我们对 eBPF 虚拟机进行了简洁的深入研究.阅读上述部分并不是理解第 3 部分的必修课,尽管很好地掌握了低级别的基础知识确实有助于更好地理解高级别 ...

  6. /proc/buddyinfo

    在应用程序设计过程中,内存是很重要的资源,而计算机主机的内存资源时有限的.一般而言我们可以申请到的内存是有限的,并不是想申请多大就有多大就可以申请多大的./proc/buddyinfo文件里,就记录着 ...

  7. 【题目全解】ACGO排位赛#13

    ACGO排位赛#13 - 题目解析 感谢大家参加本次排位赛! T1 - 纪元流星雨 题目链接跳转:点击跳转 也没有特别大的难度,手动模拟一下就可以了. 解题步骤 先计算出这个人一生中第一次看到流星雨的 ...

  8. 2. 王道OS-操作系统的特征，发展和分类

    1. 并发:宏观上是同时发生的,微观是交替发生的 :ps:并行:宏观和微观都是同时发生的 : ps:单核CPU同一时刻只能执行一个程序,各个程序只能并发的执行 : 多核CPU同一时刻可以同时执行多个程 ...

  9. .NET高级调试 - 3.12 sosex实用的几个命令介绍

    简介 sosex是sos的一个拓展,主要目的是将一些繁琐的排查过程脚本化,比如探测死锁,设置断点等.更加方便快捷协助我们排查问题. 比较可惜的是,在.net core中不可用,作者已经不更新了. 更多 ...

  10. 装有docker的虚拟机环境ping宿主机失败

    当我用docker network create 创建了一个网络后 [root@localhost ~]# docker network create kong-net 5c035564f9b4649 ...