mdn:MutationObserver - Web API 接口参考 | MDN
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box .box-item {
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item"></div>
</div>
<button onclick="addItem()">加一个</button>
<script>
// 监听的元素
let elementToObserve = document.querySelector(".box");
// 发生变化后要干嘛
let observer = new MutationObserver((mutationList, observer) => {
console.log(mutationList)
console.log(observer)
})
/**
* 开始监听
* 参数1:监听的元素
* 参数2:配置项
*/
observer.observe(elementToObserve, {
attributes: true,
childList: true,
subtree: true
})
function addItem () {
elementToObserve.children[0].style.height = "150px"
elementToObserve.children[0].style.height = "155px"
elementToObserve.children[0].style.height = "160px"
elementToObserve.children[0].style.height = "170px"
}
</script>
</body>
</html>