MutationObserver 是一种用来观察 DOM 树变化的 API，它可以监视 DOM 元素的属性、子节点等的变化。但是，MutationObserver 本身并不提供直接修改被监听属性的机会。如果你想在监听到某个属性（例如 setAttribute）改变时，做一些额外处理或修改，可以通过重写该方法来实现。
以下是一个简单示例，演示如何使用 MutationObserver 监听 setAttribute 的变化，并允许在修改值之前对其进行检查或替换：
// 创建一个 MutationObserver 实例
const observer = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes') {
console.log(`The ${mutation.attributeName} attribute was modified.`);
// 可以在这里进一步处理新的值
const newValue = mutation.target.getAttribute(mutation.attributeName);
console.log(`New value: ${newValue}`);
}
}
});
// 选择要观察的目标节点
const targetNode = document.getElementById('myElement');
// 配置观察选项
const config = { attributes: true };
// 开始观察目标节点
observer.observe(targetNode, config);
// 自定义 setAttribute 方法以便能够拦截和处理属性设置
const originalSetAttribute = Element.prototype.setAttribute;
Element.prototype.setAttribute = function(name, value) {
// 在这里可以处理新的值，例如:
if (name === 'data-custom') {
// 修改新值，如果需要的话
value = value.toUpperCase(); // 示例：将新值转换为大写字母
}
// 调用原始 setAttribute 方法以应用修改后的值
originalSetAttribute.call(this, name, value);
};
// 测试代码：更新元素属性
targetNode.setAttribute('data-custom', 'hello world');
解释
- 创建
MutationObserver实例: 这个实例会监听指定节点的属性变化。 - 选择要观察的目标节点: 使用
document.getElementById()获取要监听的 DOM 元素。 - 配置观察选项: 设置为
{ attributes: true }，表示我们只关心属性变化。 - 重写
setAttribute方法: 这使得我们可以在调用原来的方法前，对即将设置的新值进行任何必要的处理。 - 测试代码: 调用自定义的
setAttribute()方法，会触发观察器并打印出相关信息。
请注意，这种方式适用于比较简单的情况，但如果涉及到大量 DOM 操作或复杂逻辑，需要小心可能引起性能问题。
内容由零声教学AI助手提供，问题来源于学员提问
