如何使用 MutationObserver 来观察 HTMLElement 的属性而不是属性

With MutationObserver.observe() https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe，我可以监听某个属性的变化。例如，如果我有一个 Div，并且属性value更改，然后将调用分配的回调。但是，如果属性（同名）发生更改，则不会调用它：

const observer = new MutationObserver(callback);

divNode = document.getElementById('my-id');

// Start observing the target node for configured mutations
observer.observe(divNode, {attributes: true});

// ...

// This will trigger `callback` to be called
divNode.setAttribute('value', 'something new')

// This will do nothing, since value is a property, not attribute
divNode.value = 'something new'

我相信（但尚未测试）这是一个问题，因为value不是“已知”属性<div>，因此当属性更新时，Javascript不会自动更新关联的属性。

最好的聆听方式是什么divNode.value具体来说？

我不认为 MutationObserver 可以做到这一点。另一种方法是覆盖.value获取器/设置器：

const input = document.querySelector('input');
const { get, set } = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(input, 'value', {
  get() {
    console.log('got');
    return get.call(this);
  },
  set(newVal) {
    console.log('set');
    return set.call(this, newVal);
  }
});

input.value = 'some value';

<input>

但这是非常奇怪的。我希望永远不会在严肃的代码中看到这种情况，除非您处于一种奇怪的情况，您需要观察您无法控制的更改（例如在运行其他人的脚本时）。