mutationObserver
MutationObserver接口提供了监视对DOM树所做更改的能力，它被设计为旧的Mutation Events功能的替代品。
构造函数
MutationObserver()
创建并返回一个新的
MutationObs它会在指定的DOM发生变化时被调用
方法
-
disconnect()阻止
MutationObserver实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。 -
observe()配置
MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知。 -
takeRecords()从
MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到MutationRecord对象的新Array中
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
display: flex;
justify-content: center;
align-items: center;
}
.main .item{
margin: 20px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 20px;
color: #FFFFFF;
background: blue;
box-shadow: 0 0 4px rgb(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="main">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<button>新增一个item元素</button>
<script>
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
let targetNode = document.querySelector('.main'),
buttonNode = document.querySelector('button'),
elements = document.querySelectorAll('.item')
const callback = (mutation, observer) => {
console.log('::::::', mutation, observer)
}
const handle = (node, cb) => {
// 创建一个观察者实例并传入回调函数
const observer = new MutationObserver(cb)
// 观察者的配置
const observerConfig = {
attributes: true, // 观察属性变动
childList: true, // 观察目标子节点的变化，是否有添加或者删除
subtree: true, // 观察后代阶段，默认为false
characterData: true
}
// 开始观察目标节点
observer.observe(node, observerConfig)
// 停止观察
// observer.disconnect()
}
handle(targetNode, callback)
elements.forEach((ele, i) => {
ele.addEventListener('click', (e) => {
console.log(e.target)
e.target.setAttribute('data-index', i)
}, false)
})
// 给按钮添加事件
buttonNode.addEventListener('click', (e) => {
console.log(e.target)
createItem(targetNode)
}, false)
// 往main盒子中追加item元素
const createItem = (node) => {
let parent = document.querySelectorAll('.item')
node.insertAdjacentHTML('beforeEnd', `<div class='item'>${parent.length + 1}</div>`)
}
</script>
</body>
</html>
使用场景
异步绘制DOM时，可以使用该方法捕获到DOM绘制完成之后做一些操作
