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"。最初的 "當前值" 會采用 "初始值"。