DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript中property和attribute的區別詳細介紹
JavaScript中property和attribute的區別詳細介紹
編輯:JavaScript基礎知識      日期:2016/12/24 11:47:33

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值。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved