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…….) 获取元素的属性,设置元 ...
随机推荐
- 【OpenCV】选择ROI区域 (转)
问题描述:在测试目标跟踪算法时,需要选择不同区域作为目标,进行目标跟踪,测试目标跟踪的效果. 解决思路: 1.OpenCV中提供了鼠标交互控制,利用setMouseCallback()给固定的窗口设置 ...
- 我是陌生人 Java中导入、导出Excel
我是陌生人 Java中导入.导出Excel 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是: ...
- python2中在sqlite3中插入中文
# -*- coding: utf-8 -*- import sqlite3 conn = sqlite3.connect('SWC_Perf_Info.db') cur = conn.cursor( ...
- Android——SeekBar(拖动条)相关知识总结贴
Android进度条(ProgressBar)拖动条(SeekBar)星级滑块(RatingBar)的例子 http://www.apkbus.com/android-51326-1-1.html A ...
- 腾讯企业邮箱设置发送邮件的配置(针对smtp)
QQ邮箱也是如下配置,不过需要进行开启smtp
- Xcode 常用设置
1.main 文件注释 1)main 文件注释修改路径 /Applications/Xcode.app/Contents/Developer/Library/Xcode/Templates/Proje ...
- Git教程学习(三)
主要命令: $ git checkout -- readme.txt #使用暂存区或版本库中最新的版本替换工作区版本 $ git reset HEAD readme.txt # 撤消指定文件的add操 ...
- 使用RStudio远程连接MySQL
环境: 远程机: linux + Mysql 本地机: Windows + RStudio 问题: 1. 远程机为内网机器,需要跳板机连接,没有公网ip,无法连接 解决方案:修改跳板机的iptable ...
- 地图组件上的自定义区域叠加层显示 ArcGis + GeoJson
最近参与了一个IOT环境项目,需要对某个城市的某几个区域做环境监控与治理,其中就用到了地图叠加层的功能,粗看很复杂,其实很简单,先来看一下效果,然后再来讲一下如何实现的: 中间的黄色轮廓线包括的几块区 ...
- [svc]linux的ip命令操作接口和路由表
参考: https://www.tecmint.com/ip-command-examples/ 学会linux的配置ip,配置网关,添加路由等命令 man ip man ip address man ...