MutationObserver监听dom元素结构及属性变化

　　工作中埋码需求，当某些动态插入的元素出现时触发埋码事件，因此需要对插入元素的父节点进行监听，子节点发生变化时触发相应埋码逻辑。

　　方法一 监听页面结构及子元素变化：

(function () {
    //事件触发时执行埋码内容
    function do_track() {
        if ($("#LXB_CONTAINER > ins.lxb-cb-tip.lxb-cb-tip-feedback > ins.lxb-cb-tip-con > ins.success-tip-phone") && eventflag) {
            //触发事件
            eventflag = false;
            if (timer) { clearInterval(timer) }
        }
    }
    try {
        var eventflag = true;
        var message_box = document.querySelector("#va");
        //以下代码为监控整个Body元素的变化
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
        if (MutationObserver) {
            var MutationObserverConfig = {
                childList: true,
                subtree: true,
            };
            var observer = new MutationObserver(function (mutations) {
                do_track();
            });
            observer.observe(message_box, MutationObserverConfig);
        }
        else if (message_box.addEventListener) {
            message_box.addEventListener("DOMSubtreeModified", function (evt) {
                do_track();
            }, false);
        }else {
            var timer = setInterval(function () {
            do_track();
            }, 1000)
        }
    } catch (error) {
 
    }
})()

  方法二 监听元素属性值的变化触发相应逻辑：

try{
	//Watch Elements and Trigger Event
	var observer = new MutationObserver(function(mutations){
		console.log(mutations)
		var isShowOnetimeCheck = [];
		//get lastone in mutations
		var mutaiton = mutations[mutations.length-1];
		//event name & content Dict list
		var eventNameDict = {"pattern01":{"show":"sssss","click":"dddddd"},"pattern02":{"show":"eeeee","click":"ffff"},"pattern03":{"show":"gggg","click":"qqqq"}};
		var patternName = mutaiton.target.className.split(" ")[0];
		var eventNameObj = eventNameDict[patternName];
		console.log("patternName:"+mutaiton.target.className.split(" ")[0])
			var buttonImg = mutaiton.target.querySelector("div.check_contents.active > div > a > img");
			if(buttonImg && eventNameObj && mutaiton.target.className.includes("active") && !isShowOnetimeCheck.includes(mutaiton.target.className)){
				setTimeout(function(){
					//触发事件
				},2500)
				$(document.querySelector("div.check_contents.active > div > a > img").parentElement).off("click").on("click",function(){
				 //触发事件
                    isShowOnetimeCheck.push(mutaiton.target.className);
				})
			}

		//mutations.querySelector("div.check_contents.active > div > a > img").getAttribute("alt")
	});
	/** 所监听变化元素的父节点*/
	var elem = document.querySelector('#template > div.check_container > div.check_after');

	/** 监听设置
        *childList：子节点的变动（指新增，删除或者更改）。
        *attributes：属性的变动。
        *characterData：节点内容或节点文本的变动。
        *subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。
        *attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。
        *characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。
        *attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）
        */
	var config = {
		attributes: true,
		attributeFilter : ['class'],
		childList: true,
		subtree:true,
		characterData: true,
		characterDataOldValue: true,
	};
	/** 元素与监听设置绑定 */
	observer.observe(elem, config);
}catch(e){
	console.log("ptmessage:"+e);
}