2. 程式人生 > >科普一個監聽DOM的物件-MutationObserver

科普一個監聽DOM的物件-MutationObserver

阿新 • • 發佈：2018-12-29

介紹

MutationObserver給開發者們提供了一種能在某個範圍內的DOM樹發生變化時作出適當反應的能力.該API設計用來替換掉在DOM3事件規範中引入的Mutation事件.

以上這段引自權威牛逼的MDN。（懶得自己寫了…）

建立MutationObserver物件

var mo = new MutationObserver(
  function callback
);

引數只有一個，就是回撥函式(callback)，當MutationObserver監聽到目標變化時會觸發這個回撥。這個回撥引數會被傳遞兩個引數，第一個是包含了若干個變化目標的資訊的引數，這些資訊集合稱為

MutationRecord物件；第二個引數則是你建立的這個物件自身。

例項方法

1.observe()：

// 第一個引數是要監聽的DOM節點物件，第二是用於配置的物件
observe( Node, option);

其中option物件可配置是否監聽目標節點的子節點、是否監聽html屬性/文字等，可以檢視MutationObserverInit的詳細介紹

2. disconnect()
停止監聽。

3.takeRecords()
清空觀察者物件的記錄佇列,並返回裡面的內容

相容性

MutationObserver相容情況

一個例子

下面這個例子演示了如何定時插入節點並被監聽到，效果點選這裡可檢視：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MutationObserver demo</title>
</head>
<body>
    <
 
div id="info" style="color:brown; font-size: 20px;">正在監聽#wrap</div>
    <div id="wrap"></div>
    <script>
        var body = document.body;
        var info = document.getElementById('info');

        main();

        // 建立MutationObserver物件及其回撥
        function createMutationObserverObject(){
            var MutationObserver = window.MutationObserver ||
            window.WebKitMutationObserver ||
            window.MozMutationObserver;

            if(!MutationObserver){
                info.innerHTML = '您的瀏覽器不支援MutationObserver物件!';
                return false;
            }
            return new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    info.innerHTML = '監聽到DOM變化，新增元素的id: ' + mutation.addedNodes[0].id;
                });    
            });
        }

        // 使用MutationObserver物件的observe方法對目標節點監聽
        function listen(){
            var observer = createMutationObserverObject();
            if(!observer) return;
            observer.observe(wrap, { attributes: true, childList: true});
        }

        // 定時往目標節點新增元素檢視監聽情況
        function main(){
            listen();
            var count = 0;
            var listenDom = setInterval(function(){
                count++;
                var p = document.createElement('p');
                p.id = 'p' + count;
                p.innerText = "我的id是 p" + count;
                wrap.appendChild(p);
                if(count>=5){
                    clearInterval(listenDom);
                    //observer.disconnect();
                }
            }, 1500)
        }
    </script>
</body>
</html>

相關推薦

科普一個監聽DOM的物件-MutationObserver

介紹 MutationObserver給開發者們提供了一種能在某個範圍內的DOM樹發生變化時作出適當反應的能力.該API設計用來替換掉在DOM3事件規範中引入的Mutation事件. 以上這段引自權威牛逼的MDN。（懶得自己寫了…） 建立MutationObserv

監聽DOM變化

