element.setAttribute元素['attr'] element.attr

Question

之間的任何差異我注意到，JavaScript有幾種方式來設置和獲取元素的屬性。

我不確定它們之間是否有差異。尤其是，是否存在跨瀏覽器問題。

Answer 1

Javascript保證element["attr"]和element.attr是相同的。

setAttribute()然而，不是語言本身的一部分，而是其上面的DOM層的一部分。無法保證與寫入attr屬性的效果相同。它可以做更多，甚至更少（即，甚至不更新對象的attr屬性，並要求您撥打getAttribute()以獲取值）。

實際上，這三種方式大致相同。不過，請注意諸如this之類的內容。

Answer 2

DOM元素的屬性和屬性是完全不同的，這種差異導致了一些混淆。

一個問題是，並非每個屬性都映射到同名的屬性。例如，<input>元素的value屬性映射到defaultValue屬性，而value屬性不映射到任何屬性（舊IE中除外：請參見下文）。

爲什麼你應該使用性能的另一個重要原因是，老版本的IE瀏覽器（< = 7，兼容模式在以後的版本）的實施getAttribute()和setAttribute()不正確。大多數屬性直接映射到IE中具有相同名稱的屬性，它具有許多不幸的效果，例如設置事件處理程序屬性在IE中無法正常工作。以下頁面有一些有用的信息：http://reference.sitepoint.com/javascript/Element/setAttribute

還有其他區別。例如，處理URL的屬性/屬性在處理相對URL方面有一些差異。

要看到在符合標準的瀏覽器的屬性和性能之間的差異，考慮一個文本框的值：

<input type="text" id="textbox" value="foo"> 

var textBox = document.getElementById("textbox"); 

console.log(textBox.getAttribute("value")); // "foo" 
console.log(textBox.value); // "foo" 
console.log(textBox.defaultValue); // "foo" 

現在，如果用戶鍵入到文本框或文本框的值被改變使用腳本，我們看到了房地產和屬性值分歧：

textBox.value = "bar"; 
console.log(textBox.getAttribute("value")); // "foo" 
console.log(textBox.value); // "bar" 
console.log(textBox.defaultValue); // "foo" 

設置屬性值現在對電流值沒有影響：

textBox.setAttribute("value", "baz"); 
console.log(textBox.getAttribute("value")); // "baz" 
console.log(textBox.value); // "bar" 
console.log(textBox.defaultValue); // "baz"