html標籤屬性（attribute）和dom元素的屬性（property）

簡介

attribute和property都有屬性之意，但對於attribute和property的區分其實並不難。從對象來講，attribute是html文檔上標籤屬性，

而property則是對應dom元素的自身屬性。從操做方法上來看，attribute能夠經過dom core規範的接口 getAttribute和setAttribute

進行獲取修改，而property能夠經過對象訪問屬性的方式 . 或者 ["  "]來修改獲取。

可是對於ie6，7,8（Q）模式下，會與標準w3c瀏覽器發生兼容性問題：

　　1，在ie6,7,8（Q）下，這兩種方法等同，即getAttribute和". || [' ']"能夠相互訪問html上的標籤屬性或者dom對象的特有屬性（典型：

　　可經過getAttribute獲取Dom元素的innerHTML和offsetWidth，clientWidth屬性，也可經過setAttribute設置；對於w3c瀏覽器而言，

　　它們按照規範在html文檔上設置這樣的自定義屬性，並不修改dom元素的屬性），而在w3c瀏覽器下能夠正確區分他們的異同；

　　2，在ie6,7,8（Q）下，經過getAttribute和setAttribute能夠訪問設置input類型爲text，password，file的value屬性，而w3c只有

　　經過對象屬性的形式才能設置獲取；

　　3，在ie6,7,8（Q）下，經過setAttribute沒法正確設置「class」，即setAttribute（「class」，「show」）不成功，經過getAttribute（「class」）

　　將是null，經過setter（getter）className兼容；

　　4，在ie6,7,8（Q）下，經過setAttribute沒法正確設置「style」，經過getAttribute（「style」）返回的將不是字符串（DOMString），而是

　　CSSStyleDeclaration對象，經過setter（getter）style.cssText兼容；

　　5，在ie6,7,8（Q）下，沒法經過setAttribute設置事件處理程序，setAttribute（‘onclick’，function（）{...}）失效

 　  6,  IE系列下，IE6,7獲取href或者src屬性，使用getAttribute和dom對象屬性訪問結果相同，返回的都是絕對路徑，而對於IE8及其之後的IE，

　　使用getAttribute返回的是在html中的路徑，而dom對象屬性訪問返回絕對路徑。於IE6，7下的getAttribute方法，能夠額外設置第二個參數，

　　當參數爲2時，返回相對URL，詳情請看MSDN解釋。另外，對於 <input type="text" readonly> 和

　　 <input type="text" readonly="readonly">  ，ie8下getAttribute（「readonly」）返回的是「readonly」，而IE67返回boolean。同理

　　相似selected，checked，multiple。

　　另外，IE67並無實現hasAttribute方法，以此能夠判斷返回絕對路徑：

　　

function getScriptAbsoluteSrc(node) {
    return node.hasAttribute ? // non-IE6/7
      node.src :
      // see http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
      node.getAttribute("src", 4)
  }

 

分析

　　dom core規範指出，Element節點實現了getAttribute和setAttribute接口，可是對於具體的Dom元素而言，例如div，他實現了接口是

　　HTMLDivElement，而HTMLDivElement接口繼承自HTMLElement接口，HTMLElement又實現了Dom （HTML）規範（可看作是dom core擴展，

　　針對HTML和XHTML的對象細節描述）,Dom (HTML)規範指出了dom元素屬性property和html標籤屬性的對應關係，他們分別是id，dir，lang，title

　　，className。特定的HTMLElement例如HTMLAElement也額外實現了href與html特性href的對應。當html特性是JS的保留字的狀況下，會在特性名稱

　　前加上「html」，如label的label.htmlFor.在HTML解析階段，瀏覽器會將html的上述標籤屬性綁定在相對應DOM元素的屬性上，這樣修改任意一個Dom元

　　素的屬性，都會在標籤屬性上獲得呈現。

　　

　　而對於input（type=text|password|file）來講，其value值能夠理解爲兩種，其一就是在input標籤上顯式設置的value屬性，另外一個就是經過

　　輸入而進行改變的currentValue。 DOM Level 2 HTML 規範中指出，當 INPUT 元素 type 屬性爲 "text"、"file" 或 "password" 時，其對應的

　　HTMLInputElement 對象的 value 屬性表明了這個控件 "currentValue"，修改這個屬性會改變控件的 "當前值"，可是並不會改變其 HTML 標籤上的 value 屬性。

　　根據 HTML4.01 規範中的描述，一個 INPUT 元素 HTML 標籤上的 value 屬性指定了這個控件的 "currentValue"。最初的 "當前值" 會採用 "初始值"。