深入理解JS中attribute和property的區別

Posted on by

property 和 attribute非常容易混淆，兩個單詞的中文翻譯也都非常相近（property：屬性，attribute：特性），但實際上，二者是不同的東西，屬於不同的范疇。

  • property是DOM中的屬性，是JavaScript裡的對象；
  • attribute是HTML標簽上的特性，它的值隻能夠是字符串；

attribute和property介紹

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

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

有以下代碼：

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

var in1=document.getElementById("div1");
console.log(in1);

對於id為div1的div，它的property內容如下：（部分）

可以發現有一個名為“attributes”的屬性，類型是NamedNodeMap，同時有“id”和“className”、”title“等基本的屬性，但沒有“titles”這個自定義的屬性。

 console.log(in1.id);          //div1
    console.log(in1.className);        //divClass
    console.log(in1.title);          //divTitle
    console.log(in1.title1);       //undefined

可以發現，標簽中的屬性，“id”和“className”、”title“會在in1上創建，而“titles”不會被創建。這是由於，每一個DOM對象都會有它默認的基本屬性，而在創建的時候，它隻會創建這些基本屬性，我們在TAG標簽中自定義的屬性是不會直接放到DOM中的。

那自定義的”title1“去哪裡瞭呢？在attributes屬性裡可以看到如下：

“title1”被放在瞭attributes這個對象裡，這個對象按順序記錄瞭我們在TAG中定義的屬性和屬性的數量。

從這裡就可以看出，attributes是屬於property的一個子集，它保存瞭HTML標簽上定義屬性。如果再進一步探索attitudes中的每一個屬性，會發現它們並不是簡單的對象，它是一個Attr類型的對象，擁有NodeType、NodeName等屬性。關於這一點，稍後再研究。註意，打印attribute屬性不會直接得到對象的值，而是獲取一個包含屬性名和值的字符串，如：

console.log(in1.attibutes.title1);        // divTitle1

由此可以得出：

  • HTML標簽中定義的屬性和值會保存該DOM對象的attributes屬性裡面；
  • 這些attribute屬性的JavaScript中的類型是Attr，而不僅僅是保存屬性名和值這麼簡單；

再如下：

<input id="in_2">

在它的property中有如下部分：

盡管我們沒有在TAG中定義“value”，但由於它是DOM默認的基本屬性，在DOM初始化的時候它照樣會被創建。

“腳踏兩隻船”

常用的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的關鍵字。

  • DOM有其默認的基本屬性，而這些屬性就是所謂的“property”，無論如何，它們都會在初始化的時候再DOM對象上創建。
  • 如果在TAG對這些屬性進行賦值，那麼這些值就會作為初始值賦給DOM的同名property。

attribute和property的取值和賦值

1、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");   //自定義特性

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

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

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

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

2、attribute賦值

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

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

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

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

3、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類型。

4. Property賦值

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

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

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

另外，對於屬性Property的賦值在IE中可能會引起循環引用，內存泄漏。為瞭防止這個問題，jQuery.data()做瞭特殊處理，解耦瞭數據和DOM對象。

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

in1.value='new value of prop';

console.log(in1.value);               // 'new value of prop'
console.log(in1.attributes.value);         // 'value="1"'

此時，頁面中的輸入欄的值變成瞭“new value of prop”，而propety中的value也變成瞭新的值，但attributes卻仍然是“1”。從這裡可以推斷，property和attribute的同名屬性的值並不是雙向綁定的。

如果反過來，設置attitudes中的值，效果會怎樣呢？

    in2.setAttribute('value','ni')
    console.log(in2.value);          //ni
    console.log(in2.attributes.value); //value='ni'

由此，可得出結論：

  • property能夠從attribute中得到同步；
  • attribute不會同步property上的值；
  • attribute和property之間的數據綁定是單向的，attribute->property；
  • 更改property和attribute上的任意值，都會將更新反映到HTML頁面中；

到此這篇關於深入理解JS中attribute和property的區別 的文章就介紹到這瞭,更多相關JS attribute property內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：