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