js dom 观察者属性 MutationObserver
2023-09-14 08:58:45 时间
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代码
- JS+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)网页文字评论弹幕
- JS框架_(Laydate.js)简单实现日期日历
- JS框架_(Bootstrap.js)实现简单的轮播图
- Js基础知识5-函数返回值、函数参数、函数属性、函数方法
- ASPX导入JS,JavaScript乱码怎么办
- JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性
- js {}与class属性描述符的区别
- JS: 检查浏览器os环境的两大属性
- Js获取当前日期时间及其它操作
- javascript (js)判断手机号码中国移动、中国联通、中国电信
- [Next.js] Consume Next.js API routes with the SWR library on the client-side
- nginx js、css多个请求合并为一个请求(concat模块)
- js小案例:使用location.href自动跳转页面
- 华为OD机试 - 二元组个数(Java & JS & Python)
- 掌握这20个JS技巧,做一个不加班的前端人
- jquery属性的相关js实现方法
- JS:crypto-js模块实现数据加密解密
- 利用js_API 运行对html文档元素的属性的CRUD操作
- js文字效果
- js 判断是否选中
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- 【JS高级】js之闭包对象_04
- JS-DOM涉及的位置大小属性
- JS判断相等或者不等于(==、===、!=、!==)运算符