IntersectionObserver实现无限滚动，MutationObserver监听dom元素
IntersectionObserver 接口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
margin: 100px 0;
}
</style>
</head>
<body style="min-height: 1000px;">
<div id="bod">
<p>---</p>
<p>---</p>
</div>
<div id="footer" style="height: 150px;background-color: rebeccapurple;">底部</div>
<script>
let cont = 1;
let obs = new IntersectionObserver(
function(changes) { //changes 是所有监听的元素集合
添加40个元素之后，停止监听
if(cont>=40) {obs.unobserve(footer)}
// 避免页面加载就触发一次
if (changes[0].intersectionRatio <= 0) return;
for(let i=0;i<10;i++){
let dom = document.createElement("p");
dom.innerHTML = 'son'+cont++
document.querySelector('#bod').appendChild(dom)
}
// 监听的元素出现75%的时候在触发回调
},{threshold:0.75})
obs.observe(footer)
// 可以同时监听多个元素
// 例如
// obs.observe(footer1)
// obs.observe(footer2)
</script>
</body>
</html>
MutationObserver：可以监听元素发生的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="tar"> 123 </div>
<script>
let obs = new MutationObserver((e)=>{
console.log(e);
})
// 监听tar元素的子节点是否有变化，更多的监听可以在第二个参数里面配置
// 观察器所能观察的DOM变动类型有以下几种：
// childList：子节点的变动。
// attributes：属性的变动。
// characterData：节点内容或节点文本的变动。
// subtree：所有后代节点的变动。
obs.observe(tar,{childList:true})
document.onclick = function(){
let dom = document.createElement("p");
dom.innerHTML = 'son'
tar.appendChild(dom)
tar.style.width = "200px"
}
</script>
</body>
</html>
