HTML中的attribute屬性和JavaScript中的property屬性的區別

題龍陽縣青草湖
         （元）唐溫如
    西風吹老洞庭波，一晚上湘君白髮多。
    醉後不知天在水，滿船清夢壓星河。
複製代碼

1、基本概念區別

• attribute：是HTML標籤上的某個屬性，如id、class、value等以及自定義屬性

  它的值只能是字符串，關於這個屬性一共有三個相關的方法，setAttribute、getAttribute、removeAttribute；

• property：是js獲取的DOM對象上的屬性值，好比a，你能夠將它看做爲一個基本的js對象。

  這個節點包括不少property，好比value，className以及一些方法onclik等方法。

從上圖中咱們能夠看出，一個js對象有不少property，該集合名字爲properties，properties裏面有其餘property以及attributies，attributies裏面有不少attribute。因此attributes實際上是屬於property的一個子集。

簡單理解，Attribute就是DOM節點自帶的屬性，HTML標籤中定義的屬性和值會保存該DOM對象的attributes屬性裏面；而Property是這個DOM元素做爲對象其附加的內容，例如childNodes、firstChild等，且都是默認的基本屬性，而在建立的時候，它只會建立這些基本屬性，。

總結：

• 1. property和attributies都是properties的子集，而每一個attribute是attributies的子集；
• 2. attribute能夠理解爲特性，能夠自定義，直接在html標籤上添加的和使用setAttribute添加的狀況一致，即html標籤添加的都是attribute屬性， property則是使用xx.屬性進行更改，一般來說，更改互相影響（value除外）
• 3. 當添加新的非默認屬性時，是不互通的；
• 4. 一些特殊屬性，則須要特殊對待。

2、attribute和property的取值和賦值

一、attribute取值

《js高級程序設計》中提到，爲了方便操做，建議你們用setAttribute()和getAttribute()來操做便可。

<div id="div1" class="divClass" title="divTitle" align="left" title1="divTitle1"></div>
 
 var id = div1.getAttribute("id");              
 var className1 = div1.getAttribute("class");
 var title = div1.getAttribute("title");
 var title1 = div1.getAttribute("title1");   //自定義特性
複製代碼

二、attribute賦值

div1.setAttribute('class', 'a');
 div1.setAttribute('title', 'b');
 div1.setAttribute('title1', 'c');
 div1.setAttribute('title2', 'd');
複製代碼

用setAttrbute()賦值，任何Attribute均可以，包括自定義的。並且，賦值的Attribute會馬上表現到DOM元素上。

若是是標準特性，也會更新它們關聯的屬性的值：

注意：在使用setAttribute的時候，該函數必定接收兩個參數，setAttribute（attributeName,value）,不管value的值是什麼類型都會編譯爲字符串類型。在html標籤中添加屬性，本質上是跟在標籤裏面寫屬性時同樣的，因此屬性值最終都會編譯爲字符串類型。

三、property取值

屬性取值很簡單。取任何屬性的只，用「.」就能夠：

var id = div1.id;
 var className = div1.className;
 var childNodes = div1.childNodes;
 var attrs = div1.attributes;
複製代碼

此處再次強調：

• class特性在變成屬性時，名字改爲了「className」，所以div1.className和div1.getAttrbute('class')相同。
• 上面代碼中的div1.attributes是取的attributes這一屬性，取出來保存到attrs變量中，attrs就成了一個NamedNodeList類型的對象，裏面存儲了若干個Attr類型。

四、property賦值

賦值和基本的js對象屬性賦值同樣，用「.」便可：

div1.className = 'a';
div1.align = 'center';
div1.AAAAA = true;
div1.BBBBB = [1, 2, 3];
複製代碼

對屬性Property能夠賦任何類型的值，而對特性Attribute只能賦值字符串！

更改property和attribute其中一個值，會出現什麼結果

由此，可得出結論：

• property可以從attribute中獲得同步；
• attribute也會同步property上的值；
• attribute和property之間的數據綁定是雙向的；
• 更改property和attribute上的任意值，都會將更新反映到HTML頁面中。