WebAPI 之 MutationObserver
Dec 23, 2021
# Browser
# MutationObserver
MutationObserver
接口提供了监视对DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品,该功能是 DOM3 Events 规范的一部分。mdn-MutationObserver
html
<div id="app">
<h1>Loading...</h1>
</div>
<script src="index.js"></script>
js
// 选择需要观察变动的节点
const app = document.getElementById("app");
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver((mutationList, observer) => {
mutationList.forEach(mutation => {
console.log(mutation.target);
});
});
// 观察 app 元素
observer.observe(app, {
attributes: true, // 监视元素属性变更
childList: true, // 监视目标节点添加或删新的子节点
subtree: true // 将监视范围扩展至目标节点整个节点树中的所有节点
});
// app 下的 h1 元素
const h1 = app.querySelector("h1");
// 创建一个 p 元素
const p = document.createElement("p");
// 修改 h1 元素
h1.innerText = "This is a title";
h1.className = "title";
// 设置 p 元素内容
p.innerText = "This is para";
// 添加 p 元素
app.appendChild(p);