javascript - document.getElementById().value - 覆盖或知道何时访问

Question

在不详细解释我正在处理的项目细节的情况下，我试图确定一种方法，可以在 document.getElementById().value 被访问，或者以与对象类似的方式覆盖它，并定义用于获取和设置该值的自定义行为。这可能吗？

我尝试了以下方法，但没有成功:

Object.defineProperty(document.getElementById, 'nodeValue', {
    get: function () {
        console.log('document.getElementById value accessed');
        return this.nodeValue;
    },
    set: function (value) {
        console.log('document.getElementById value set');
        this.nodeValue = value;
    }
});

与上面相同，但使用 value 而不是 nodeValue:

Object.defineProperty(document.getElementById, 'value', {
    get: function () {
        console.log('document.getElementById value accessed');
        return this.value;
    },
    set: function (value) {
        console.log('document.getElementById value set');
        this.value = value;
    }
});

抱歉，如果这看起来有点牵强，JavaScript 幕后的复杂性并不是我太熟悉的。然而，上面的代码确实显示了我想要实现的目标。我只是不知道怎么办!

我在 MDN 上花了一些时间试图理解它是如何工作的，从我收集到的信息来看， getElementById() 返回一个继承自包含 nodeValue 的 Node 接口(interface)的 Element，我认为这个 nodeValue 是什么我很感兴趣，但我不能确定。

编辑:我正在寻找这种通用行为，我有多个(但数量未知)元素，所以我不会尝试将其应用于特定元素。

Answer 1

首先，修改 Element 对象是一个坏主意。扩展它是不好的，但不如修改它那么糟糕。这是因为，Web 浏览器上的 JavaScript 实现并没有提供有关底层 API 如何工作的详细信息。例如，

1。修改 Element 对象

我们有一个文档如下:

<div>
  <h1 id="elem-id">Header Content</h1>
</div>

我们可以通过调用这些指令来获取它的id

let elem = document.getElementById('elem-id');
elem.getAttribute('id'); // 'elem-id';

我们可以使用以下方法修改getAttribute():

Element.prototype.getAttribute = function (attributeKey) {
// Implement your own function here
return 'ok';
}

接下来，当您调用 elem.getAttribute('id') 时，它应该返回 ok。

这很糟糕，因为无法恢复回到默认实现。

2。扩展 Element 对象

下一个不太糟糕的事情是扩展 Object.我们可以简单地这样做:

Element.prototype.getAttributeAndFireEvent = function (attributeKey) {
  console.log(`getting attribute for ${attributeKey}`); // Could be an eventEmitter
  return this.getAttribute(attributeKey);
}

然后，我们可以通过如下调用来使用这些方法:

elem.getAttributeAndFireEvent('elem-id');

这可以工作，但请小心修改全局对象，它可能会导致意想不到的效果。

引用文献:

1. In Javascript, can you extend the DOM?