html标签的property属性,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方法，可以额外设置第二个参数，

  ，ie8下getAttribute(“readonly”)返回的是“readonly”，而IE67返回boolean。同理

类似selected，checked，multiple。

另外，IE67并没有实现hasAttribute方法，以此可以判断返回绝对路径：

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