jjzjj

作为前端你还不懂MutationObserver?那Out了

mb63aa8d1315a27 2023-03-28 原文

?前言

为什么突然写MutationObserver呢?最近在写页面水印的时候用到了MutationObserver方法,两者之间有什么联系呢?不用MutationObserver情况下,使用网站的人员可以随意修改DOM就可以把系统作者的版权标识(水印)去掉,然后使用无水印的网站,这显然是违背了系统作者的意愿,那么怎么防止这一操作呢?当然是MutationObserver,它能够监听DOM的变化,根据DOM的变化然后做出相应操作,比如删除水印后,使用MutationObserver监听到了水印的DOM被删除,就会立即生成一个水印,这样就杜绝了上面的情况。

?一、MutationObserver

​MutationObserver​​构造函数用来监听DOM的变化,比如节点增加、删除,属性的改变,文本的变动都能监听到。它具有以下特点:

  • 等所有dom操作结束后才触发,可以看成异步
  • 会把dom的变化记录放到数组中进行处理
  • 可以监听所有类型的dom变化,也能指定类型监听
用MutationObserver创建一个createObserve实例, 它会在指定的 DOM 发生变化时被调用。其中MutationObserver构造函数中有两个参数。

  • mutationRecoard:存放所有dom变化的数组
  • observe:观察者实例
const createObserve = new MutationObserver((mutationRecoard,observe)=>{

})

1. MutationRecoard监听记录详情

dom每次变化都会记录在MutationRecoard中,所以它是一个数组类型,MutationRecoard记录了每次DOM变化时的详细信息,具体如下所示:

属性

含义

type

观察的变动类型(attribute、characterData或者childList)

target

发生变动的DOM节点

addedNodes

新增的DOM节点

removedNodes

删除的DOM节点

previousSibling

前一个同级节点,如果没有则返回null

nextSibling

下一个同级节点,如果没有则返回null

attributeName

发生变动的属性。如果设置了attributeFilter,则只返回预先指定的属性

oldValue

变动前的值。这个属性只对attribute和characterData变动有效,如果发生childList变动,则返回null

具体如下图所示:

?二、MutationObserver实例对象方法

1. observe(node,config)

配置 MutationObserver 在 DOM 更改匹配给定选项时,通过其回调函数开始接收通知。有两个参数:

  • node:观察元素的所有节点
  • config:配置项,可以观测指定配置项的变化
配置项的详细属性如下:

属性

含义

childList

子节点的变动(指新增,删除或者更改)

attributes

属性的变动

characterData

节点内容或节点文本的变动

subtree

布尔值,表示是否将该观察器应用于该节点的所有后代节点

attributeOldValue

布尔值,表示观察attributes变动时,是否需要记录变动前的属性值

characterDataOldValue

布尔值,表示观察characterData变动时,是否需要记录变动前的值

attributeFilter

数组,表示需要观察的特定属性(比如[‘class’,‘src’])

2. disconnect()

阻止 MutationObserver 实例继续接收的通知,直到再次调用其 observe() 方法,该观察者对象包含的回调函数都不会再被调用。

3. takeRecords()

从 MutationObserver 的通知队列中删除所有待处理的记录,并将它们返回到 MutationRecord 对象的新 Array 中。

?三、案列

  • 创建一个观察器并传入回调
  • 为观察器配置观察节点
  • 指定观察特定配置的dom变化
  • 执行观察器回调
  • 获取到DOM变化记录
<div class="content">
<ui>
<li class="0">0000000</li>
<li class="1">1111111</li>
<li class="2">222222</li>
<li class="3">33333</li>
<li class="4">4444</li>
<li class="5">55555</li>
<li class="6">6666</li>
<li class="7">77777</li>
<li class="8">888888</li>
<li class="9">99999</li>
</ui>
</div>
// 观察器的配置(需要观察什么变动)
const config = { attributes: true, childList: true, subtree: true,characterData:true,characterDataOldValue:true,attributDataOldValue:true};

