這篇文章主要介紹了JavaScript中property和attribute的區(qū)別詳細介紹,本文總結(jié)了定義、相同這處、不同之處、瀏覽器兼容性上的差別等內(nèi)容,并建議優(yōu)先選擇property,需要的朋友可以參考下

1. 定義

Property：屬性，所有的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element并添加了一些屬性，添加的這些屬性分別對應(yīng)于每個HTML元素都有下面的這5個標準特性: id,title,lang,dir,className。DOM節(jié)點是一個對象，因此，他可以和其他的JavaScript對象一樣添加自定義的屬性以及方法。property的值可以是任何的數(shù)據(jù)類型，對大小寫敏感，自定義的property不會出現(xiàn)在html代碼中，只存在js中。

Attribute：特性，區(qū)別于property，attribute只能是字符串，大小寫不敏感，出現(xiàn)在innerHTML中，通過類數(shù)組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'（單向）同步的內(nèi)置屬性。

例如，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方法訪問時會返回字符串，而點號返回的是相應(yīng)的對象和事件處理函數(shù)。

對于input中的checked屬性

代碼如下:

<script>

var input = document.body.children[0]

alert( input.checked ) // true

alert( input.getAttribute('checked') ) // empty string

</script>

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

瀏覽器兼容性上的差別

1.在IE<9的瀏覽器中，可以用點號和getAttribute在相互之間訪問自定義屬性。

2.IE<8（包括IE8種的IE7兼容模式），property和attribute相同。因為attribute對大小寫不敏感，在這種情況下，用getAttribute訪問特性的時候，瀏覽器會選擇第一次出現(xiàn)的值。

代碼如下:

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

優(yōu)先選擇property

在實際應(yīng)用中，98%的 DOM 操作都是使用 properties。

只有兩種情形需要使用attributes

1.自定義 HTML attributes，因為它并不同步到DOM property。

2.訪問內(nèi)置的 HTML attributes，這些 attribute 不能從 property 同步過來。例如 INPUT標簽的value值。

更多信息請查看IT技術(shù)專欄