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

示例代码：

 1 filterObserve: function(_id) {
 2         if ($("#"+_id+" form t-form-item").length<5) return null
 3         //选择一个需要观察的节点
 4         var targetNode = document.getElementById(_id);
 5 　　　　 // var targetNode = document.getElementsByClassName('query-searchBox')[0]//多页面
 6         // 设置observer的配置选项
 7         var config = { childList: true,attributes: false, subtree: true//, characterData: true
 8         };
 9 
10         // 当节点发生变化时的需要执行的函数
11         var callback = function(mutationsList, observer) {
12             for(var mutation of mutationsList) {
13                 if (mutation.type == 'childList') {
14                     // console.error('A child node has been added or removed.');
15                     // 已展开，直接不设最大高度（或者500）
16                     if ($(".searchBox-box .icon-retract")[0]) {
17                         $("#"+_id).css("max-height", 'unset')
18                     }
19                     else// 已折叠，只计算第一行的高度
20                     if ($(".searchBox-box .icon-retractno")[0]) {
21                         var mHeight = 0
22                         $("#"+_id+" form t-form-item").each((index, el)=>{// TODO,待优化，提示文字内容变化的情况下，怎么获取到变化前的高度？变化后大，则不再遍历；变化后小，则遍历
23                             if ($(el).find('t-form-explain')[0] && index<4) {
24                                 mHeight = Math.max(mHeight, $(el).find('t-form-explain').height())
25                             }
26                         })
27                         $("#"+_id).css("max-height", 36+mHeight+'px')//$("#querySearchBox").height()
28                     }
29                 }
30             }
31         };
32 
33         // 创建一个observer示例与回调函数相关联
34         var observer = new MutationObserver(callback);
35 
36         //使用配置文件对目标节点进行观测
37         observer.observe(targetNode, config);
38         return observer
39     },
40     filterDisObserve: function(observer) {
41         if (observer) observer.disconnect();
42     }

背景：

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

使用：

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

1 ngAfterViewInit() {
2     // this.toggleFilter()
3     this.filterObserver = ngtpAdapt.filterObserve("querySearchBoxCommonList")
4   }
5   ngOnDestroy() {
6     ngtpAdapt.filterDisObserve(this.filterObserver)
7   }

方案二：

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

 1 ngAfterViewInit() {
 2     this.toggleFilter()
 3     // this.filterObserver = ngtpAdapt.filterObserve("querySearchBoxCommonList")
 4   }
 5   // ngOnDestroy() {
 6   //   ngtpAdapt.filterDisObserve(this.filterObserver)
 7   // }
 8   toggleFilter() {
 9     ngtpAdapt.showHideFilter(this.showQueryMore=!this.showQueryMore)
10   }

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

IntersectionObserver