js中检测dom节点属性、class名称、内容等变化

js中检测dom节点属性、class名称、内容等变化

MutationObserver的使用

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分。

// 选择需要观察变动的节点 const targetNode = document.getElementById('some-id'); // 观察器的配置(需要观察什么变动) const config = { attributes: true, childList: true, subtree: true }; // 当观察到变动时执行的回调函数 const callback = function(mutationsList, observer) { // Use traditional 'for loops' for IE 11 for(let mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } }; // 创建一个观察器实例并传入回调函数 const observer = new MutationObserver(callback); // 以上述配置开始观察目标节点 observer.observe(targetNode, config); // 之后,可停止观察 observer.disconnect();
例如,检测dom节点class类名的改变
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.box{
			background: red;
			width: 500px;
			height: 200px;
			line-height: 200px;
			text-align: center;
			color: #FFFFFF;
			margin-bottom: 50px;
		}
	</style>
</head>
<body>
	<div id="box" class="box">我是box</div>
	<button type="button" onclick="addClass()">点击</button>
	<script>
		var el = document.getElementById("box");
		function addClass(){
			el.classList.add('active');
		}
		// 选择需要观察变动的节点
		const targetNode = document.getElementById('box');
		
		// 观察器的配置(需要观察什么变动)
		const config = { attributes: true, childList: true, subtree: true };
		
		// 当观察到变动时执行的回调函数
		const callback = function(mutationsList, observer) {
		    // Use traditional 'for loops' for IE 11
		    for(let mutation of mutationsList) {
		        if (mutation.type === 'childList') {
					
		        }
		        else if (mutation.type === 'attributes') {//属性改变了
		            console.log(mutation);
					let classList = el.classList;
					console.log(classList);
		        }
		    }
		};
		
		// 创建一个观察器实例并传入回调函数
		const observer = new MutationObserver(callback);
		
		// 以上述配置开始观察目标节点
		observer.observe(targetNode, config);
		
		// 之后,可停止观察
		//observer.disconnect();
	</script>
</body>
</html>

点击按钮,观察器会触发callback回调,我们可以在对应的变更类型判断里,对事件进行相应的处理