HTML5新特性之Mutation Observer

?

Mutation Observer(變動觀察器)是監視DOM變動的接口。當DOM對象樹發生任何變動時,Mutation Observer會得到通知。

要概念上,它很接近事件。可以理解為,當DOM發生變動會觸發Mutation Observer事件。但是,它與事件有一個本質不同:事件是同步觸發,也就是說DOM發生變動立刻會觸發相應的事件;Mutation Observer則是異步觸發,DOM發生變動以后,并不會馬上觸發,而是要等到當前所有DOM操作都結束后才觸發。

目前,Firefox(14+)、Chrome(26+)、Opera(15+)、IE(11+)和Safari(6.1+)支持這個API。Safari 6.0和Chrome 18-25使用這個API的時候,需要加上WebKit前綴(WebKitMutationObserver)。可以使用下面的表達式檢查瀏覽器是否支持這個API。

var MutationObserver = window.MutationObserver ||window.WebKitMutationObserver ||window.MozMutationObserver;var mutationObserverSupport = !!MutationObserver;

2、使用方法

首先,使用MutationObserver構造函數,新建一個實例,同時指定這個實例的回調函數。

var observer = new MutationObserver(callback);

2.1 observer方法

observer方法指定所要觀察的DOM元素,以及要觀察的特定變動。

復制代碼
var article = document.querySelector('article');var options = {'childList': true,'arrtibutes': true
};observer.observer(article, options);
復制代碼

上面代碼首先指定,所要觀察的DOM元素提article,然后指定所要觀察的變動是子元素的變動和屬性變動。最后,將這兩個限定條件作為參數,傳入observer對象的observer方法。

MutationObserver所觀察的DOM變動(即上面代碼的option對象),包含以下類型:

  • childList:子元素的變動
  • attributes:屬性的變動
  • characterData:節點內容或節點文本的變動
  • subtree:所有下屬節點(包括子節點和子節點的子節點)的變動

想要觀察哪一種變動類型,就在option對象中指定它的值為true。需要注意的是,不能單獨觀察subtree變動,必須同時指定childList、attributes和characterData中的一種或多種。

除了變動類型,option對象還可以設定以下屬性:

  • attributeOldValue:值為true或者為false。如果為true,則表示需要記錄變動前的屬性值。
  • characterDataOldValue:值為true或者為false。如果為true,則表示需要記錄變動前的數據值。
  • attributesFilter:值為一個數組,表示需要觀察的特定屬性(比如['class', 'str'])。

2.2 ?disconnect方法和takeRecord方法

disconnect方法用來停止觀察。發生相應變動時,不再調用回調函數。

observer.disconnect();

takeRecord方法用來清除變動記錄,即不再處理未處理的變動。

observer.takeRecord

2.3 MutationRecord對象

DOM對象每次發生變化,就會生成一條變動記錄。這個變動記錄對應一個MutationRecord對象,該對象包含了與變動相關的所有信息。Mutation Observer進行處理的一個個變動對象所組成的數組。

MutationRecord對象包含了DOM的相關信息,有如下屬性:

  • type:觀察的變動類型(attribute、characterData或者childList)。
  • target:發生變動的DOM對象。
  • addedNodes:新增的DOM對象。
  • removeNodes:刪除的DOM對象。
  • previousSibling:前一個同級的DOM對象,如果沒有則返回null。
  • nextSibling:下一個同級的DOM對象,如果沒有就返回null。
  • attributeName:發生變動的屬性。如果設置了attributeFilter,則只返回預先指定的屬性。
  • oldValue:變動前的值。這個屬性只對attribute和characterData變動有效,如果發生childList變動,則返回null。

3、實例

3.1 子元素的變動

下面的例子說明如果讀取變動記錄。

復制代碼
var callback = function(records) {records.map(function(record) {console.log('Mutation type: ' + record.type);console.log('Mutation target: ' + record.target);});
};var mo = new MutationObserver(callback);var option = {'childList': true,'subtree': true
};mo.observer(document.body, option);
復制代碼

