H5新特性MutationObser监听标签中属性的改变或者标签的添加删除事件

---

MutationObser

Mutation Observer API 用来监视 DOM 变动。比如节点的增减、属性的变动、文本内容的变动。

observe方法

MutationObserver使用observe方法进行监听指定的元素节点变化，observe方法接受两个参数：observe(DOM,option) 。下面是option设置的一些属性

属性	描述	类型
childList	子节点的变动（指新增，删除或者更改）	Boolean
attributes	属性的变动	Boolean
characterData	节点内容或节点文本的变动	Boolean
subtree	表示是否将该观察器应用于该节点的所有后代节点	Boolean
attributeOldValue	表示观察attributes变动时，是否需要记录变动前的属性值	Boolean
characterDataOldValue	表示观察characterData变动时，是否需要记录变动前的值	Boolean
attributeFilter	表示需要观察的特定属性	Array，如[‘class’,‘src’]

disconnect方法

当不需要监听节点变化时，可以使用disconnect()方法取消监听。

takeRecords方法

takeRecords方法用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。

MutationRecord对象

DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。

MutationRecord对象包含了DOM的相关信息，有如下属性：

属性	Value
type	观察的变动类型（attribute、characterData或者childList）
target	发生变动的DOM节点
addedNodes	新增的DOM节点
removedNodes	删除的DOM节点
previousSibling	前一个同级节点，如果没有则返回null
nextSibling	下一个同级节点，如果没有则返回null
attributeName	发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性
oldValue	变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null

下面为示例：

var mutationObserver = new MutationObserver(function(mutations) {
        /************************当DOM元素发送改变时执行的函数体***********************/
        if($(mutations[0].target).hasClass("active") && $(mutations[0].target).attr("aria-expanded") === "false"){
            $(mutations[0].target).attr("aria-expanded","true");
        }
        /*********************函数体结束*****************************/
    });
    //mutationObserver.observe(监听对象,监听操作)
$(".nav-left-sidebar ul.navbar-nav").each(function(){
        $(this).find(".parent-nav >a").each(function () {
            mutationObserver.observe(this, {
                attributes: true,
            });
        })
    })

总结

提示：var test = new MutationObserver(回调函数)；
test.observe(DOM,option);