极客教程HTML 单个 MutationObserver 对象能观察多个目标吗
在本文中，我们将介绍 MutationObserver 对象在 HTML 中的使用，并探讨它是否可以用于观察多个目标元素的变化。
阅读更多：HTML 教程
MutationObserver 的使用
MutationObserver 是一个 Web API，用于监听某个元素的变化，并在变化时执行相应的操作。它通常用于监听 DOM 树的变化，可以捕获到节点的新增、删除、属性的修改等事件。
MutationObserver 构造函数接受一个回调函数作为参数，这个回调函数会在指定的目标元素发生变化时被触发。回调函数接收一个 MutationRecord 列表作为参数，每个 MutationRecord 对象都描述了一次变化的情况。
const observer = new MutationObserver(function(mutationsList, observer) {
// 在目标元素发生变化时执行相应的操作
});
// 开始观察
observer.observe(target, options);
// 停止观察
observer.disconnect();
单个 MutationObserver 对象观察多个目标
根据 MutationObserver 的定义，一个 MutationObserver 对象只能观察一个目标元素。但是可以通过创建多个 MutationObserver 对象的方式，来实现对多个目标元素的观察。
例如，我们希望同时观察两个不同的目标元素：
const observer1 = new MutationObserver(function(mutationsList, observer) {
// 在目标元素1发生变化时执行相应的操作
});
const observer2 = new MutationObserver(function(mutationsList, observer) {
// 在目标元素2发生变化时执行相应的操作
});
// 开始观察目标元素1
observer1.observe(targetElement1, options);
// 开始观察目标元素2
observer2.observe(targetElement2, options);
通过创建多个 MutationObserver 对象，我们可以同时观察多个目标元素的变化，并针对不同的目标元素做出相应的操作。
示例
下面我们通过一个具体的示例来说明使用 MutationObserver 观察多个目标元素的情况。
假设我们有一个待办事项列表，每当新的待办事项被添加或删除时，我们希望实时更新总待办事项的数量和显示最近添加的事项。
首先，我们需要先定义 HTML 结构：
<div class="todo-list">
<h2>待办事项</h2>
<ul id="list">
<li>第一件事</li>
<li>第二件事</li>
</ul>
</div>
然后，我们创建 MutationObserver 对象来监听目标元素 ul 的变化，并在变化时执行相应的操作：
const list = document.querySelector('#list');
// 监听元素列表的变化
const observer = new MutationObserver(function(mutationsList, observer) {
// 在目标元素发生变化时更新待办事项数量
updateTodoCount();
// 在目标元素发生变化时显示最近添加的事项
showLatestTodo();
});
// 开始观察目标元素
observer.observe(list, { childList: true });
// 更新待办事项数量
function updateTodoCount() {
const count = document.querySelectorAll('#list li').length;
console.log(`当前待办事项数量：{count}`);
}
// 显示最近添加的事项
function showLatestTodo() {
const latestTodo = document.querySelector('#list li:last-child').textContent;
console.log(`最新添加的事项：{latestTodo}`);
}
// 添加新的待办事项
function addTodoItem(item) {
const newItem = document.createElement('li');
newItem.textContent = item;
list.appendChild(newItem);
}
// 删除待办事项
function removeTodoItem(index) {
const items = document.querySelectorAll('#list li');
if (index >= 0 && index < items.length) {
list.removeChild(items[index]);
}
}
// 添加新的待办事项，并触发变化
addTodoItem('第三件事');
// 输出：
// 当前待办事项数量：3
// 最新添加的事项：第三件事
// 删除待办事项，并触发变化
removeTodoItem(1);
// 输出：
// 当前待办事项数量：2
// 最新添加的事项：第三件事
如上所示，在示例中我们通过创建一个 MutationObserver 对象，来同时观察待办事项列表中的子元素数量和最后一个子元素的变化。每当待办事项列表发生变化时，我们都会更新待办事项数量和显示最近添加的事项。
总结
MutationObserver 是一个强大的工具，可以监听目标元素的变化，并在变化时执行相应的操作。在 HTML 中，单个 MutationObserver 对象只能观察一个目标元素，但可以通过创建多个 MutationObserver 对象，来实现对多个目标元素的观察。通过合理使用 MutationObserver，我们可以实现对多个目标元素的变化进行实时的监测和响应。