上面代碼的觀察器,觀察body元素的所有下級元素(childList表示觀察子元素,subtree表示觀察子元素的下級元素)的變動。回調函數會在控制臺顯示所有變動的類型和目標元素。

3.2、屬性的變動

下面的例子說明如何追蹤屬性的變動。

復制代碼
var callback = function(records) {records.map(function(record) {console.log('Previous attribute value: ' + record.oldValue);});
};var mo = new MutationObserver(callback);var element = document.getElementById('#my_element');var option = {'attribute': true,'attributeOldValue': true
};mo.observer(element, option);
復制代碼

上面代碼先設定追蹤屬性變動('attributes': true),然后設定記錄變動前的值。實際發生變動時,會將變動前的值顯示在控制臺。

4、參考鏈接

[1] Tiffany Brown,?Getting to know mutation observers

[2] Michal Budzynski,?JavaScript: The less know parts.DOM Mutations

[3] Jeff Griffiths,?DOM MutationObserver - reacting to DOM changes without killing browser performance

[4] Ruanyf,?Mutation Observer

原文地址:http://www.cnblogs.com/jscode/p/3600060.html

轉載于:https://www.cnblogs.com/flxy-1028/p/10958176.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/393458.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/393458.shtml
英文地址,請注明出處:http://en.pswp.cn/news/393458.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

leetcode230. 二叉搜索樹中第K小的元素(中序遍歷)

給定一個二叉搜索樹,編寫一個函數 kthSmallest 來查找其中第 k 個最小的元素。說明: 你可以假設 k 總是有效的,1 ≤ k ≤ 二叉搜索樹元素個數。示例 1:輸入: root [3,1,4,null,2], k 13/ \1 4\2 輸出: 1解題思路 變量 cnt:統計已經按序遍…

Python操作MongoDB - 極簡教程

2019獨角獸企業重金招聘Python工程師標準>>> Python 連接 MongoDB 安裝PyMongo模塊 pip install pymongo使用MongoClient建立連接 from pymongo import MongoClient # 以下為三種建立連接的方式 #client MongoClient() #client MongoClient(localhost, 27017) #cl…

nuxt.js的核心代碼_Nuxt.js中的通用應用程序代碼結構

nuxt.js的核心代碼by Krutie Patel通過克魯蒂帕特爾(Krutie Patel) Nuxt.js中的通用應用程序代碼結構 (Universal application code structure in Nuxt.js) Nuxt.js中的源代碼結構的簡要摘要 (A brief summary of source code structure in Nuxt.js) Are you new to the Nuxt.…

java 省市區三級聯動_AJAX省市區三級聯動下拉菜單(java版)

