在不詳細解釋我正在處理的專案的細節的情況下，我試圖確定一種方式，我可以在什么時候實作事件監聽器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 介面繼承的 Element，我認為這個 nodeValue 是我感興趣的在，但我不能確定。
編輯：我正在尋找這種行為是通用的，我有多個（但數量未知）元素，所以我不想將它應用于特定元素。
uj5u.com熱心網友回復：
首先，修改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');
這會起作用，但在修改全域物件時請小心，這可能會導致意想不到的效果。
參考：
- 在 Javascript 中，你可以擴展 DOM 嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469072.html
標籤：javascript