MutationObserver 本身并不能直接监听 setAttribute 方法的调用，因为它是用来观察 DOM 的变化，而不是用于拦截方法调用。不过，我们可以通过封装 setAttribute 方法，并结合 MutationObserver 来实现你想要的功能。
以下是一个完整的示例，演示了如何使用封装后的 setAttribute 方法，并在设置属性时提供修改值的机会：
// 创建一个 MutationObserver 实例，用于监听属性变化
const observer = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes') {
console.log(`The attribute '${mutation.attributeName}' was modified to: ${targetNode.getAttribute(mutation.attributeName)}`);
}
}
});
// 目标节点
const targetNode = document.getElementById('myElement');
// 配置观察选项
const config = { attributes: true };
// 启动观察器
observer.observe(targetNode, config);
// 保存原始 setAttribute 方法
const originalSetAttribute = Element.prototype.setAttribute;
// 重写 setAttribute 方法
Element.prototype.setAttribute = function(name, value) {
// 在这里可以提供修改值的机会，比如通过确认框或者其他方式
const modifiedValue = prompt(`Modify the value for "${name}"`, value) || value;
// 调用原始的方法来设置属性
originalSetAttribute.call(this, name, modifiedValue);
};
// 示例：设置初始值和后续修改
targetNode.setAttribute('data-example', 'initial value');
工作原理：
- 创建
MutationObserver：我们创建一个新的实例并配置它以观察特定节点的属性更改。 - 目标节点：选择我们要监视的DOM元素，例如通过其ID获取。
- 保存和重写
setAttribute方法：- 保存对原始
setAttribute的引用，以便之后调用。 - 使用自定义逻辑替代该方法，让用户有机会通过
prompt()修改传入的新值。
- 保存对原始
- 调用原始方法：在用户输入新的值（或取消输入时保留旧值）后，调用原来的
setAttribute来应用更改。
注意事项：
- 此代码会影响到所有页面上使用的
setAttribute方法，因此需要谨慎使用，尤其是在大型项目中。 - 使用弹出框 (
prompt) 可能不是最好的用户体验，你可以考虑使用其他输入机制，如模态框等。
内容由零声教学AI助手提供，问题来源于学员提问
&1 请帮我分析有什么问题，这是在操作shar..." />
