Property和Attribute在開發中是非常容易混淆的兩個概念，兩個單詞的中文翻譯也很接近（Property: 屬性, Atrribute: 特性）。實際兩者是不同的概念，屬于不同的范疇：

• Property 是DOM中的屬性，屬于Javascript中內置對象
• Atrribute 是HTML標簽上的特性，它的值一定是字符串
   

Property和Attribute 的關系

簡單的理解，Attribute是HTML標簽內部所包含的特性和該標簽的默認特性。而Property是DOM中包含該標簽的所有附加內容， 當然也包括attributes對象。

<div class="text" id = "text1" title="111" title1="2222">111</div>

如上圖所示：這個對象中的部分屬性和HTML的Attribute特性是重合的（比如說：id、name、title）。但不包含title1這個自定義屬性。這是因為每一個DOM對象都會有它默認的基本屬性，而在創建的時候，它只會創建基本屬性，我們在TAG標簽中自定義的屬性是不會直接放在DOM中的。那么標簽自定義的屬性去哪兒了呢？再仔細觀察一下這個對象中有一個attributes屬性中包含有title1，再打開來看看是不是我們自定義的屬性：

誒，還真是自定義屬性。而attributes是Property的子集，自定義屬性屬于attributes的屬性，所以標簽的自定義屬性是Property的子集。而一些常見屬性比如id、name、classNmae都會存在與Property中。如果我們再進一步探索attributes中的每一個屬性，會發現它們并不是簡單的對象，它是一個Attr類型的對象，擁有NodeType、NodeName等屬性。注意：打印attributes屬性不會直接得到對象的值，而是獲取一個包含屬性名和值的字符串。

Property和Attribute的取值和賦值

• Attribute取值

《javascript高級程序設計》中提到，為了方便操作，建議大家用getAttribute()和setAttribute()來操作即可。getAttribute()可以取得任何標簽特性，不管是標準的還是自定義的。但是這個方法存在瀏覽器兼容性問題，有的瀏覽器可能會獲取屬性的Property的值，所以需要做一個簡單的測試，看getAttribute()是否獲取特性Attribute的值。

var div = document.querySelector('#text');
div.className = 'foo';
div.getAttribute('className') === 'foo';

如果以上判斷成立。則說明getAttribute()方法存在問題。請不要使用

• Attribute賦值

用setAtttibute()方法可以給任何Attribute特性賦值，包括標準的和自定義的，而且賦值的Attribute都會立刻表現在DOM元素上。使用setAttibute()方法賦值時，兩個參數都必須是字符串

• Property取值

DOM對象Property取值的方式很簡單，因為它是對象，所以直接用對象的取值方法即可，一般情況下使用“.”運算符，有的特性在Proprty中的屬性名不盡相同，比如說class在Property中被存儲在className屬性中。

• Property賦值

DOM對象Property的賦值也很簡單，采用對象的賦值方式即可，但是值得注意的是：屬性Property可以賦任意類型的值，而Attribute只能賦字符串類型的值，而且在IE瀏覽器中Property賦值可能會引起循環引用，內存泄漏，為防止這個問題，jQuery.data()做了特殊處理。

Property和Attribute中的value值

對于表單元素中的value值，Attribute和Property有不一樣的表達方式。

<input value="111" id="text">
<script type="text/javascript">
 var input = document.querySelector('#text');
  input.value = 'aaa'
  console.info(input.value); /// aaa
  console.info(input.getAttribute('value')); // 111
</script>
<script type="text/javascript">
var input = document.querySelector('#text');
  input.setAttribute('value', '111');
  console.info(input.value); // 111
  console.info(input.getAttribute('value')); // 111
</script>

從以上代碼可知：通過Property修改的值，并不會修改特性。但是通過setAttribute設置的值會影響Property的值。但是需要注意的是，第一次通過Property賦值會改變Property中的value屬性值，輸入框顯示的也是這個值，而setAttribute()方法是給Property中attributes對象中的value屬性賦值。輸入框優先顯示Property中的value值，如果Property中的value為空，再去attributes對象中查找value值