JavaScript 检测 DOM 变化（监听 dom 高度变化）

最新推荐文章于 2024-07-24 03:12:57 发布

一拖再拖一拖再拖

最新推荐文章于 2024-07-24 03:12:57 发布

阅读量5.3k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41974199/article/details/114404107

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JavaScript 检测 DOM 变化

需要JavaScript MutationObserver 来检测dom变化。

API：`MutationObserver`

MutationObserver 包含三种方法：

disconnect()：防止MutationObserver实例继续接收通知，直到再次调用其 observe() 方法，并且不会再次调用观察者对象中包含的某些函数为止。
observe()：将MutationObserver配置为在DOM更改与给定选项匹配时开始通过其替换功能接收通知。
takeRecords()：从MutationObserver的通知对象中删除所有待处理的通知，并将它们返回到MutationRecord对象的新数组。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="ji">检测此节点的变动</div>
    <script>
        let ji = document.getElementById("ji");
        
        let observe = new MutationObserver(function (mu, ob) {
            console.log("DOM被更新了");
        })
        observe.observe(ji, { attributes: true, childList: true, subtree: true });

        setTimeout(() => {
        
            ji.setAttribute("style", "color:red");
            
            // 停止监听
			observer.disconnect();
			
        }, 2000)
    </script>
</body>

</html>

方法：`mutationObserver.observe(target[, options])`:

target：DOM树中的一个DOM节点（可能是一个元素）可以观察更改，或者子节点树的根节点可以观察到变化。
options：可选的MutationObserverInit对象。该对象的配置项描述了回调，该回调应将DOM中的某些更改提供给当前的观察者。（调用 observe() 方法时，childList，attributes 或者 characterData 的三个属性中的至少一个必须为true，否则将引发TypeError异常。）

拓展：监听/获取 DOM 高度 `getBoundingClientRect`


let setin = setInterval(() => {
	let domtop = document.getElementById("ji").getBoundingClientRect().top;
	if(domtop<1){
		clearInterval(setin);
	}
},500)