// 当观察到变动时执行的回调函数
const callback = function(mutationRecoard, observer) {
// Use traditional 'for loops' for IE 11
for(let mutation of mutationRecoard) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(document.getElementsByClassName('content')[0], config);

// 之后,可停止观察
observer.disconnect();

有关作为前端你还不懂MutationObserver?那Out了的更多相关文章

  1. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码,如下所示:Something.createdo|x|x.foo=barend我想编写一个测试,它使用double代替block参数x,这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗? 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

  2. ruby - 字符串文字中的转义状态作为 `String#tr` 的参数 - 2

    对于作为String#tr参数的单引号字符串文字中反斜杠的转义状态,我觉得有些神秘。你能解释一下下面三个例子之间的对比吗?我特别不明白第二个。为了避免复杂化,我在这里使用了'd',在双引号中转义时不会改变含义("\d"="d")。'\\'.tr('\\','x')#=>"x"'\\'.tr('\\d','x')#=>"\\"'\\'.tr('\\\d','x')#=>"x" 最佳答案 在tr中转义tr的第一个参数非常类似于正则表达式中的括号字符分组。您可以在表达式的开头使用^来否定匹配(替换任何不匹配的内容)并使用例如a-f来匹配一

  3. ruby-on-rails - 应用程序的名称是否可以作为变量使用? - 2

    当我创建一个Rails应用程序时,控制台:railsnewfoo我的代码可以使用字符串“foo”吗?puts"Yourapp'snameis"+app_name_bar 最佳答案 Rails.application.class将为您提供应用程序的全名(例如YourAppName::Application)。从那里您可以使用Rails.application.class.parent获取模块名称。 关于ruby-on-rails-应用程序的名称是否可以作为变量使用?,我们在StackOve

  4. ruby-on-rails - 使用作为方法的值在 ruby​​ 中搜索哈希 - 2

    我在搜索我的值是方法的散列时遇到问题。我只是不想运行plan_type与键匹配的方法。defmethod(plan_type,plan,user){foo:plan_is_foo(plan,user),bar:plan_is_bar(plan,user),waa:plan_is_waa(plan,user),har:plan_is_har(user)}[plan_type]end目前如果我传入“bar”作为plan_type,所有方法都会运行,我怎么能只运行plan_is_bar方法呢? 最佳答案 这个变体怎么样?defmethod

  5. ruby - 无法在 Ruby 中将 ffmpeg 作为子进程运行 - 2

    我正在尝试使用以下代码通过将ffmpeg实用程序作为子进程运行并获取其输出并解析它来确定视频分辨率:IO.popen'ffmpeg-i'+path_to_filedo|ffmpegIO|#myparsegoeshereend...但是ffmpeg输出仍然连接到标准输出并且ffmepgIO.readlines是空的。ffmpeg实用程序是否需要一些特殊处理?或者还有其他方法可以获得ffmpeg输出吗?我在WinXP和FedoraLinux下测试了这段代码-结果是一样的。 最佳答案 要跟进mouviciel的评论,您需要使用类似pope

  6. ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2

    有没有办法跳过CSV文件的第一行,让第二行作为标题?我有一个CSV文件,第一行是日期,第二行是标题,所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组,我真的很想将其读取为CSV,以便我可以利用header。 最佳答案 根据您的数据,您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|

  7. ruby-on-rails - 看不懂Ruby的神奇 - 2

    在railscasts项目中你可以看到这段代码:before(:each)dologin_asFactory(:user,:admin=>true)end函数对应的定义是:Factory.define:userdo|f|f.sequence(:github_username){|n|"foo#{n}"}end我不明白admin参数是如何传递给函数的,而函数中没有关于admin参数的字样。谢谢 最佳答案 Factory.define不是一个函数定义,它是一个方法,它接受一个符号或字符串(在本例中是用户)和一个定义你正在制作的工厂的bl

  8. ruby-on-rails - 为什么 Rails 可以使用 `if` 作为哈希键但在 Ruby 中不能 - 2

    在纯Rubyirb中,不能输入{if:1}。该语句不会终止,因为irb认为if不是符号,而是if语句的开始。那么为什么Rails可以有before_filter接受if作为参数?该指南的代码如下:classOrderunless也会发生同样的事情。 最佳答案 这是一个irb问题,而不是Ruby。bash=>ruby-e"puts({if:1})"bash=#{:if=>1}您可以改用pry。它将正确读取输入。https://github.com/pry/pry 关于ruby-on-rai

  9. ruby 变量作为同一对象(指针?) - 2

    >>a=5=>5>>b=a=>5>>b=4=>4>>a=>5如何将“b”设置为实际的“a”,以便在示例中,变量a也将变为4。谢谢。 最佳答案 classRefdefinitializeval@val=valendattr_accessor:valdefto_s@val.to_sendenda=Ref.new(4)b=aputsa#=>4putsb#=>4a.val=5putsa#=>5putsb#=>5当您执行b=a时,b指向与a相同的对象(它们具有相同的object_id).当你执行a=some_other_thing时,a将指向

  10. ruby-on-rails - 安装 active admin 时 activeadmin.git (at master) is not yet checked out 错误 - 2

    Activeadmingem已添加到我的rails项目中,但每次我尝试安装railsgactive_admin:install时,我都会收到类似的错误git://github.com/activeadmin/activeadmin.git(atmaster)isnotyetcheckedout.Runbundleinstallfirst.我肯定在运行“railsgactive_admin:install”之前运行了bundle。运行“bundleshow”后,我看到我已将“*activeadmin(1.0.0.pre3f916d6)”添加到我的项目中,但不断收到此错误消息。我的gem文

随机推荐