JS监听和响应DOM元素的变化的方法_Javascript

前言

在前端开发中，处理动态变化的 dom（文档对象模型）很是常见的需求。

比如

根据一些动态内容是否超出容器来处理容器宽度和高度,
在用户填写表单时，某些字段需要即时验证
自动化测试中，可能需要监控 dom 变化来验证测试条件
一个自定义的下拉菜单组件可能需要监听其内容的变化，并根据内容更新菜单的显示。等等常用的场景。

mutationobserver 简介

mutationobserver 是一个用于监听 dom 树中变动的接口。与旧的 mutation events（如 domsubtreemodified）相比，mutationobserver 更加高效且提供了更好的性能，适用于复杂和频繁的 dom 操作。

mutationobserver.observe() 方法

mutationobserver.observe() 方法用于开始监听指定 dom 节点的变化。其基本语法如下：

mutationobserver.observe(targetnode, options);

targetnode：要观察的 dom 节点。
options：一个配置对象，用于指定要观察的变化类型和其他选项。

options 配置对象

options 是一个对象，具有以下属性：

childlist：布尔值，指示是否观察子节点的添加和删除。
attributes：布尔值，指示是否观察属性的变化。
characterdata：布尔值，指示是否观察文本内容的变化。
subtree：布尔值，指示是否观察目标节点的所有后代节点（即，递归地观察所有子孙节点）。

以下是这些属性的解释：

childlist：设置为 true 时，mutationobserver 将监听目标节点下的子节点的增加或删除。
attributes：设置为 true 时，mutationobserver 将监听目标节点的属性的变化。
characterdata：设置为 true 时，mutationobserver 将监听目标节点及其子节点中的文本内容的变化。
subtree：设置为 true 时，mutationobserver 将递归地监听目标节点的所有子节点。

示例代码

下面是一个使用 mutationobserver.observe() 的简单示例：

// 创建一个 mutationobserver 实例
const observer = new mutationobserver((mutationslist) => {
    for (const mutation of mutationslist) {
        if (mutation.type === 'childlist') {
            console.log('子节点发生变化');
        } else if (mutation.type === 'attributes') {
            console.log(`属性 ${mutation.attributename} 发生变化`);
        }
    }
});

// 选择需要观察的目标节点
const targetnode = document.getelementbyid('target');

// 配置观察选项
const config = {
    childlist: true,
    attributes: true,
    subtree: true
};

// 启动观察
observer.observe(targetnode, config);

// 示例：修改 dom
document.getelementbyid('target').innerhtml = '<p>新的内容</p>';
document.getelementbyid('target').setattribute('data-test', 'value');

代码解析

创建 mutationobserver 实例：
- 通过 new mutationobserver(callback) 创建 mutationobserver 实例，并提供回调函数 callback。回调函数会在 dom 发生变化时被调用，并传递一个 mutationrecord 对象数组，其中包含所有变化的详细信息。
选择目标节点：
- 使用 document.getelementbyid('target') 获取要观察的 dom 节点。
配置观察选项：
- 通过 config 对象指定要观察的变化类型。设置 childlist 和 attributes 为 true，表示监听子节点的变化和属性的变化，同时 subtree 设置为 true 表示递归观察目标节点的所有后代节点。
启动观察：
- 使用 observer.observe(targetnode, config) 开始观察目标节点的变化。
修改 dom：
- 当修改了目标节点的内容和属性，触发 mutationobserver 的回调函数。

停止观察

如果需要停止观察 dom 变化，可以使用 disconnect() 方法：

observer.disconnect();

实际开发中 mutationobserver 的具体用途：

1. 动态内容更新

场景描述：

当应用程序需要在后台更新内容并反映到前端时，例如，异步加载新内容或从服务器获取数据并将其添加到页面中。

示例：

一个社交媒体应用可能会动态加载新帖子。当新帖子被添加到 dom 中时，你可以使用 mutationobserver 来实时更新 ui，例如显示新帖子通知。

const observer = new mutationobserver((mutationslist) => {
    for (const mutation of mutationslist) {
        if (mutation.type === 'childlist') {
            console.log('new content added');
            // 执行相关操作，例如更新通知或重新渲染 ui
        }
    }
});

const feed = document.getelementbyid('feed');
observer.observe(feed, { childlist: true });

2. 动态表单验证

场景描述：

在用户填写表单时，某些字段可能需要即时验证。例如，用户输入数据时检查格式或有效性。

示例：

当用户在输入框中输入内容时，你可以使用 mutationobserver 来监控 value 属性的变化，并实时验证输入数据。

const observer = new mutationobserver((mutationslist) => {
    for (const mutation of mutationslist) {
        if (mutation.type === 'attributes' && mutation.attributename === 'value') {
            validateinput(mutation.target.value);
        }
    }
});

const inputfield = document.getelementbyid('input');
observer.observe(inputfield, { attributes: true });

3. 实时 ui 组件更新

场景描述：

某些 ui 组件可能需要根据数据变化实时更新。例如，某些图表或可视化组件需要反映数据源的最新状态。

示例：

一个图表组件可以监控数据容器的变化，并在数据变化时重新渲染图表。

const observer = new mutationobserver(() => {
    updatechart();  // 更新图表
});

const datacontainer = document.getelementbyid('data-container');
observer.observe(datacontainer, { childlist: true, subtree: true });

4. 自定义组件或库

场景描述：

在创建自定义 web 组件或库时，可能需要监控和处理其内部 dom 的变化。

示例：

一个自定义的下拉菜单组件可能需要监听其内容的变化，并根据内容更新菜单的显示。

const observer = new mutationobserver((mutationslist) => {
    for (const mutation of mutationslist) {
        if (mutation.type === 'childlist') {
            updatedropdown();  // 更新下拉菜单
        }
    }
});

const dropdowncontent = document.getelementbyid('dropdown-content');
observer.observe(dropdowncontent, { childlist: true });

5. 支持第三方库或框架

场景描述：

在与第三方库或框架集成时，需要监控这些库对 dom 进行的修改。

示例：

某些第三方 ui 库可能会动态生成或修改 dom 元素，使用 mutationobserver 可以确保你的代码能够检测到这些变化并作出相应处理。

const observer = new mutationobserver(() => {
    handlelibrarychanges();  // 处理第三方库的变化
});

const targetnode = document.getelementbyid('target');
observer.observe(targetnode, { childlist: true, attributes: true });