Mutation Observer API 突变监视接口

用来监视 DOM 变动。

DOM 的任何变动,比如节点的增减属性的变动文本内容的变动,这个 API 都可以得到通知

概念上,它很接近事件,可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。

但是,Mutation Observer 与 事件 有一个本质不同:

    • 事件是同步触发,也就是说,DOM 的变动立刻会触发相应的事件;
    • Mutation Observer 则是异步触发,DOM 的变动并不会马上触发,而是要等到当前所有 DOM 操作都结束才触发

Mutation Observer 有以下特点:

    • 它等待所有脚本任务完成后,才会运行(即异步触发方式)。
    • 它把 DOM 变动记录封装成一个数组进行处理,而不是一条条个别处理 DOM 变动。
    • 它既可以观察 DOM 的所有类型变动,也可以指定只观察某一类变动。

Mutation Observer 构造函数

  • 使用

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

      • var box = document.getElementById("test_box");
        
        // 1. 定义一个 监视器 实例
        var mo = new MutationObserver(function(mutations, observer){
        mutations.forEach(function(mutation){
        console.log(mutation);
        });
        }); // 2. 定义要监听的 类型集合 对象
        var chgType = {
        "childList": true, // 子节点变动 监视
        "attributes": true, // 属性变动 监视
        "characterData": true, // 节点内容 或者 节点文本 的变动
        }; // 3. 启动监听
        mo.observe(box, chgType);

.observe()            启动监视器

  • 第一个参数是 所要观察的DOM元素是article
  • 第二个参数是 所要观察的变动类型        

至少指定一种要监听的变动类型,否则报错

"childList": true,            子节点 变动

"attributes": true,              属性 变动

"characterData": true,                        节点内容 或者 节点文本 变动

还可指定监听属性

"subtree": true,            是否同时监视该节点的所有后代节点

"attributeOldValue": true,            监视 attributes 变动时,是否需要记录变动前的属性值

"characterDataOldValue": true,            监视 characterData 变动时,是否需要记录变动前的属性值

"attributeFilter": 数组,            表示需要观察的特定属性(比如['class','src'])

  • 实例:观察新增的子节点
  • var insertedNodes = [];
    var mo = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
    insertedNodes.push(mutation.addedNodes[i]);
    })
    });
    mo.observe(document, { childList: true });
    console.log(insertedNodes);

.disconnect();            停止监视

.takeRecords();            清除变动记录,即不再处理未处理的变动____该方法返回变动记录的数组

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

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

  • 实例: 观察<body>的所有下级节点, 回调函数会在控制台显示所有变动的类型和目标节点
  • 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 chgType = {
    'childList': true,
    'subtree': true
    }; mo.observe(document.body, chgType);
  • 实例: 属性变动('attributes': true), 实际发生变动时,会将变动前的值显示在控制台。
  • 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);
  • 封装: 目标元素 只要在 DOM 上已加载, 则执行 fn
  • (function(win){
    'use strict';
    var doc = win.document;
    var MutationObserver = win.MutationObserver || win.WebKitMutationObserver; var targets = [];
    var mo; function isReadyOrNot(){
    // 检查是否匹配已储存的节点
    for(var i = 0; i < targets.length; i++){
    var target = targets[i];
    var elements = doc.querySelectorAll(target.selector); // 检查指定节点是否有匹配
    for(var j = 0; j < elements.length; j++){
    var element = elements[j]; // 确保回调函数只会对该元素调用一次
    if(!element.isReady){
    element.isReady = true;
    // 对该节点调用回调函数
    target.fn.call(element, element);
    };
    };
    };
    }; /**** 目标元素 只要在 DOM 上已加载, 则执行 fn ****/
    win.eleReady = function(selector, fn){
    // 储存选择器和回调函数
    targets.push({
    selector: selector,
    fn: fn
    }); if(!mo){
    mo = new MutationObserver(isReadyOrNot); // 定义 突变监听器
    mo.observe(doc.documentElement, { // 开始监听 document变化
    childList: true, // 监听 子节点
    subtree: true // 同时监听 后代节点
    });
    }; isReadyOrNot(); // 检查该节点是否已经在DOM中
    };
    })(window); eleReady('.foo', function(element){
    // ...
    });

