WebAPI 之 MutationObserver

MutationObserver

MutationObserver接口提供了监视对DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。mdn-MutationObserver

<div id="app">
  <h1>Loading...</h1>
</div>

<script src="index.js"></script>

// 选择需要观察变动的节点
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);