掌控网页核心：DOM 与 MutationObserver 深度解读

2024-02-10 09:44:11

引言

在纷繁的网络世界中，DOM（文档对象模型）扮演着举足轻重的角色。作为 HTML 和 XML 文档的编程接口，它为我们提供了与网页元素进行交互的强大工具。而 MutationObserver 则是 DOM 的有力帮手，能够实时监测 DOM 变动，为动态网页的开发保驾护航。

DOM：网页结构的操盘手

DOM 将网页视为一棵由节点构成的树形结构，每一个元素都是一个节点。通过 DOM，我们可以轻松地访问、操作和修改这些节点，从而改变网页的外观和行为。

掌控 DOM，随心所欲

DOM 为我们提供了丰富的 API，让我们可以随心所欲地操控网页内容：

添加节点： 通过 createElement() 和 appendChild() 方法，可以向文档中添加新的元素。
删除节点： 使用 removeChild() 方法，可以从文档中移除指定的节点。
修改节点属性： 通过 setAttribute() 和 getAttribute() 方法，可以设置和获取节点的属性值。
操作节点样式： 借助 style 属性，可以轻松修改节点的样式，包括颜色、字体和布局。

MutationObserver：DOM 变动的忠实记录者

在动态网页中，DOM 变化频繁。MutationObserver 作为 DOM 的忠实记录者，可以实时监测 DOM 树的变动，并触发相应的回调函数。

MutationObserver 的强大功能

MutationObserver 拥有强大的功能，可以满足多种需求：

实时监控： 持续监听 DOM 变化，及时响应用户操作或异步请求。
筛选变化： 通过指定观察选项，可以只关注特定类型的 DOM 变动。
异步回调： DOM 变化后，回调函数将在主事件循环的下一轮中执行，避免阻塞主线程。

示例代码：监听按钮点击事件

以下示例代码展示了如何使用 MutationObserver 监听按钮点击事件：

const button = document.querySelector('button');
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'disabled') {
      console.log('按钮已禁用！');
    }
  });
});
observer.observe(button, { attributes: true });