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"。最初的 "当前值" 会采用 "初始值"。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- POJ2955(区间dp)
- codeforces 224B(思维+双指针)
- java学习应用篇|idea的基本安装和使用
- codeforces 349B(贪心)
- codeforces 1311D(暴力)
- codeforces 1382C1(思维)
- java学习原理篇|如何学习使用一个新工具
- codeforces 545C(贪心)
- codeforces 1272D(dp)
- codeforces 1203D2(贪心)
- HDOJ 2112(最短路)
- codeforces 1384A(构造)
- codeforces 982C (dfs)
- POJ 2493 (map)
- codeforces 1417C(思维)