MutationObserver監(jiān)視對(duì)DOM?樹(shù)所做更改的功能妙用
前言
上一篇給大家講解了關(guān)于IntersectionObserver的使用。 這一篇給大家講解一下MutationObserver的使用。
使用場(chǎng)景
首先關(guān)于MutationObserver的作用就是監(jiān)視對(duì)DOM所做更改的能力,那么他的使用面就特別的廣泛了,比如組件的自適應(yīng),垃圾回收,還有就是在不支持prmose的場(chǎng)景下實(shí)現(xiàn)異步完成函數(shù),防止用戶用devtools工具修改一些樣式,如:通過(guò)修改css或刪除標(biāo)簽去除圖片水印等。
當(dāng)然只要是設(shè)計(jì)到DOM變動(dòng)的MutationObserver都能幫你一些忙。
書寫格式
老規(guī)矩還是先放鏈接MutationObserver - Web API 接口參考 | MDN (mozilla.org)
首先MutationObserver同樣也是監(jiān)聽(tīng)一個(gè)Node節(jié)點(diǎn),然后通過(guò)相關(guān)的配置項(xiàng) 設(shè)置監(jiān)聽(tīng)的范圍,當(dāng)范圍內(nèi)的相關(guān)屬性發(fā)生變化,便會(huì)觸發(fā)MutationObserver的回調(diào)函數(shù)。
var observer = new MutationObserver(callback);
相關(guān)方法
observe
mutationObserver.observe(target[, options])
target即我們要監(jiān)聽(tīng)的Node節(jié)點(diǎn),options即為配置項(xiàng)。
options屬性有以下幾個(gè)(我寫的簡(jiǎn)短一點(diǎn),詳細(xì)請(qǐng)點(diǎn)擊鏈接看文檔):
- subtree : true, ----將會(huì)監(jiān)聽(tīng)以 target為根節(jié)點(diǎn)的整個(gè)子樹(shù)。包括子樹(shù)中所有節(jié)點(diǎn)的屬性,而不僅僅是針對(duì)target。
- childList: true, ----監(jiān)聽(tīng) target 節(jié)點(diǎn)中發(fā)生的節(jié)點(diǎn)的新增與刪除(同時(shí),如果 subtree 為 true,會(huì)針對(duì)整個(gè)子樹(shù)生效)。
- attributes : true,----觀察所有監(jiān)聽(tīng)的節(jié)點(diǎn)屬性值的變化。默認(rèn)值為 true,當(dāng)聲明了 attributeFilter或 attributeOldValue,默認(rèn) 值則為 false。
- characterData : true,----監(jiān)聽(tīng)聲明的target 節(jié)點(diǎn)上所有字符的變化,如果聲明了characterDataOldValue,默認(rèn)值則為 false
- attributeOldValue : true,---記錄上一次被監(jiān)聽(tīng)的節(jié)點(diǎn)的屬性變化。
- characterDataOldValue : true----當(dāng)為 true 時(shí),記錄前一個(gè)被監(jiān)聽(tīng)的節(jié)點(diǎn)中發(fā)生的文本變化。
disconnect()
mutationObserver.disconnect()
disconnect方法告訴觀察者停止觀察變動(dòng)??梢酝ㄟ^(guò)調(diào)用其 observe() 方法來(lái)重用觀察者。()意思就是停止監(jiān)聽(tīng))
takeRecords
mutationRecords = mutationObserver.takeRecords()
takeRecords方法返回已檢測(cè)到但尚未由觀察者的回調(diào)函數(shù)處理的所有匹配 DOM 更改的列表,使變更隊(duì)列保持為空。此方法最常見(jiàn)的使用場(chǎng)景是在斷開(kāi)觀察者之前立即獲取所有未處理的更改記錄,以便在停止觀察者時(shí)可以處理任何未處理的更改。
MutationRecord對(duì)象
DOM每次發(fā)生變化,就會(huì)生成一條變動(dòng)記錄(MutationRecord實(shí)例)。該實(shí)例包含了與變動(dòng)相關(guān)的所有信息。MutationObserver處理的就是一個(gè)個(gè)MutationRecord實(shí)例組成的數(shù)組。
MutationRecord包含了Dom的有關(guān)信息,有以下屬性:
- type:觀察變動(dòng)的類型,即原因(attribute、characterData或者childList等)
- target : 發(fā)生變動(dòng)的DOM節(jié)點(diǎn)
- addedNodes :返回新增的DOM節(jié)點(diǎn),如果沒(méi)有則為空(null)。
- removedNodes : 返回刪除的DOM節(jié)點(diǎn),如果沒(méi)有則為空(null)。
- previousSibling :返回被添加或移除的節(jié)點(diǎn)之前的兄弟節(jié)點(diǎn),或者 null。即上一個(gè)兄弟節(jié)點(diǎn)
- nextSibling : 返回被添加或移除的節(jié)點(diǎn)之后的兄弟節(jié)點(diǎn),或者 null。即下一個(gè)兄弟節(jié)點(diǎn)
- attributeName:返回被修改的屬性的屬性名,或者 null。
- oldValue:這個(gè)屬性只對(duì)attribute和characterData變動(dòng)生效,如果發(fā)生childList變動(dòng),則返回null。
案例
一、
去除水印的操作(這里只講下原理、概念),原理就是通過(guò)監(jiān)聽(tīng)節(jié)點(diǎn)的屬性和后代節(jié)點(diǎn)和屬性,來(lái)實(shí)現(xiàn)無(wú)法去除的效果,簡(jiǎn)單案例
// 選擇需要觀察變動(dòng)的節(jié)點(diǎn) const ul = document.querySelector('ul'); // 觀察器的配置(需要觀察什么變動(dòng)) const config = { 'childList': true, 'subtree': true ,'attributes':true}; // 當(dāng)觀察到變動(dòng)時(shí)執(zhí)行的回調(diào)函數(shù) const callback = function(mutationsList, observer) { console.log(111); console.log(mutationsList,observer); }; // 創(chuàng)建一個(gè)觀察器實(shí)例并傳入回調(diào)函數(shù) const observer = new MutationObserver(callback); // 以上述配置開(kāi)始觀察目標(biāo)節(jié)點(diǎn) observer.observe(ul, config); const btn =document.querySelector('button') console.log(li); btn.addEventListener('click',()=>{ ul.style.background='pink' }) // // 之后,可停止觀察 // observer.disconnect();
無(wú)論我通過(guò)控制臺(tái)去刪除 ul中的li(子代)標(biāo)簽還是改變ul的相關(guān)屬性或li(子代)的屬性 或者添加li操作。MutationObserver根據(jù)配置項(xiàng)監(jiān)聽(tīng),觸發(fā)回調(diào)函數(shù)。這也就是為什么通過(guò)一些方法想去去除水印。會(huì)發(fā)現(xiàn)刪不掉的原因。
注:style樣式只有內(nèi)聯(lián)樣式才可以觸發(fā)。CSS選擇器是無(wú)法觸發(fā)的。
操作相關(guān)觸發(fā)結(jié)果:
二、
如面試題:異步完成一個(gè)函數(shù),并盡量將任務(wù)放在微任務(wù)中。 異步完成函數(shù)的原理,因?yàn)镸utationObserver實(shí)例的callback回調(diào)函數(shù)與IntersectionObserver一樣都為異步,這是W3C規(guī)定的。而且回調(diào)函數(shù)為微任務(wù)。
此處characterData:true,對(duì)應(yīng)的就是節(jié)點(diǎn)字符發(fā)生變化。
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' //都不支持則放入定時(shí)器 }else{ setTimeout(fun) } }
三、
在vue的nextTick源碼中也用到了MutationObserver來(lái)實(shí)現(xiàn)異步調(diào)度機(jī)制,同上面的面試題類似。
總結(jié)
在我們?nèi)粘i_(kāi)發(fā)中,可以用到MutationObserver的地方是特別特別多的。這是一個(gè)必會(huì)的技巧,我這里只是寫了一些基礎(chǔ)用法,大家還是要多看文檔多用才能夠靈活運(yùn)用。
切記多看文檔?。?!
再放一遍鏈接,MutationObserver - Web API 接口參考 | MDN (mozilla.org)
以上就是MutationObserver監(jiān)視對(duì)DOM 樹(shù)所做更改的功能妙用的詳細(xì)內(nèi)容,更多關(guān)于MutationObserver監(jiān)視DOM 樹(shù)更改的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序?qū)崿F(xiàn)流程進(jìn)度的圖樣式功能
最近正在做微信小程序,需要實(shí)現(xiàn)一個(gè)流程進(jìn)度的圖樣式,下面小編給大家?guī)?lái)了微信小程序?qū)崿F(xiàn)流程進(jìn)度的圖樣式功能實(shí)例代碼,需要的朋友參考下吧2018-01-01ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能示例
這篇文章主要介紹了ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能,結(jié)合實(shí)例形式分析了ES6中Set數(shù)據(jù)結(jié)構(gòu)的相關(guān)函數(shù)與實(shí)現(xiàn)數(shù)組交集、并集、差集的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫
本篇文章主要介紹了詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫 ,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-12-12小程序中使用css var變量(使js可以動(dòng)態(tài)設(shè)置css樣式屬性)
這篇文章主要介紹了小程序中使用css var變量,使js可以動(dòng)態(tài)設(shè)置css樣式屬性,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03詳解webpack import()動(dòng)態(tài)加載模塊踩坑
這篇文章主要介紹了詳解webpack import()動(dòng)態(tài)加載模塊踩坑,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07javascript如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解
這篇文章主要介紹了javascript如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07帶你領(lǐng)略O(shè)bject.assign()方法的操作方式
這篇文章主要介紹了帶你領(lǐng)略O(shè)bject.assign()方法的操作方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08如何在微信小程序?qū)崿F(xiàn)一個(gè)幸運(yùn)轉(zhuǎn)盤小游戲
這篇文章主要給大家介紹了關(guān)于如何在微信小程序?qū)崿F(xiàn)一個(gè)幸運(yùn)轉(zhuǎn)盤小游戲的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04