此小程序的功能主要是采用異步請求方式從數據庫中調取省市區信息顯示到下拉列表:代碼如下:建立數據庫中的代碼和一些配置文件信息就省略了,主要有JavaScript中的代碼為:$(document).ready(function(){$.get("getProvince.do&…

20155305喬磊2016-2017-2《Java程序設計》第四周學習總結

20155305喬磊2016-2017-2《Java程序設計》第四周學習總結 教材學習內容總結 繼承 繼承就是避免多個類間重復定義共同行為。面向對象中,子類繼承父類,就是把程序中相同的代碼部分提升為父類。extends關鍵字,表示前者會擴充后者的行為&#xff…

leetcode29. 兩數相除(位運算)

給定兩個整數,被除數 dividend 和除數 divisor。將兩數相除,要求不使用乘法、除法和 mod 運算符。 返回被除數 dividend 除以除數 divisor 得到的商。 整數除法的結果應當截去(truncate)其小數部分,例如:…

【eclipse轉idea的第一天】配置idea

為什么80%的碼農都做不了架構師?>>> 導入maven項目 設置maven(全局) 為了不然才轉idea的碼友們重復我犯過的錯,我這兒截圖步驟說明下: 這里是列表文本這里是列表文本idea的設置有兩種:全局,局部(我這么叫的…

node.js web框架_使用Node.js進行Web爬取的終極指南

node.js web框架So what’s web scraping anyway? It involves automating away the laborious task of collecting information from websites.那么,什么是網絡抓取? 它涉及自動化從網站收集信息的艱巨任務。 There are a lot of use cases for web s…

java局部內部類 final_Java的局部內部類以及final類型的參數和變量

Thinking In Java里面的說法(***正確的說法): 如果定義一個匿名內部類,并且希望它使用一個在其外部定的對象,那么編譯器會要求其參數引用是final 的。publicclassTester {publicstaticvoidmain(String[] args) {A a newA();C c newC();c.shou…

Vmware 安裝虛擬工具 (二)

打開虛擬機,以root超級用戶登陸,菜單欄選擇虛擬機,install安裝虛擬機 拷貝虛擬工具到 在根目錄下建立文件夾,并將工具拷貝到該文件夾,例如vmtool 打開終端,進入該目錄開始安裝 如圖,進入目錄解壓…

git與svn的區別 ?Git 與 SVN那個更好?

git與svn的區別 : http://www.360doc.com/content/12/1228/20/11220452_256857021.shtml 在版本控制系統的選型上,是選擇Git還是SVN? 對于開源項目來說這不算問題。使用Git極大地提高了開發效率、擴大了開源項目的參與度、 增強了版本控制系統…

強化學習簡介

by ADL通過ADL Reinforcement Learning is an aspect of Machine learning where an agent learns to behave in an environment, by performing certain actions and observing the rewards/results which it get from those actions.強化學習是機器學習的一個方面&#xff0…

leetcode1111. 有效括號的嵌套深度(棧)

給你一個「有效括號字符串」 seq,請你將其分成兩個不相交的有效括號字符串,A 和 B,并使這兩個字符串的深度最小。 不相交:每個 seq[i] 只能分給 A 和 B 二者中的一個,不能既屬于 A 也屬于 B 。 A 或 B 中的元素在原字…

利用Arcgis for javascript API繪制GeoJSON并同時彈出多個Popup

1.引言 由于Arcgis for javascript API不可以繪制Geojson,并且提供的Popup一般只可以彈出一個,在很多專題圖制作中,會遇到不少的麻煩。因此本文結合了兩個現有的Arcgis for javascript API擴充庫,對其進行改造達到繪制Geojson并同…

java 線程簡介_java多線程介紹

java多線程介紹多線程的基本實現進程指運行中的程序,每個進程都會分配一個內存空間,一個進程中存在多個線程,啟動一個JAVA虛擬機,就是打開個一個進程,一個進程有多個線程,當多個線程同時進行,就…

webpack入門——構建簡易版vue-cli

用vue-cli1/2搭建一個vue項目時,可以看到有很多關于webpack配置的文件。我們不需要知道那些繁瑣的配置文件有什么作用,只需在控制臺輸入npm run dev,項目自動啟動,我們就可以愉快的寫業務代碼了。 雖然vue-cli幫我們做好了一切&am…

leetcode43. 字符串相乘

給定兩個以字符串形式表示的非負整數 num1 和 num2,返回 num1 和 num2 的乘積,它們的乘積也表示為字符串形式。 示例 1: 輸入: num1 “2”, num2 “3” 輸出: “6” 代碼 class Solution {public String multiply(String num1, String num2) {if(n…

作業二:個人博客作業內容:需求分析

作業二:個人博客作業內容:需求分析 怎樣與用戶有效溝通獲取用戶的真實需求?訪談,正式訪談系統分析員將提出一些事先準備好的具體問題;非正式訪談中,分析人員將提出一些用戶可以自由回答的開放性問題&#…

HBase數據備份及恢復(導入導出)的常用方法

一、說明 隨著HBase在重要的商業系統中應用的大量增加,許多企業需要通過對它們的HBase集群建立健壯的備份和故障恢復機制來保證它們的企業(數據)資產。備份Hbase時的難點是其待備份的數據集可能非常巨大,因此備份方案必須有很高的…

react和react2_為什么React16是React開發人員的福氣

react和react2by Harsh Makadia通過苛刻馬卡迪亞 為什么React16是React開發人員的福氣 (Why React16 is a blessing to React developers) Just like how people are excited about updating their mobile apps and OS, developers should also be excited to update their fr…