我的编程空间,编程开发者的网络收藏夹
学习永远不晚

MutationObserver监视对DOM树所做更改的功能是什么

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

MutationObserver监视对DOM树所做更改的功能是什么

本篇内容主要讲解“MutationObserver监视对DOM树所做更改的功能是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“MutationObserver监视对DOM树所做更改的功能是什么”吧!

使用场景

首先关于MutationObserver的作用就是监视对DOM所做更改的能力,那么他的使用面就特别的广泛了,比如组件的自适应,垃圾回收,还有就是在不支持prmose的场景下实现异步完成函数,防止用户用devtools工具修改一些样式,如:通过修改css或删除标签去除图片水印等。

当然只要是设计到DOM变动的MutationObserver都能帮你一些忙。

书写格式

首先MutationObserver同样也是监听一个Node节点,然后通过相关的配置项 设置监听的范围,当范围内的相关属性发生变化,便会触发MutationObserver的回调函数。

var observer = new MutationObserver(callback);

相关方法

observe

mutationObserver.observe(target[, options])

target即我们要监听的Node节点,options即为配置项。

options属性有以下几个(我写的简短一点,详细请点击链接看文档):

  • subtree : true, ----将会监听以 target为根节点的整个子树。包括子树中所有节点的属性,而不仅仅是针对target。

  • childList: true, ----监听 target 节点中发生的节点的新增与删除(同时,如果 subtree 为 true,会针对整个子树生效)。

  • attributes : true,----观察所有监听的节点属性值的变化。默认值为 true,当声明了 attributeFilter或 attributeOldValue,默认 值则为 false。

  • characterData : true,----监听声明的target 节点上所有字符的变化,如果声明了characterDataOldValue,默认值则为 false

  • attributeOldValue : true,---记录上一次被监听的节点的属性变化。

  • characterDataOldValue : true----当为 true 时,记录前一个被监听的节点中发生的文本变化。

disconnect()

mutationObserver.disconnect()

disconnect方法告诉观察者停止观察变动。可以通过调用其 observe() 方法来重用观察者。()意思就是停止监听)

takeRecords

mutationRecords = mutationObserver.takeRecords()

takeRecords方法返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表,使变更队列保持为空。此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录,以便在停止观察者时可以处理任何未处理的更改。

MutationRecord对象

DOM每次发生变化,就会生成一条变动记录(MutationRecord实例)。该实例包含了与变动相关的所有信息。MutationObserver处理的就是一个个MutationRecord实例组成的数组。

MutationRecord包含了Dom的有关信息,有以下属性:

  • type:观察变动的类型,即原因(attribute、characterData或者childList等)

  • target : 发生变动的DOM节点

  • addedNodes :返回新增的DOM节点,如果没有则为空(null)。

  • removedNodes : 返回删除的DOM节点,如果没有则为空(null)。

  • previousSibling :返回被添加或移除的节点之前的兄弟节点,或者 null。即上一个兄弟节点

  • nextSibling : 返回被添加或移除的节点之后的兄弟节点,或者 null。即下一个兄弟节点

  • attributeName:返回被修改的属性的属性名,或者 null。

  • oldValue:这个属性只对attribute和characterData变动生效,如果发生childList变动,则返回null。

案例

一、

去除水印的操作(这里只讲下原理、概念),原理就是通过监听节点的属性和后代节点和属性,来实现无法去除的效果,简单案例

MutationObserver监视对DOM树所做更改的功能是什么

// 选择需要观察变动的节点const ul = document.querySelector('ul');// 观察器的配置(需要观察什么变动)const config = { 'childList': true, 'subtree': true ,'attributes':true};// 当观察到变动时执行的回调函数const callback = function(mutationsList, observer) {    console.log(111);    console.log(mutationsList,observer);};// 创建一个观察器实例并传入回调函数const observer = new MutationObserver(callback);// 以上述配置开始观察目标节点observer.observe(ul, config);const btn =document.querySelector('button')console.log(li);btn.addEventListener('click',()=>{    ul.style.background='pink'})// // 之后,可停止观察// observer.disconnect();

无论我通过控制台去删除 ul中的li(子代)标签还是改变ul的相关属性或li(子代)的属性 或者添加li操作。MutationObserver根据配置项监听,触发回调函数。这也就是为什么通过一些方法想去去除水印。会发现删不掉的原因。

注:style样式只有内联样式才可以触发。CSS选择器是无法触发的。

操作相关触发结果:

MutationObserver监视对DOM树所做更改的功能是什么

二、

如面试题:异步完成一个函数,并尽量将任务放在微任务中。 异步完成函数的原理,因为MutationObserver实例的callback回调函数与IntersectionObserver一样都为异步,这是W3C规定的。而且回调函数为微任务。

此处characterData:true,对应的就是节点字符发生变化。

        function asyncRun(fun){        //如果浏览器支持promise            if(typeof Promise !=='undefined'){                Promise.resolve().then(fun);                //如果浏览器支持 MutationObserve            }else if(typeof MutationObserver!== 'undefined'){                const observe =new MutationObserver(fun);                const textNode=document.createTextNode('0');                observe.observe(textNode,{characterData:true,});                textNode.data='1'                //都不支持则放入定时器            }else{                setTimeout(fun)            }        }

三、

在vue的nextTick源码中也用到了MutationObserver来实现异步调度机制,同上面的面试题类似。

到此,相信大家对“MutationObserver监视对DOM树所做更改的功能是什么”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

MutationObserver监视对DOM树所做更改的功能是什么

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

MutationObserver监视对DOM树所做更改的功能是什么

本篇内容主要讲解“MutationObserver监视对DOM树所做更改的功能是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“MutationObserver监视对DOM树所做更改的功能是什
2023-07-05

MutationObserver监视对DOM 树所做更改的功能妙用

这篇文章主要为大家介绍了MutationObserver监视对DOM 树所做更改的功能妙用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-03-15

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录