前情

一直以来都没有好的方式可以监听元素变化，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. Figma 学习笔记 – Auto Layout

    用途 Auto Layout 有点像 CSS 的 Flex, 它还带有 responsive 的概念.使用它以后可以替代掉不少 constraints 的写法. 用法 一个 parent 抱着多个 c ...

  2. EF Core – Soft Delete 实现

    前言 在 SQL Server – Soft Delete 中, 讲到了如果在 SQL Server 实现 Soft Delete. 这篇来说说, EF Core 在中间扮演的角色. 主要参考 Ent ...

  3. 手撸MQ消息队列——循环数组

    队列是咱们开发中经常使用到的一种数据结构,它与栈的结构类似.然而栈是后进先出,而队列是先进先出,说的专业一点就是FIFO.在生活中到处都可以找到队列的,最常见的就是排队,吃饭排队,上地铁排队,其他就不 ...

  4. JAVAEE——navicat安装

    Navicat Premium 15激活步骤 准备 Navicat Premium 15.Navicat Premium 15注册机 用到的都放在这里了: 链接:https://pan.baidu.c ...

  5. MyBatis——案例——查询-查询所有

      查询-查询所有数据     1.创建相应Mapper接口文件 以及Mapper配置信息文件                修改配置文件中 namespace :             2.编写接 ...

  6. linux(centos7)安装curl和composer

    linux(centos7)安装curl和composer 先安装curl:直接用yum装,yum curl 使用命令下载: curl -sS https://getcomposer.org/inst ...

  7. 基于.NET8 + Vue/UniApp前后端分离的快速开发框架，开箱即用！

    前言 今天大姚给大家分享一款基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用:ZR.Admin.NET. 开源免费(基于MIT License开源协议).代码量少.学习简单. ...

  8. 使用 KubeSphere 应用商店 5 分钟内快速部署 JuiceFS

    作者:朱唯唯,尹珉 JuiceFS 简介 JuiceFS 是为海量数据设计的分布式文件系统,使用对象存储来做数据持久化,避免重复造轮子,还能大大降低工程复杂度,让用户专注解决元数据和访问协议部分的难题 ...

  9. 图菱科技 SaaS 系统容器化最佳实践

    大家好,我是龚承明,在图菱(成都)科技有限公司任职,主要负责公司的产品系统研发以及公司IT基础设施的建设工作.本篇文章将为大家介绍下我司在采用 KubeSphere 平台实现公司业务系统容器化过程中的 ...

  10. IKAnalyzer分词工具的spring boot项目整合代码版

    简介 IK Analyzer是什么呢,一个很轻量的中文分词工具,是基于java开发的轻量级的中文分词工具包.它是以开源项目Luence为主体的,结合词典分词和文法分析算法的中文分词组件.IK有很多版本 ...