何時訪問屬性（vs屬性）？

Question

我從this post收集到的那個幾乎總是想要訪問DOM屬性，而不是HTML屬性。

那麼罕見的有用的例外？在什麼情況下訪問HTML屬性比訪問DOM屬性更好？

Answer 1

有時該屬性不映射到屬性中的更改。

一個示例是複選框的checked屬性/屬性。

DEMO：http://jsfiddle.net/mxzL2/

<input type="checkbox" checked="checked"> change me 

---

document.getElementsByTagName('input')[0].onchange = function() { 

    alert('attribute: ' + this.getAttribute('checked') + '\n' + 
      'property: ' + this.checked); 
}; 

---

...而一個ID屬性/特性將保持同步：

DEMO：http://jsfiddle.net/mxzL2/1/

<input type="checkbox" checked="checked" id="the_checkbox"> change me 

---

var i = 0; 

document.getElementsByTagName('input')[0].onchange = function() { 

    this.id += ++i; 
    alert('attribute: ' + this.getAttribute('id') + '\n' + 
      'property: ' + this.id); 
}; 

和自定義屬性一般不映射的。在這些情況下，您需要獲取該屬性。

---

也許一個潛在更有用的情況是文本輸入。

<input type="text" value="original"> 

...其中屬性不會隨着來自DOM或用戶的更改而改變。

---

正如@Matt McDonald指出，有DOM屬性會給你會反映原始屬性值的初始值。

HTMLInputElement.defaultChecked 
HTMLInputElement.defaultValue 

Answer 2

一個罕見的例外情況是<form>元素的屬性可能與表單中的元素衝突。例如，考慮下面的HTML：

<form id="theForm" method="post" action="save.php"> 
    <input name="action" value="edit"> 
</form> 

的問題是，一種形式內的任何輸入創建對應於所述輸入的name形式元件，覆蓋該屬性的任何現有值的屬性。因此，在這種情況下，表單元素的action屬性是對名稱爲action的<input>元素的引用。如果該輸入不存在，action屬性將改爲參考action屬性幷包含字符串「save.php」。因此，對於屬性對應的表單元素的屬性，例如action和method，使用getAttribute()是最安全的。

var form = document.getElementById("theForm"); 

// Alerts HTMLInputElement in most browsers 
alert(form.action); 

// Alerts "save.php" 
alert(form.getAttribute("action")); 

// Alerts "post" because no input with name "method" exists 
alert(form.method); 

這是不幸的;如果這種映射不存在，本來會更好，因爲表單的elements屬性已包含由name加密的所有表單元素。我認爲我們有Netscape爲此感謝。

現場演示：http://jsfiddle.net/z6r2x/

等場合使用屬性：

• 當訪問自定義屬性，如<div mymadeupattr="cheese"></div>
• 當序列化DOM和你想從原始的HTML輸入屬性值如value和checked。

Answer 3

我只能想出2個更多的情況下訪問/設置屬性將有益於 超過財產。

風格屬性：

在您不允許使用任何框架，你可以使用樣式屬性一次像這樣設置多種樣式的情況下：

elem.setAttribute("style", "width:100px;height:100px;"); 

而不是做這樣的：

elem.style.width = "100px"; 
elem.style.height = "100px"; 

或本：

var styles = {width: "100px", height: "100px"}, style; 

for(style in styles) { 
elem.style[style] = styles[style]; 
} 

請注意，設置樣式屬性會覆蓋前一個屬性。不管怎樣，它可能更好地寫出 多重樣式setter函數。

href屬性：

href屬性通常會包括類似「/產品」的值，但是屬性將包含解析網址，如： 「http://www.domain.com/products」，而不是你真正想要的： 「/產品」。所以如果你想動態地使用 鏈接來做點什麼，那麼閱讀href屬性而不是屬性會更好，因爲它具有你想要的值。

更新

我突然發現2種更多的用途，我相信有更多這樣的。

如果要查看某個元素是否具有自定義選項卡索引集，最簡單的方法是查看該元素是否具有該屬性。由於.tabIndex -property的默認值 取決於元素，因此無法輕易使用該元素查看元素是否具有自定義tabIndex。

查看元素是否具有自定義.maxLength屬性。這不能從物業看出之一：

document.createElement("input").maxLength 
//524288 

這是不可能告訴當值524288在那裏故意不處理的屬性。