Javascript DOM：設置自定義DOM元素屬性

可以在DOM元素上設置自定義屬性並依賴它們持久嗎？Javascript DOM：設置自定義DOM元素屬性

例如，給定

<html><body><div id="foo"></div></body></html>

難道是公平的做document.getElementById('foo').bar = "baz";，並期望document.getElementsByTagName('div')[0].bar等於"baz"？

請注意，我正在討論屬性，如同在這裏的普通JavaScript對象屬性，而不是元素屬性。

我對如何跨瀏覽器以及它是否支持任何規範感興趣。

DOM API是否保證每次都會爲同一DOM元素返回相同的JavaScript對象？

2011-10-25 rampion

您可以設置自定義屬性，但不要依賴它們。它們可能會成爲標準屬性並與您的代碼發生衝突。最好使用jquery/mootools提供的元素存儲系統（'.data（）'等）。 –

*「DOM API是否保證每次都會爲同一個DOM元素返回相同的JavaScript對象？」 - 我不明白這個問題。 DOM元素是主對象，而不是「JavaScript對象」（正式稱爲本地對象）。 –

看起來像是。 http://jsfiddle.net/YJAvP/ – Birey

嗯，還有就是dataset屬性：

div.dataset.bar = 'baz';

，但它不是在IE瀏覽器中實現。

2011-10-25 20:49:03

我們可以在IE中填充它嗎？有沒有嘗試過墊片？ – Raynos

@Raynos我不知道。這可能是... –

我認爲這是一個很好的解決方案，如果數據集不存在，只需將其定義爲自定義屬性即可。 – Ibu

號

比方說，5年前你認爲物業.contains是一個很好的用例爲說一個元素是否包含了一些特殊的數據。

所以你寫document.getElementById("someId").contains = true

然後你不得不檢查像if (document.getElementByID("someId").contains)

今天打破，因爲Node.prototype.contains是一種方法。

基本上你的代碼不是將來安全的。

2011-10-25 20:52:56 Raynos

採取的要點。我仍然好奇它是否現在是安全的（即如果瀏覽器不支持持久定製屬性，瀏覽器是否會與程序員違約）。 – rampion

@rampion我個人不知道有什麼實現可以打破 – Raynos

雖然我猜他可以使用elem。data_contains'或'elem.dlkafh'相當安全 – oriadam

這是什麼規格說的內部屬性訪問器：

主機對象可以實現另有規定，除非任何方式處理這些內部方法;例如，一種可能性是[[Get]]和 [[Put]]對於特定主機對象確實獲取並存儲屬性值，但[[HasProperty]]始終生成false。

和

主機對象可以定義在[[把]] 操作的附加約束。如果可能，在[[CanPut]]的此定義返回 false的情況下，主機對象不應允許[[Put]] 操作。

但是，我認爲這只是理論上的，實際上expandos按預期工作。

2011-10-25 21:34:47 user123444555621

作爲一般規則，請勿使用自定義屬性。您不應該以他們不期望的方式修改DOM對象，因爲它們可能不像您認爲的那樣行事。

在HTML5中定製屬性的機制是使用data-前綴。

但是，HTML5並不是一個標準，它還沒有被廣泛實施。但是，如果您使用set/getAttribute for data-屬性，它應該可以在所有合理的現代瀏覽器上運行，並且在將來不應該引入標準屬性，前綴爲data-。

不過話說，我仍然會建議使用的自定義對象來存儲值，並且通過元件ID或類或一些其它標準引用它們（如在HTML 4.01）屬性值。它避免了自定義屬性和屬性的問題，並且隨處可見。

2011-10-26 00:56:41 RobG

回答