在使用 MutationObserver 监视DOM变化时，mutation.addedNodes 是一个 NodeList，包含所有新添加的节点。你可以通过遍历这个 NodeList 来访问每个新添加的节点，并进一步检查这些节点包含的子节点。
以下是一个示例代码，展示了如何找出 mutation.addedNodes 中每个节点所包含的子节点：
// 创建一个 MutationObserver 实例
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
// 检查是否有新增节点
if (mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach((node) => {
console.log('Added node:', node);
// 如果该节点是元素节点，则获取其子节点
if (node.nodeType === Node.ELEMENT_NODE) {
const childNodes = node.childNodes; // 获取所有子节点
// 遍历并打印所有子节点
childNodes.forEach((childNode) => {
console.log('Child node:', childNode);
});
}
});
}
});
});
// 配置观察者：监视子树以及子树中子元素的变化
const config = { childList: true, subtree: true };
// 启动观察者，监视指定目标元素
const targetNode = document.getElementById('your-target-element-id'); // 替换为你的目标元素ID
observer.observe(targetNode, config);
在这个代码中：
- 创建了一个
MutationObserver实例。 - 在回调函数中遍历
mutations，检查每个变更记录中的addedNodes。 - 对于每个添加的节点，如果它是一个元素类型（即
nodeType === Node.ELEMENT_NODE），则获取并遍历它的所有子节点（通过childNodes）。 - 将新添加的节点及其所有子节点打印到控制台。
记得替换示例中的 your-target-element-id 为你想要观察的实际 DOM 元素 ID。
内容由零声教学AI助手提供，问题来源于学员提问
