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

Question

我從這篇文章中收集到， 幾乎總是有人想要訪問DOM屬性，而不是HTML屬性。

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

Answer 1

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

一個例子是復選框的checked屬性/屬性。

演示： 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屬性/屬性將保持同步：

演示： 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麥克唐納所指出的那樣 ，DOM屬性會為您提供反映原始屬性值的初始值。

HTMLInputElement.defaultChecked
HTMLInputElement.defaultValue

Answer 2

一個罕見的例外是<form>元素的屬性可能與<form>元素沖突。 例如，請考慮以下HTML：

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

問題是表單中的任何輸入都會在表單元素中創建與輸入name對應的屬性，從而覆蓋該屬性的任何現有值。 所以在這種情況下，form元素的action屬性是對帶有name 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鍵入的表單元素。 我想我們有網景來感謝這個。

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

其他使用屬性的場合：

• 訪問自定義屬性時，例如<div mymadeupattr="cheese"></div>
• 序列化DOM時，您希望原始HTML中的值用於輸入屬性（如value和checked 。

Answer 3

我只能提出另外兩種情況，其中訪問/設置屬性對財產有好處。

樣式屬性：

在不允許使用任何框架的情況下，您可以使用style屬性一次設置多個樣式，如下所示：

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屬性通常包含類似“/ products”的值，但該屬性將包含已解析的URL，如：“ http://www.domain.com/products ”而不是您真正想要的：“/ products” 。 因此，如果你想用鏈接動態地做一些事情，那么讀取href屬性而不是屬性是更好的，因為它具有你想要的值。

更新

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

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

查看元素是否具有自定義.maxLength屬性。 從財產中也看不到：

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

如果沒有處理屬性，就無法判斷值524288是否存在故意。