如何监听页面 DOM 变动并高效响应

比来在做 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.onload=function(){

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

};

// HTML

< body onload="SomeJavaScriptCode">

// jQuery

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

</script>

当然，说到>

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 = { 
 
	
			 1/3    1 2 3 下一页 尾页	
			

　　推荐阅读
　　视频监控在智慧城市建设中的应用
            
            2015年全国两会上提出了“互联网+”概念使得聪明城市家当的搭建迎来了前所未竽暌剐的成长机会。中国在聪明城市上的投入早已跨越5000亿元，估计将来投资会上升到1.1万亿元，聪明>>>详细阅读


本文标题：如何监听页面 DOM 变动并高效响应
地址：http://www.17bianji.com/lsqh/36660.html
 1/2    1