JavaScript监听属性改变
JavaScript属性 改变 监听
2023-09-14 09:08:24 时间
参考:https://www.softwhy.com/HTML5/MutationObserver_course/
JavaScript监听属性改变
原创作品,转载需得到原作者书面许可,同时保留原作者和出处,否则将追究法律责任。
关于Mutation Observer基本知识可以参阅以下两篇文章:
(1).Mutation Observer优点一章节。
(2).Mutation Observer用法一章节。
下面通过代码实例介绍一下如何监听attributes的变动,也就是监听子节点的变动。
代码实例如下:
[HTML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!doctype html> < html > < head > < meta charset = "utf-8" > < title >蚂蚁部落</ title > < script > window.onload = function () { var ul = document.querySelector("ul"); var Observer = new MutationObserver(function (mutations, instance) { console.log(mutations); console.log(instance); mutations.forEach(function (mutation) { console.log(mutation); }); }); Observer.observe(ul, { attributes: true }); ul.setAttribute("class", "a"); ul.setAttribute("class", "b"); ul.removeAttribute("class"); } </ script > </ head > < body > < div id = "box" > < ul > < li >蚂蚁部落</ li > </ ul > </ div > </ body > </ html > |
下面对代码进行一下分析,首先看运行控制台截图:
当其他所有脚本代码都执行完毕之后,MutationObserver构造函数的回调函数才会被执行。
构造函数的第一个数组参数用来存放所有的变化,每一个成员都是MutationRecord类型。
[JavaScript] 纯文本查看 复制代码
1
2
3
|
Observer.observe(ul, { attributes: true //监听属性节点的变化 }); |
规定监听器将监听ul元素属性节点的变化。
[JavaScript] 纯文本查看 复制代码
1
|
ul.setAttribute( "class" , "a" ) |
为ul元素添加一个class属性,并设置属性值为a;动作将被记录在mutations数组中。
[JavaScript] 纯文本查看 复制代码
1
|
ul.setAttribute( "class" , "b" ) |
修改ul元素原来class属性值为b;动作将被记录在mutations数组中。
[JavaScript] 纯文本查看 复制代码
1
|
ul.removeAttribute( "class" ); |
删除ul元素上的class属性;动作将被记录在mutations数组中。
MutationRecord对象,直接看控制台截图:
监听指定属性的改变:
如果不指定监听哪些属性,那么所有属性的改变都在监听范围之内。
Mutation Observer提供了监听指定属性的功能,代码实例如下:
[HTML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!doctype html> < html > < head > < meta charset = "utf-8" > < title >蚂蚁部落</ title > < script > window.onload = function () { var ul = document.querySelector("ul"); var Observer = new MutationObserver(function (mutations, instance) { console.log(mutations); console.log(instance); mutations.forEach(function (mutation) { console.log(mutation); }); }); Observer.observe(ul, { attributes: true, attributeFilter: ["class"] }); ul.setAttribute("class", "a"); ul.setAttribute("ant", "b"); } </ script > </ head > < body > < div id = "box" > < ul > < li >蚂蚁部落</ li > </ ul > </ div > </ body > </ html > |
上面代码只会监听class属性的变化。
attributeFilter属性值是一个数组,可以规定要监听的属性名称。
相关文章
- JavaScript 字符串方法与属性(下)
- navigator对象属性_javascript构造函数
- JavaScript 运算符与语句
- >JavaScript中获取和修改元素属性的值
- javaScript跨域总结和相关解决办法大全详解编程语言
- 对javascript基本对象的属性以及方法的实例介绍
- JavaScript与C#Windows应用程序交互方法
- javascript硬盘序列号+其它硬件信息
- JavaScript事件属性绑定带参数的函数
- javascript动态改变img的src属性图片不显示的解决方法
- 原生javascript获取元素样式属性值的方法
- JavaScript高级程序设计客户端存储学习笔记
- JavaScript学习笔记记录我的旅程
- javascript中break,continue和return语句用法小结
- Javascript的数组与字典用法与遍历对象的属性技巧
- JavaScript中的noscript元素属性位置及作用介绍
- asp.net中倒计时自动跳转页面的实现方法(使用javascript)
- PHP加密函数Javascript/Js解密函数
- javascript和jquery修改a标签的href属性
- javascript操作css属性
- JavaScript类属性的访问方式详解
- JavaScript简单实现鼠标拖动选择功能
- javascript跨浏览器的属性判断方法
- Javascript常用字符串判断函数代码分享
- VS2008中使用JavaScript调用WebServices
- javascript中String对象的slice()方法分析
- 使用JavaScript+canvas实现图片裁剪
- 一个JavaScript处理textarea中的字符成每一行实例