DIV CSS 佈局教程網

 這篇文章主要介紹了JavaScript中property和attribute的區別詳細介紹,本文總結了定義、相同這處、不同之處、浏覽器兼容性上的差別等內容,並建議優先選擇property,需要的朋友可以參考下

   

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>
var a = document.body.children[0]
a.href = '/'
alert( 'attribute:' + a.getAttribute('href') ) // '/'
alert( 'property:' + a.href ) // IE: '/', others: full URL
</script>

 

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

 

代碼如下:
<input type="text" value="markup">
<script>
var input = document.body.children[0];
input.setAttribute('value', 'new');
alert( input.value ); // 'new', input.value changed
alert( input.getAtrribute(value) ); // 'new'
</script>

 

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

代碼如下:
<input type="text" value="markup">
<script>
var input = document.body.children[0];
input.value = 'new';
alert(input.getAttribute('value')); // 'markup', not changed!
</script>

 

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

對於style和onclick等事件處理程序，getAttribute方法訪問時會返回字符串，而點號返回的是相應的對象和事件處理函數。

對於input中的checked屬性

代碼如下:
<script>
var input = document.body.children[0]
alert( input.checked ) // true
alert( input.getAttribute('checked') ) // empty string
</script>

 

getAttribute獲取的是你是實際設置的值。而點號返回的是布爾值。

浏覽器兼容性上的差別

1.在IE<9的浏覽器中，可以用點號和getAttribute在相互之間訪問自定義屬性。
2.IE<8（包括IE8種的IE7兼容模式），property和attribute相同。因為attribute對大小寫不敏感，在這種情況下，用getAttribute訪問特性的時候，浏覽器會選擇第一次出現的值。

 

代碼如下:
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值。