js便簽筆記（2）——DOM元素的特性（Attribute）和屬性（Property）

1.介紹：

上篇js便簽筆記http://www.cnblogs.com/wangfupeng1988/p/3626300.html最後提到了dom元素的Attribute和Property，本文簡單介紹一下我的了解。

其實Attribute和Property這兩個單詞，翻譯出來都是“屬性”，《js進階程式設計》書中翻譯為“特性”和“屬性”，以示差別。

簡單了解，Attribute就是dom節點自帶的屬性，例如html中常用的id、class、title、align等：

而Property是這個DOM元素作為對象，其附加的内容，例如childNodes、firstChild等：

2.“腳踏兩隻船”：

另外，常用的Attribute，例如id、class、title等，已經被作為Property附加到DOM對象上，可以和Property一樣取值和指派。但是自定義的Attribute，就不會有這樣的特殊優待，例如：

<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>      

這個div裡面的“title1”就不會變成Property。

即，隻要是DOM标簽中出現的屬性（html代碼），都是Attribute。然後有些常用特性（id、class、title等），會被轉化為Property。可以很形象的說，這些特性/屬性，是“腳踏兩隻船”的。

最後注意：“class”變成Property之後叫做“className”，因為“class”是ECMA的關鍵字。以下代碼等價：

1 var className = div1.className;
2 var className1 = div1.getAttribute("class");      

3.取值與指派：

3.1. Attribute取值：

上一篇部落格http://www.cnblogs.com/wangfupeng1988/p/3626300.html已經提到，可以通過div1.Attributes擷取所有的特性資訊，div1.Attributes将傳回一個NamedNodeList類數組，其中包含了若幹個Attr類型的對象。《js進階程式設計》中提到，為了友善操作，建議大家用setAttribute()和getAttribute()來操作即可。

1 <div id="div1" class="divClass" title="divTitle" align="left" title1="divTitle1"></div>
2 
3 var id = div1.getAttribute("id");              
4 var className1 = div1.getAttribute("class");
5 var title = div1.getAttribute("title");
6 var title1 = div1.getAttribute("title1");   //自定義特性      

getAttribute()可以取得任何特性，不管是标準的還是自定義的。

但是這個方法的浏覽器相容性有問題，有些浏覽器可能會擷取屬性Property的值，是以jQuery要做一個測試，看getAttribute()是否是絕對擷取特性Attribute的值。

div1.className = 'a';
var judge = div1.getAttribute("className") === 'a';      

如果以上代碼成立，說明getAttribute()方法出現了問題，将不再使用。

3.2. Attribute指派：

1 div1.setAttribute('class', 'a');
2 div1.setAttribute('title', 'b');
3 div1.setAttribute('title1', 'c');
4 div1.setAttribute('title2', 'd');      

用setAttrbute()指派，任何Attribute都可以，包括自定義的。而且，指派的Attribute會立刻表現到DOM元素上。

如果是标準特性，也會更新它們關聯的屬性的值：

最後注意，setAttribute()的兩個參數，都必須是字元串。即對特性Attribute職能指派字元串，而對屬性Property就可以賦任何類型的值了。

3.3. Property取值：

屬性取值很簡單。取任何屬性的隻，用“.”就可以：

1 var id = div1.id;
2 var className = div1.className;
3 var childNodes = div1.childNodes;
4 var attrs = div1.attributes;      

此處再次強調：

第一，class特性在變成屬性時，名字改成了“className”，是以div1.className和div1.getAttrbute('class')相同。

第二，上面代碼中的div1.attributes是取的attributes這一屬性，取出來儲存到attrs變量中，attrs就成了一個NamedNodeList類型的對象，裡面存儲了若幹個Attr類型。

3.4. Property指派：

指派和基本的js對象屬性指派一樣，用“.”即可：

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

對屬性Property可以賦任何類型的值，而對特性Attribute隻能指派字元串！

另外，對于屬性Property的指派在IE中可能會引起循環引用，記憶體洩漏。為了防止這個問題，jQuery.data()做了特殊處理，解耦了資料和DOM對象，有興趣可以了解以下。這不是本文的重點，不做贅述。

4.style和onclick：

其實style和onclick與id、class、title一樣，也是“腳踏兩隻船”，但是向id、class、title都是簡單的字元串值，用“.”和getAttribute()擷取結果一樣。但是對于style和onclick這兩者，就不一樣了。

4.1. 用“.”擷取Style：

<div id="div1" class="divClass" style="width:100%; padding:10px;">100</div>

console.log(div1.style);      

以上代碼中，傳回了一個CSSStyleDeclaration對象，這個對象中包含着樣式的所有資訊：

4.2. 用getAttribute()擷取style：

<div id="div1" class="divClass" style="width:100%; padding:10px;">100</div>

console.log(div1.getAttribute("style"));      

以上代碼傳回的就是一個簡單的字元串：“width:100%; padding:10px;”

4.3. 總結：

上面兩個例子，用“.”擷取的是style屬性Property，我們可以給屬性Property賦任何類型的值；而用getAttribute()擷取的是特性Attribute，特性Attribute中隻能存貯字元串。兩者的資料結構不一緻，導緻傳回的結果不一緻。

到這裡，我們就不需要再示範用“.”和getAttribute()擷取onclick了，大家猜想就能得到答案。。。

5.總結：

本文簡單介紹了DOM元素的特性（Attribute）和屬性（Property），下面說一說重點條目：

• 特性和屬性兩者的存儲方式不同；
• “2.腳踏兩隻船”要了解；
• DOM屬性可能會導緻循環引用記憶體洩漏。

就寫到這裡吧，大家覺得有需要補充的，盡管提出意見！

補充：對getAttributeNode()和setAttributeNode()的分析。