js检测dom变化的方法:MutationObserver

前言

检测一个原生dom的变化,如一个div的颜色,大小,所在位置,内部元素的属性是否变化,更深层dom树上的变化等等。

都可以使用一个window上暴露出来的一个api:MutationObserver

语法

官方地址:MutationObserver.MutationObserver() - Web API 接口参考 | MDN

使用new MutationObserver创建一个检测实例

需要传递一个配置参数:检测的范围

返回值为一个新的、包含监听 DOM 变化回调函数的 MutationObserver 对象。

function callback(mutationList, observer) {mutationList.forEach((mutation) => {switch (mutation.type) {case "childList":/* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与mutation.removedNodes */break;case "attributes":/* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，该属性之前的值为 mutation.oldValue */break;}});
}var targetNode = document.querySelector("#someElement");
var observerOptions = {childList: true, // 观察目标子节点的变化，是否有添加或者删除attributes: true, // 观察属性变动subtree: true, // 观察后代节点，默认为 false
};var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mutationObserve的使用</title>
</head>
<style>body{position: relative;}.box{position: absolute;width: 30px;height: 30px;background: red;}
</style>
<body><div class="box" id="box"></div><button id="btn">向右移动</button><script>const box = document.getElementById('box')const btn = document.getElementById('btn')box.style.left = '10px'box.style.top = '100px'const boxMutationObserveHandler = new MutationObserver(function(mutationList,observe){mutationList.forEach((mutation)=>{console.log(mutation,'节点信息')if(mutation.target.id === 'box'){console.log(mutation.target.style.left,'box的left变化')}})})boxMutationObserveHandler.observe(box,{subtree:true,childList:true,attributes:true})btn.onclick = ()=>{console.log('点击按钮')box.style.left = parseInt(box.style.left)+5+'px'}</script>
</body>
</html>

效果如下