我測驗了在 JavaScript 中向 HTML 元素添加任意欄位，它按預期作業：
const element = document.getElementById('element-id');
element.greet = (message) => { alert(message); };
element.friendElement = document.createElement('div');
element.greet(element.friendElement.innerText);
警報與訊息一起顯示，但我擔心：
- 所有主要瀏覽器都支持這種行為嗎？
- 是否有用于選擇新欄位名稱以確保它不會與瀏覽器用作元素欄位的名稱沖突的模式？
- 有什么理由應該避免向 HTML 元素添加任意欄位嗎？
我希望 HTML 元素有另一個標準欄位，如 oncustomevent 可以設定為用戶定義的函式。
uj5u.com熱心網友回復：
它應該可以作業，但這不是一個好主意，因為未來對 DOM 規范的更改可能會添加這些屬性，并且您的代碼會發生沖突。
DOM API 已經為應用程式定義的字串資料提供了一個位置dataset，即與data-XXX屬性相對應的屬性。所以你可以寫：
element.dataset.message = 'Hello, world';
但是，對于函式來說，沒有任何等價物。您可以只使用常規函式，而不是將其設為屬性。
function greet(element) {
alert(element.dataset.message);
}
uj5u.com熱心網友回復：
DOM 元素不是相關內容的“命名空間”，它們是具有特定目的的物體，反映為一組特定的資料和行為。盡管 JavaScript 中有一些物件用于命名空間相關的功能（Math、Intl等），但它們通常是唯一的和“著名的”，足以成為規則的一個很好的例外。
如果您想將特定行為和/或資料與某個 DOM 元素相關聯，請創建一個單獨的物體；它可以是一個完整的類：
class ElementGreeter {
constructor(element, friendElement) {
this.element = element;
this.friendElement = friendElement;
}
greetPrimary() {
this.greet(this.element.innerText);
}
greetFriend() {
this.greet(this.friendElement.innerText);
}
greet(message) {
alert(message);
}
}
... 或者一個簡單的函式：
const createGreeter = (propName) => (element) => alert(element[propName]);
const greet = createGreeter("innerText");
greet(element);
greet(friendElement);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/397655.html
標籤：javascript dom