(91)Wangdao.com第二十四天_Mutation Observer API 突变监视器的更多相关文章

  1. NeHe OpenGL教程 第二十四课:扩展

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  2. javaSE第二十四天

    第二十四天    363 1:多线程(理解)    363 (1)JDK5以后的Lock锁    363 A:定义    363 B:方法:    364 C:具体应用(以售票程序为例)    364 ...

  3. Python第二十四天 binascii模块

    Python第二十四天 binascii模块 binascii用来进行进制和字符串之间的转换 import binascii s = 'abcde' h = binascii.b2a_hex(s) # ...

  4. Gradle 1.12用户指南翻译——第二十四章. Groovy 插件

    其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...

  5. SQL注入之Sqli-labs系列第二十四关(二阶注入)

    开始挑战第二十四关(Second Degree Injections) 0x1 前言 SQL注入一般分为两类:一阶SQL注入(普通SQL注入),二阶SQL注入 .二次注入不是注入两次的意思,请不要混淆 ...

  6. “全栈2019”Java多线程第二十四章:等待唤醒机制详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  7. “全栈2019”Java第二十四章:流程控制语句中决策语句switch下篇

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. 孤荷凌寒自学python第二十四天python类中隐藏的私有方法探秘

    孤荷凌寒自学python第二十四天python类中隐藏的私有方法探秘 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 今天发现了python的类中隐藏着一些特殊的私有方法. 这些私有方法不管我 ...

  9. 第二十四届全国青少年信息学奥林匹克联赛初赛 普及组C++语言试题

    第二十四届全国青少年信息学奥林匹克联赛初赛 普及组C++语言试题 1.原题呈现 2.试题答案 3.题目解析 因博客园无法打出公式等,所以给你们几个小编推荐的链接去看看,在这里小编深感抱歉! https ...

随机推荐

  1. .net core 多租户框架整理

    一 saaskitAsp.Net Core multi-tenant application Sample using #SaaSKithttps://github.com/saaskit/saask ...

  2. Node.js实战项目学习系列(5) node基础模块 path

    前言 前面已经学习了很多跟Node相关的知识,譬如开发环境.CommonJs,那么从现在开始要正式学习node的基本模块了,开始node编程之旅了. path path 模块提供用于处理文件路径和目录 ...

  3. Spring Boot集成MyBatis的2种方式

    目录 写在前面 准备工作 配置数据库驱动 配置数据源 原生集成MyBatis 依赖配置 注册MyBatis核心组件 定义并使用映射器 通过MyBatis-Spring-Boot-Starter集成 默 ...

  4. 「NOI2017」泳池

    DP式子比后面的东西难推多了 LOJ2304 Luogu P3824 UOJ #316 题意 给定一个长度为$ n$高为$ \infty$的矩形 每个点有$ 1-P$的概率不可被选择 求最大的和底边重 ...

  5. Centos7 安装 jdk 1.8

    Centos7 安装 jdk 1.8 1.下载安装包 链接: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloa ...

  6. 【转】Python3 (入门6) 库的打包与安装

    Python3 (入门6) 库的打包与安装 本文由 Luzhuo 编写,转发请保留该信息. 原文: http://blog.csdn.net/Rozol/article/details/6940288 ...

  7. conda安装cv2库

    conda install opencv-python或者 pip install opencv-python(不过好像是这个比较有效)

  8. centos7.5环境下编译安装php7.0.30并安装redis和mongo扩展

    .安装php7..30的脚本 # vim install_php.sh #!/bin/bash # 安装基本依赖 yum install -y gcc gcc-c++ htop telnet ioto ...

  9. shim和polyfill

    shim是将新的api引入旧的环境 polyfill是一段代码或插件 https://www.aliyun.com/jiaocheng/773254.html 理解得不够透彻...

  10. alembic使用

    前言 alembic是SQLAlchemy作者编写的控制 model 版本的模块,配合SQLAlchemy使用更佳 正文 安装 pip install alembic alembic是可以在DOS中执 ...