MDN上说的很清楚

MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件

config

childList	观察目标节点的子节点(增, 删),则设置为true.
attributes 观察目标节点的属性节点(增,删,改)设为true. characterData 如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化,则设置为true. subtree 观察目标节点所包含的整棵DOM树上的上述三种节点变化,则设置为true. attributeOldValue
在attributes属性已经设为true的前提下,如果需要将发生变化的属性节点之前的属性值记录下来(记录到下面MutationRecord对象的oldValue属性中),则设置为true. characterDataOldValue 在characterData属性已经设为true的前提下,如果需要将发生变化的characterData节点之前的文本内容记录下来(记录到下面MutationRecord对象的oldValue属性中),则设置为true. attributeFilter 一个属性名数组(不需要指定命名空间),只有该数组中包含的属性名发生变化时才会被观察到,其他名称的属性发生变化后会被忽略.
// 有兼容的话 需要调整兼容性
var MutationObserver = window.MutationObserver;
// 需要观察的节点
var ele = document.querySelector('.a'); // // 创建观察者对象
var observer = new MutationObserver(function(MutationRecord, target) {
// 指定的DOM节点(目标节点)发生变化时被调用
MutationRecord.forEach(function(mutation) {
console.log(mutation);
});
}); // 配置观察选项:
var config = {
attributes: true,// 观察属性
childList: true,// 观察子节点
characterData: true, // characterData节点
attributeOldValue: true, // 记忆上一次的atrr值
} // 当前观察者对象注册需要观察的目标节点
// config 指定要观察的DOM变化类型.
observer.observe(ele, config) // 你还可以停止观察
// observer.disconnect(); // 添加一个 title属性
ele.title = 'hello world'
ele.title = 'hello alone' // 修改子节点
ele.innerHTML += ' ajanuw'

js dom 观察者属性 MutationObserver的更多相关文章

  1. js dom element 属性整理(原创)

    最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...

  2. js DOM Element属性和方法整理

    节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...

  3. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  4. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  5. 原生js dom记忆的内容

    1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...

  6. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  7. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  8. css3动画和JS+DOM动画和JS+canvas动画比较

    css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

  9. JS获取元素属性和自定义属性

    获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...

随机推荐

  1. 三种方法教你如何用PHP模拟post提交数据

    php模拟post传值在日常的工作中用到的不是很多,但是在某些特定的场合还是经常用到的. 下面,我整理了三种php模拟post传值的方法,file_get_contents.curl和socket. ...

  2. 手机 https 抓包---Charles篇

    原文出处: Lu尼玛的想疗院 作为一名现代前端,除了要掌握html,css,js 以及一系列乱七八糟框架之外,还得懂得如何抓包改包.当然,常规的网站或者自主开发的我们往往使用 chrome或者 fir ...

  3. SDUT 3002-素数间隙(素数筛+暴力)

    素数间隙 Time Limit: 1000ms   Memory limit: 262144K  有疑问?点这里^_^ 题目描写叙述 Neko猫是一个非常喜欢玩数字游戏的会说话的肥猫,常常会想到非常多 ...

  4. 重写$.ajax方法

    /*重写Jquery中的ajax 封装壳*/ $(function () { (function ($) { //首先备份下jquery的ajax方法 var _ajax = $.ajax; //重写 ...

  5. Junit学习笔记之五:MockMVC

    原文:https://blog.csdn.net/xiao_xuwen/article/details/52890730 随着RESTful Web Service的流行,测试对外的Service是否 ...

  6. Javascript 原生Cookie使用用法

    var oCookie = { setCookie: function (name, value, expireDays, path, domain) { var expireDays = expir ...

  7. 11G新特性 -- OLTP Table Compression

    之前的版本中,只能在批量加载操作时,比如direct load.create table as select 操作,才能压缩数据.在dml操作期间是无法压缩数据的. 在11g中,oracle将表压缩扩 ...

  8. Nginx 功能模块

    一.Nginx 核心功能模块 Nginx 核心功能模块负责 Nginx 的全局应用,主要对应主配置文件的 Main 区块和 Events 区块,这里有很多 Nginx 必须的全局参数配置. Nginx ...

  9. java中的synchronized同步代码块和同步方法的区别

    下面这两段代码有什么区别? //下列两个方法有什么区别 public synchronized void method1(){} public void method2(){ synchronized ...

  10. 每日英语:Dashing the China Dream

    Much has been said about what the 'China Dream' really means to many Chinese -- whether it is nation ...