比來在做 chrome 插件開辟，既然是插件那就不免紕謬現有頁面做一些控制，比如事宜監聽、調劑構造、對 DOM 元素的增刪改查等等。個中有一個需求比較有意思，便整頓一基層便把涉及到的常識點復習一遍。

大年夜 DOM 更改事宜監據說起

起首假設大年夜家已經知道 JavaScript 中事宜的產生階段(捕獲-射中-冒泡)，附上一張圖帶過這個內容，我們直接進入尋找解決辦法的過程。

Graphical representation of an event dispatched in a DOM tree using the DOM event flow

開端的時刻我一向在 window 狀況改變涉及到的事宜中尋找，一圈搜尋下來發明也就>

window.addEventListener("load",function(event)?{

console.log("All?resources?finished?loading!");

});

//?or

window.οnlοad=function(){

console.log("All?resources?finished?loading!");

};

//?HTML

//?jQuery

$(?window?).on("load",?handler?)

當然，說到>

let?observer?=?new?MutationObserver(callback);

不雅察器實例應用 observe 辦法來監聽， disconnect 辦法停止監聽，takeRecords 辦法來清除更改記錄。let?article?=?document.body;

let??options?=?{

'childList':true,

'attributes':true

}?;

observer.observe(article,?options);

observe 辦法中第一個參數是所要不雅察的更改 DOM 元素，第二個參數則接收所要不雅察的更改類型(子節點更改和屬性更改)。更改類型包含以下幾種：childList：子節點的更改。

attributes：屬性的更改。

characterData：節點內容或節點文本的更改。

subtree：所有后代節點的更改。

想要不雅察哪一種更改類型，就在 option 對象中指定它的值為 true。須要留意的是，如不雅設置不雅察 subtree 的更改，必須同時指定 childList、attributes 和 characterData 中的一種或多種。disconnect 辦法和 takeRecords 方軌則直接調用即可，無傳入參數。

好的，我們已經搞定了 DOM 更改的監聽，將代碼刷新一下看下效不雅吧，因為頁面由很多動態生成的商品構成，那么我應當在 body 上添加更改監聽，所以 options 應當如許設置：var?options?=?{

推薦閱讀

2015年全國兩會上提出了“互聯網+”概念使得聰明城市家當的搭建迎來了前所未竽暌剮的成長機會。中國在聰明城市上的投入早已跨越5000億元，估計將來投資會上升到1.1萬億元，聰明>>>詳細閱讀

地址：http://www.17bianji.com/lsqh/36660.html

總結

以上是生活随笔為你收集整理的监听 html dom 变化,如何监听页面 DOM 变动并高效响应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。