【JavaScript 教程】DOM——Mutation Observer API

2024-01-16 10:58
文章标签 java 教程 script api dom observer mutation

本文主要是介绍【JavaScript 教程】DOM——Mutation Observer API，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

640?wx_fmt=jpeg

作者 | 阮一峰


概述

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。

这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个<p>元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。

Mutation Observer 有以下特点。

  • 它等待所有脚本任务完成后，才会运行（即异步触发方式）。

  • 它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。

  • 它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。


MutationObserver 构造函数

使用时，首先使用MutationObserver构造函数，新建一个观察器实例，同时指定这个实例的回调函数。

上面代码中的回调函数，会在每次 DOM 变动后调用。该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例，下面是一个例子。

var observer = new MutationObserver(function (mutations, observer) {
  mutations.forEach(function(mutation) {
console.log(mutation);
  });
});


MutationObserver 的实例方法


observe()

observe方法用来启动监听，它接受两个参数。

  • 第一个参数：所要观察的 DOM 节点

  • 第二个参数：一个配置对象，指定所要观察的特定变动

var article = document.querySelector('article');
var  options = {
'childList': true,
'attributes':true
} ;
observer.observe(article, options);

上面代码中，observe方法接受两个参数，第一个是所要观察的DOM元素是article，第二个是所要观察的变动类型（子节点变动和属性变动）。

观察器所能观察的 DOM 变动类型（即上面代码的options对象），有以下几种。

  • childList：子节点的变动（指新增，删除或者更改）。

  • attributes：属性的变动。

  • characterData：节点内容或节点文本的变动。

想要观察哪一种变动类型，就在option对象中指定它的值为true。需要注意的是，必须同时指定childList、attributes和characterData中的一种或多种，若未均指定将报错。

除了变动类型，options对象还可以设定以下属性：

  • subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。

  • attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。

  • characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。

  • attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）。

// 开始监听文档根节点（即<html>标签）的变动
mutationObserver.observe(document.documentElement, {
attributes: true,
characterData: true,
childList: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});

对一个节点添加观察器，就像使用addEventListener方法一样，多次添加同一个观察器是无效的，回调函数依然只会触发一次。但是，如果指定不同的options对象，就会被当作两个不同的观察器。

下面的例子是观察新增的子节点。

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
for (var i = 0; i < mutation.addedNodes.length; i++) {
      insertedNodes.push(mutation.addedNodes[i]);
    }
  });
console.log(insertedNodes);
});
observer.observe(document, { childList: true, subtree: true });

disconnect()，takeRecords（）

disconnect方法用来停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器。

observer.disconnect();

takeRecords方法用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。

observer.takeRecords();

下面是一个例子。

// 保存所有没有被观察器处理的变动
var changes = mutationObserver.takeRecords();

// 停止观察
mutationObserver.disconnect();

MutationRecord 对象

DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。

MutationRecord对象包含了DOM的相关信息，有如下属性：

  • type：观察的变动类型（attributes、characterData或者childList）。

  • target：发生变动的DOM节点。

  • addedNodes：新增的DOM节点。

  • removedNodes：删除的DOM节点。

  • previousSibling：前一个同级节点，如果没有则返回null。

  • nextSibling：下一个同级节点，如果没有则返回null。

  • attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。

  • oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。


应用示例

子元素的变动


下面的例子说明如何读取变动记录。

var callback = function (records){
  records.map(function(record){
console.log('Mutation type: ' + record.type);
console.log('Mutation target: ' + record.target);
  });
};

var mo = new MutationObserver(callback);

var option = {
'childList': true,
'subtree': true
};

mo.observe(document.body, option);

上面代码的观察器，观察<body>的所有下级节点（childList表示观察子节点，subtree表示观察后代节点）的变动。回调函数会在控制台显示所有变动的类型和目标节点。

属性的变动

下面的例子说明如何追踪属性的变动。

var callback = function (records) {
  records.map(function (record) {
console.log('Previous attribute value: ' + record.oldValue);
  });
};

var mo = new MutationObserver(callback);

var element = document.getElementById('#my_element');

var options = {
'attributes': true,
'attributeOldValue': true
}

mo.observe(element, options);

上面代码先设定追踪属性变动（'attributes': true），然后设定记录变动前的值。实际发生变动时，会将变动前的值显示在控制台。

取代 DOMContentLoaded 事件

网页加载的时候，DOM 节点的生成会产生变动记录，因此只要观察 DOM 的变动，就能在第一时间触发相关事件，因此也就没有必要使用DOMContentLoaded事件。

var observer = new MutationObserver(callback);
observer.observe(document.documentElement, {
childList: true,
subtree: true
});

上面代码中，监听document.documentElement（即HTML节点）的子节点的变动，subtree属性指定监听还包括后代节点。因此，任意一个网页元素一旦生成，就能立刻被监听到。

下面的代码，使用MutationObserver对象封装一个监听 DOM 生成的函数。

(function(win){
  'use strict';

var listeners = [];
var doc = win.document;
var MutationObserver = win.MutationObserver || win.WebKitMutationObserver;
var observer;

function ready(selector, fn){
// 储存选择器和回调函数
    listeners.push({
selector: selector,
fn: fn
    });
if(!observer){
// 监听document变化
      observer = new MutationObserver(check);
      observer.observe(doc.documentElement, {
childList: true,
subtree: true
      });
    }
// 检查该节点是否已经在DOM中
    check();
  }

function check(){
// 检查是否匹配已储存的节点
for(var i = 0; i < listeners.length; i++){
var listener = listeners[i];
// 检查指定节点是否有匹配
var elements = doc.querySelectorAll(listener.selector);
for(var j = 0; j < elements.length; j++){
var element = elements[j];
// 确保回调函数只会对该元素调用一次
if(!element.ready){
          element.ready = true;
// 对该节点调用回调函数
          listener.fn.call(element, element);
        }
      }
    }
  }

// 对外暴露ready
  win.ready = ready;

})(this);

ready('.foo', function(element){
// ...
});


本章节完


推荐阅读

【JavaScript 教程】DOM——CSS 操作

【JavaScript 教程】DOM——Text 节点和 DocumentFragment 节点

【JavaScript 教程】DOM——属性的操作

【JavaScript 教程】DOM——Element 节点

【JavaScript 教程】DOM——Document 节点

【JavaScript 教程】DOM——ParentNode 接口，ChildNode 接口

【JavaScript 教程】DOM——NodeList 接口，HTMLCollection 接口

【JavaScript 教程】DOM——Node 接口

【JavaScript 教程】DOM——概述



640?wx_fmt=jpeg

640?wx_fmt=jpeg

这篇关于【JavaScript 教程】DOM——Mutation Observer API的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/612354。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2