JavaScript中property和attribute的差異詳細介紹_基礎知識

1. 定義

Property：屬性，所有的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element並添加了一些屬性，添加的這些屬性分別對應於每個HTML元素都有下面的這5個標準特性: id,title,lang,dir,className。 DOM節點是一個對象，因此，他可以像其他的JavaScript物件一樣加入自訂的屬性以及方法。 property的值可以是任何的資料型別，對大小寫敏感，自訂的property不會出現在html程式碼中，只存在js中。

Attribute：特性，區別於property，attribute只能是字串，大小寫不敏感，出現在innerHTML中，透過類別數組attributes可以羅列所有的attribute。

2. 相同之處

標準的 DOM properties 與 attributes 是同步的。公認的（非自訂的）特性會以屬性的形式加入DOM物件中。如，id，align，style等，此時操作property或使用操作特性的DOM方法如getAttribute()都可以操作屬性。不過傳遞給getAttribute()的特性名與實際的特性名相同。因此對於class的特性值獲取的時候要傳入「class」。

3. 不同之處

1).對於有些標準的特性的操作，getAttribute與點號(.)所獲得的值存在差異性。如href，src，value，style，onclick等事件處理程序。
2).href：getAttribute取得的是href的實際值，而點號取得的是完整的url，存在瀏覽器差異。

複製程式碼 程式碼如下:

<script><br />       var a  = document.body.children[0]<br />       a.href = '/'<br />       alert( 'attribute:' a.getAttribute('href') ) // '/'<br />       alert( 'property:' a.href )  // IE: '/', others: full URL<br />   </script>

src的值的取得類似href，不過IE也會回傳full URL；
value值同樣存在一些 ‘one-way'（單向）同步的內建屬性。
例如，input.value 從 attribute 中同步（即 property 從 attribute 中獲得同步）

複製程式碼 程式碼如下:

  <script><br />        var input = document.body.children[0];<br />        input.setAttribute('value', 'new');<br />        alert( input.value ); // 'new', input.value changed<br />        alert( input.getAtrribute(value) ); // 'new'<br />   </script>

但是 attribute 不能從 property 中獲得同步：

複製程式碼 程式碼如下:

   <script><br />         var input = document.body.children[0];<br />         input.value = 'new';<br />         alert(input.getAttribute('value'));  // 'markup', not changed!<br />   </script>

getAttribute取得的是初始值，而點號取得的是初始值或.value修改後的值,例如當訪客輸入了某些字元後，'value' attribute 在 property 更新後維持了原始值。原始值可以用來檢驗 input 是否有變化，或是重置它。

對於style和onclick等事件處理程序，getAttribute方法存取時會傳回字串，而點號傳回的是對應的物件和事件處理函數。

對於input中的checked屬性

複製程式碼 程式碼如下:

<script><br />     var input  = document.body.children[0]<br />     alert( input.checked ) // true<br />     alert( input.getAttribute('checked') ) // empty string<br />   </script>

getAttribute取得的是你是實際設定的值。而點號回傳的是布林值。

瀏覽器相容性上的差異

1.在IE 2.IE

複製程式碼 程式碼如下:

document.body.abba = 1 // assign property (now can read it by getAttribute)
document.body.ABBA = 5 // assign property with another case
// must get a property named 'ABba' in case-insensitive way.
alert( document.body.getAttribute('ABba') ) // 1

優先選擇property

在實際應用中，98%的 DOM 操作都是使用 properties。
只有兩種情形需要使用attributes

1.自訂 HTML attributes，因為它並不會同步到DOM property。
2.存取內建的 HTML attributes，這些 attribute 不能從 property 同步過來。例如 INPUT標籤的value值。