html监听 --- 监听html文档结构变化

/*
config属性
    childList：子元素的变动
    attributes：属性的变动
    characterData：节点内容或节点文本的变动
    subtree：所有下属节点（包括子节点和子节点的子节点）的变动
    attributeFilter: 监听制定属性[attrName]    
record属性
    type:观察的变动类型（attribute、characterData或者childList）。
    target:发生变动的DOM对象。
    addedNodes:新增的DOM对象。
    removeNodes:删除的DOM对象。
    previousSibling:前一个同级的DOM对象，如果没有则返回null。
    nextSibling:下一个同级的DOM对象，如果没有就返回null。
    attributeName:发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
    oldValue:变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
    
observer.disconnect();  //停止监听观察
observer.takeRecord();  //清除历史监听记录
*/
function monitor(id,method){
    let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;//浏览器兼容
    let config = { attributes: true, childList: true,subtree:true}//配置对象
    $(`#${id}`).each(function(){
       let _this = $(this);
       let observer = new MutationObserver(function(mutations) {//构造函数回调
          mutations.forEach(function(record) {
              window[method].call(this);
          });
       });
       observer.observe(_this[0], config);
    });
}

function Mysubmenu(){
    if(record.type == ‘childList‘){//监听结构发生变化                                  
          
            if($(record.target).find(‘#exam_theory_organize‘).length>0){                 
                //studentId: "4", mark: "student_online"
                if(webSocketData.mark =="student_online"){
                    $(‘#select_student‘).bootstrapTable("refresh");    
                }else if(webSocketData.mark =="ready_exam"){
    //                let  selectStudentData = $(‘#select_student‘).bootstrapTable("getData");
    //                 $.each(selectStudentData,function(i,v){if(v.USER_ID == webSocketData.studentId){ v.exam_stauts =‘已就绪‘} })
                    $(‘#select_examPaper‘).bootstrapTable("refresh");    
                }                          
            }
   
            if($(record.target).find(‘#exam_theory_join‘).length>0){                 
                if(webSocketData.mark =="grant_exam"){  selectExam();
                }else if(webSocketData.mark =="strat_exam"){  }
            }
       
         
    } 
}

// #myTab 即 要监听的html标签的id值
monitor(‘myTab‘,‘Mysubmenu‘);