MutationObserver监听DOM结构变化

前面有IntersectionObserver观察器实现页面懒加载的功能，原理就是观察dom是否进入视口。那么如果不管是否可见或者要实现随时监听，则需要使用MutationObserver。

示例代码：

filterObserve: function(_id) {
        if ($("#"+_id+" form t-form-item").length<5) return null
        //选择一个需要观察的节点
        var targetNode = document.getElementById(_id);
　　　　 // var targetNode = document.getElementsByClassName('query-searchBox')[0]//多页面
        // 设置observer的配置选项
        var config = { childList: true,attributes: false, subtree: true//, characterData: true
        };

        // 当节点发生变化时的需要执行的函数
        var callback = function(mutationsList, observer) {
            for(var mutation of mutationsList) {
                if (mutation.type == 'childList') {
                    // console.error('A child node has been added or removed.');
                    // 已展开，直接不设最大高度（或者500）
                    if ($(".searchBox-box .icon-retract")[0]) {
                        $("#"+_id).css("max-height", 'unset')
                    }
                    else// 已折叠，只计算第一行的高度
                    if ($(".searchBox-box .icon-retractno")[0]) {
                        var mHeight = 0
                        $("#"+_id+" form t-form-item").each((index, el)=>{// TODO,待优化，提示文字内容变化的情况下，怎么获取到变化前的高度？变化后大，则不再遍历；变化后小，则遍历
                            if ($(el).find('t-form-explain')[0] && index<4) {
                                mHeight = Math.max(mHeight, $(el).find('t-form-explain').height())
                            }
                        })
                        $("#"+_id).css("max-height", 36+mHeight+'px')//$("#querySearchBox").height()
                    }
                }
            }
        };

        // 创建一个observer示例与回调函数相关联
        var observer = new MutationObserver(callback);

        //使用配置文件对目标节点进行观测
        observer.observe(targetNode, config);
        return observer
    },
    filterDisObserve: function(observer) {
        if (observer) observer.disconnect();
    }

背景：

监听搜索框内的dom变化，以便动态调整框的高度。因为有展开和折叠的功能，所以使用动态调整高度的方案（也可以通过显示或隐藏可折叠区来控制，如此一来就不需要关心高度计算问题了，相对更加合理，后边有该方案的改法）。

使用：

在页面dom加载完成后建立观察者，在页面销毁时进行注销

ngAfterViewInit() {
    // this.toggleFilter()
    this.filterObserver = ngtpAdapt.filterObserve("querySearchBoxCommonList")
  }
  ngOnDestroy() {
    ngtpAdapt.filterDisObserve(this.filterObserver)
  }

方案二：

去除高度限制，在展开折叠时控制第4项之后的表单元素的显隐

ngAfterViewInit() {
    this.toggleFilter()
    // this.filterObserver = ngtpAdapt.filterObserve("querySearchBoxCommonList")
  }
  // ngOnDestroy() {
  //   ngtpAdapt.filterDisObserve(this.filterObserver)
  // }
  toggleFilter() {
    ngtpAdapt.showHideFilter(this.showQueryMore=!this.showQueryMore)
  }

showHideFilter: function(bol) {
        $(".query-searchBox form t-form-item").each((index, el)=>{
            if (index>3) {
                $(el)[bol?'show':'hide']()
            }
        })
    }

 

补充：

config 是一个具有布尔选项的对象，该布尔选项表示“将对哪些更改做出反应”：

• childList —— node 的直接子节点的更改，
• subtree —— node 的所有后代的更改，
• attributes —— node 的特性（attribute），
• attributeFilter —— 特性名称数组，只观察选定的特性。
• characterData —— 是否观察 node.data（文本内容），

其他几个选项：

• attributeOldValue —— 如果为 true，则将特性的旧值和新值都传递给回调（参见下文），否则只传新值（需要 attributes 选项），
• characterDataOldValue —— 如果为 true，则将 node.data 的旧值和新值都传递给回调（参见下文），否则只传新值（需要 characterData 选项）。

然后，在发生任何更改后，将执行“回调”：更改被作为一个 MutationRecord 对象列表传入第一个参数，而观察器自身作为第二个参数。

MutationRecord 对象具有以下属性：

• type —— 变动类型，以下类型之一：
  • "attributes"：特性被修改了，
  • "characterData"：数据被修改了，用于文本节点，
  • "childList"：添加/删除了子元素。
• target —— 更改发生在何处："attributes" 所在的元素，或 "characterData" 所在的文本节点，或 "childList" 变动所在的元素，
• addedNodes/removedNodes —— 添加/删除的节点，
• previousSibling/nextSibling —— 添加/删除的节点的上一个/下一个兄弟节点，
• attributeName/attributeNamespace —— 被更改的特性的名称/命名空间（用于 XML），
• oldValue —— 之前的值，仅适用于特性或文本更改，如果设置了相应选项 attributeOldValue/characterDataOldValue。

有一个方法可以停止观察节点：

• observer.disconnect() —— 停止观察。

当我们停止观察时，观察器可能尚未处理某些更改。在种情况下，我们使用：

• observer.takeRecords() —— 获取尚未处理的变动记录列表，表中记录的是已经发生，但回调暂未处理的变动。

这些方法可以一起使用