你想知道页面上的某个元素什么时候被偷偷改了吗？比如有个熊孩子脚本悄悄改了你的广告位，或者某个懒加载图片终于加载完了？今天我们就来请一位“卧底”——MutationObserver，让它24小时盯着DOM树，任何变化dou逃不过它的眼睛。

MutationObserver是一个构造函数，用来创建一个观察者对象。你Ke以给它指定一个回调函数，然后让它去“盯”某个DOM节点。一旦这个节点或它的子孙节点发生变化，回调函数就会被触发。

这就是MutationObserver的活。它是浏览器提供的一个API，专门用来监听DOM树的变化：节点增删、属性修改、文本内容改变……统统Neng抓到。而且它不会像setInterval那样一直轮询，性Neng好得多。

说实话，MutationObserver这个名字有点长，咱就是说你第一次kan到是不是有点懵？但用起来其实hen简单。

// 创建一个观察者实例，传入回调 const observer = new MutationObserver => { for { console.log; } }); // 指定要观察的节点 const targetNode = document.getElementById; // 开始观察 observer.observe(targetNode, { attributes: true, // 观察属性变化 childList: true, // 观察子节点增删 subtree: true, // 观察所有后代节点 characterData: true // 观察文本内容变化 }); // 某天不想观察了 // observer.disconnect;

哈哈，是不是hen简单？你只要创建一个observer，然后告诉它要盯着谁、盯什么就行了。

配置选项决定了你关心哪些“风吹草动”：

childList: 子节点的增删。

attributes: 属性的变化。

characterData: 文本节点内容的变化。

subtree: 是否连同后代节点一起监视。

attributeFilter: 只关心某些属性。不设置就监听所有属性。

hen多懒加载库用IntersectionObserver，但Ru果你想知道图片什么时候被添加到DOM，Ke以用MutationObserver。

hen多网站会在页面上放广告，但有些恶意脚本会偷偷把广告位换成自己的内容。用MutationObserverKe以第一时间发现并报警。

<div id="ad-container">  
<img src="real-ad.jpg" alt="官方广告">
</div>

const adContainer = document.getElementById; const observer = new MutationObserver => { mutations.forEach => { if { // 子节点被改了 console.warn; // Ke以上报服务器，或者恢复内容 } else if { console.warn; } }); }); observer.observe(adContainer, { childList: true, subtree: true, attributes: true, attributeFilter: });

为啥要用subtree: true? 因为广告容器里的<img>, <a>, 这些dou是它的子孙节点，不开subtree, 就只Neng检测容器本身的变化。

input事件Yi经Neng监听输入框变化，但MutationObserverKe以监听geng底层的文本节点变化，比如通过JS直接修改.value，input事件可Neng不触发，但MutationObserverKe以。

<input id="username" type="text">

const input = document.getElementById; const observer = new MutationObserver => { mutations.forEach => { if { console.log; } }); }); observer.observe(input, { attributes: true, attributeFilter: });

为啥非要用MutationObserver呢？你可Neng会问：直接用setInterval`轮询检查不行吗？性Neng太差了吧。老哥，你这么Zuo浏览器会哭的！ 害，那为啥不用setTimeout`递归调用呢？理论上Ke以但还是那个问题——间隔太短还是浪费性Neng，间隔太长反应又太慢。 咱就是说有现成的异步且高效的API，为啥不用呢？😄 顺便说个题外话，你有没有遇到过“为什么百度不收录我的网站”这个问题？ 其实原因有hen多，比如网站结构问题、内容质量、外部链接等等。 有的人说是因为robots.txt没写好，也有的人说是网站加载太慢... 得具体问题具体分析。 比如Ru果你的网站内容重复度太高，可Neng就不会被收录。 还有啊，Ru果你频繁改动网页，也可Neng导致搜索引擎暂时不收录你的网页。 五、“智Neng监控”新玩法 假设你开了一家便利店，店里装了监控。你想知道：什么时候有人进来？什么时候货架上的商品被拿走了？什么时候价格标签被换了？ 普通的监控只Neng录像，但你需要的是“智Neng警报”——一有变化就通知你。

const observer = new MutationObserver =>{
   mutations.forEach =>{
     mutation.addedNodes.forEach =>{
       if  {
         console.log;
         // Ke以在这里Zuo懒加载初始化
       }
     });
   });
 });
observer.observe(document.body, {
   childList: true,
   subtree: true 
});