監聽 highlight pre brush get class scrip targe blog <input type="button" value="監聽dom變化" id="target"> <script> $("#target"

監聽域物件建立和銷燬的Listener

1.什麼是Servlet監聽器？ 先來看看什麼是監聽器。監聽器是專門用於對其它物件身上發生的事件或狀態改變進行監聽和相應處理的物件，當被監視的物件發生情況時立即採取相應的行動。Servlet監聽器是Servlet規範中定義的一種特殊類，它用於監聽web應用程式的ServletContext,HttpSess

angular監聽dom渲染完成，判斷ng-repeat迴圈完成

一、前言 最近做了一個圖片懶載入的小外掛，功能需要dom渲染完成後，好獲取那些需要懶載入的dom元素。那麼問題來了，如果只是感知靜態的dom用ready，onload都可以，但專案用的angular，ng-repeat什麼時候迴圈完，或者說angular自身的生命週期中dom渲染完成怎麼知道，這裡做個解決問

JavaWeb_監聽域物件建立和銷燬的Listener1一d物件

1簡介 監聽器：專門用於對其他物件身上發生的事件或狀態改變進行監聽和相應處理的物件，當被見識的物件發生情況時，立即採取相應的行動。 Servlet監聽器：Servlet規範中定義的一種特殊類，它用於監

監聽DOM操作事件

DOMNodeInserted 和 DOMNodeRemoved 事件 在DOM中可以通過DOMNodeInserted和DOMNodeRemoved這兩個事件來監視DOM元素的插入和移除。但由於各瀏覽器中DOM樹的處理方式不同，導致了這兩個事件在各個瀏覽器上

javascriptj監聽dom元素的變化

//js外掛監聽dom元素的大小變化： (function($, h, c) {var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j+ "

Vue使用watch監聽一個物件中的屬性

問題描述 Vue提供了一個watch方法可以讓使用者去監聽某些data內的資料變動，觸發相應的方法，比如 queryData: { name: '', creator: '', selectedStatus: '', t

vue之watch監聽物件或者一個值時注意事項（深度觀察deep:true慎用！）

vue中想在某個值改變的時候能夠做一些其他事情，可以使用其提供的監聽機制，使用watch。注意，本篇不講技術問題，只是講解如何應用，因為筆者也是一個前端的小白 例：經手專案中就有使用，截圖如下： 下面來分析上面分別是怎樣實現監聽的： 其實除了畫紅線的地方，別的都沒什

dom元素改變監聽

dom元素 options cal change bsp each fun 監聽 pass function domChange(domId, callback) { // select the target node v

IE與DOM的事件監聽

attach 事件監聽 不支持 cnblogs log ima 1-1 mage png IE 事件監聽 標準DOM不支持 註意幾點： window.onload attachEvent detachEvent 標準DOM監聽,ie不支

H5特性 MutationObserver 監聽元素 動態改變iframe高度

webkit chrom contents ram type element 特性 chrome span 這些代碼要寫在iframe頁中執行 <script type="text/javascript"> $(function

Dom監聽組合按鍵

如果 只需要 官網 spa Go http 方法 我沒 save 有些時候，我們需要在網頁上，增加一些快捷按鍵，方便用戶使用一些常用的操作，比如：保存，撤銷，復制、粘貼等等。 下面簡單梳理一下思路： 我們所熟悉的按鍵有這麽集中類型：

vue 監聽對象及對象屬性或某一個屬性

har log 監聽 vue 聲明 highlight watch 對象 sha 註意：監聽的對象必須已經在data中聲明了 //監聽某個變量 watch: { bet(newValue, oldValue) { console.log(newVa

spring cloud (六) 將一個普通的springcloud項目 非feign或ribbon項目，改造成turbine可聚合監聽的項目

static utf [] snapshot hello plugins reporting poi map 改造之前一個項目 service-a 1 pom.xml添加如下 <dependency> <groupId>or

一個類，有新增元素（add）和獲取元素數量（size）方法。 啟動兩個線程。線程1向容器中新增數據。線程2監聽容器元素數量，當容器元素數量為5時，線程2輸出信息並終止

override tac trace add syn countdown print import 數據 方式一： /** * 兩個線程要是可見的所以要加上votalile */public class Test_01 { public static void

dom監聽事件class

<!doctype html> <html> <head> <meta charset="utf-8"> <title>dom監聽事件class</title> <!--DOMNodeInserted 和 DOMNo

關於vue事件監聽的一個問題

而且 擁有 語言 輔助 solid return roc 要去 當我 由於新工作需要用vue，所以最近接觸最多的也是vue，因為之前一直在用react，所以對於vue上手還是很快的。我也盡量找一些他們兩個的異同點，除了多了一些輔助用的方法以外，最大的不同應該是對於組件間的通

JavaWeb監聽器簡單介紹及一個登陸監聽案例

版權宣告：本文為博主原創文章，未經博主允許不得轉載。https://blog.csdn.net/qq_38720976/article/details/84474950 監聽器基本概念 　　JavaWeb中的監聽器是Servlet規範中定義的一種特殊類，它用於監聽web應用程式中的Servl

Vue獲取dom和資料監聽

Vue獲取dom物件 在js和jq中我們都能獲取dom物件例如 // 獲取id=1的div標籤 <div id=d1>dom物件</div> // js語法 let ele = document.getElementById('d1') // jq語法 let ele = $('