js dom 观察者属性 MutationObserver
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的更多相关文章
- js dom element 属性整理(原创)
最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...
- js DOM Element属性和方法整理
节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- 原生js dom记忆的内容
1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- JS获取元素属性和自定义属性
获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...
随机推荐
- 三种方法教你如何用PHP模拟post提交数据
php模拟post传值在日常的工作中用到的不是很多,但是在某些特定的场合还是经常用到的. 下面,我整理了三种php模拟post传值的方法,file_get_contents.curl和socket. ...
- 手机 https 抓包---Charles篇
原文出处: Lu尼玛的想疗院 作为一名现代前端,除了要掌握html,css,js 以及一系列乱七八糟框架之外,还得懂得如何抓包改包.当然,常规的网站或者自主开发的我们往往使用 chrome或者 fir ...
- SDUT 3002-素数间隙(素数筛+暴力)
素数间隙 Time Limit: 1000ms Memory limit: 262144K 有疑问?点这里^_^ 题目描写叙述 Neko猫是一个非常喜欢玩数字游戏的会说话的肥猫,常常会想到非常多 ...
- 重写$.ajax方法
/*重写Jquery中的ajax 封装壳*/ $(function () { (function ($) { //首先备份下jquery的ajax方法 var _ajax = $.ajax; //重写 ...
- Junit学习笔记之五:MockMVC
原文:https://blog.csdn.net/xiao_xuwen/article/details/52890730 随着RESTful Web Service的流行,测试对外的Service是否 ...
- Javascript 原生Cookie使用用法
var oCookie = { setCookie: function (name, value, expireDays, path, domain) { var expireDays = expir ...
- 11G新特性 -- OLTP Table Compression
之前的版本中,只能在批量加载操作时,比如direct load.create table as select 操作,才能压缩数据.在dml操作期间是无法压缩数据的. 在11g中,oracle将表压缩扩 ...
- Nginx 功能模块
一.Nginx 核心功能模块 Nginx 核心功能模块负责 Nginx 的全局应用,主要对应主配置文件的 Main 区块和 Events 区块,这里有很多 Nginx 必须的全局参数配置. Nginx ...
- java中的synchronized同步代码块和同步方法的区别
下面这两段代码有什么区别? //下列两个方法有什么区别 public synchronized void method1(){} public void method2(){ synchronized ...
- 每日英语:Dashing the China Dream
Much has been said about what the 'China Dream' really means to many Chinese -- whether it is nation ...