监听dom元素发生变化

    我最近做一个项目，利用原生js自己封装下拉框组件时遇到一个问题。当下拉框的数据发生改变时我得把改变的数据显示在一个span标签内展示。而我封装的下拉框没有用到input标签，我是利用一个div元素做了一个。所以这就需要我去监听这个div元素。

    当时我在网上搜了一下，发现可以用 MutationObserver这个构造函数进行监听。

//监听控制类型内容发生改变 封装的函数
function domContentChange(){
	const targetNode = document.querySelector('.controlType');
	const observer = new MutationObserver((mutationsList, observer) => {
		for(let mutation of mutationsList) {
			console.log(mutation)
			if (mutation.type === 'childList') {
				console.log('文本内容发生变化:', mutation.target.innerHTML);
				switch(mutation.target.innerHTML){
					case '水闸':
						$('.sluicePara').show();
					break;
					case '水泵':
						$('.sluicePara').hide();
					break;
				}
			}
		}
	});
	const config = { attributes: true, childList: true, subtree: true, characterData: true };
	observer.observe(targetNode, config);
}

        这是我自己用来监听我封装的下拉框的组件的函数。 MutationObserver不仅可以监听DOM对象的子节点的变化（childList），还可以监听属性的变化（attributes）和后代节点的变化（subtree）。

上面的代码，大家可以参考参考。