MutationObserver

1 .用来监视DOM的变动,dom的任何变动,节点的增减,属性的变动,文本内容的变动,都可以观察到
2 .特点:

1 .采用异步的方法,等待所有脚本任务完成之后,才会执行操作
2 .把所有dom记录合并为一个数组进行操做,而不是一条条的处理个别DOM变动
3 .既可以观察发生在DOM节点的所有变动,也可以仅仅观察某一类变动

3 .用途

1 .通知web应用程序访问者,他们的当前页面发生了一些变化
2 .需要根据dom的变动加载一些js模块
3 .界面编辑器,当想要实现撤销,重做等功能的时候,利用这个api,可以知道上一部到底做了什么.

4 .用法

// 注册监听函数，定义监听发生之后发生的函数
                    const watch=new MutationObserver((m)=>{
                        m.forEach((e)=>{
                            console.log(e)
                        })
                    })

                    //监听DOM
                    watch.observe(document.documentElement,{
                        attributes:true,
                        characterData:true,
                        childList:true,
                        subtree:true,
                        attributeOldValue:true,
                        characterDataOldValue:true,
                        // 配置所要观察的变化类型
                    })

                  watch.desconnect()
                  //停止观察

                  watch.takeRecords()
                  //返回清除变动记录,不在处理未处理的变动