html 标签属性 dom属性,html标签属性(attribute)和dom元素的属性(property)

简介

attribute和property都有属性之意,但对于attribute和property的区分其实并不难。从对象来讲,attribute是html文档上标签属性,css

而property则是对应dom元素的自身属性。从操做方法上来看,attribute能够经过dom core规范的接口 getAttribute和setAttributehtml

进行获取修改,而property能够经过对象访问属性的方式 . 或者 ["  "]来修改获取。node

可是对于ie6,7,8(Q)模式下,会与标准w3c浏览器发生兼容性问题:浏览器

1,在ie6,7,8(Q)下,这两种方法等同,即getAttribute和". || [' ']"能够相互访问html上的标签属性或者dom对象的特有属性(典型:dom

可经过getAttribute获取Dom元素的innerHTML和offsetWidth,clientWidth属性,也可经过setAttribute设置;对于w3c浏览器而言,spa

它们按照规范在html文档上设置这样的自定义属性,并不修改dom元素的属性),而在w3c浏览器下能够正确区分他们的异同;code

2,在ie6,7,8(Q)下,经过getAttribute和setAttribute能够访问设置input类型为text,password,file的value属性,而w3c只有htm

经过对象属性的形式才能设置获取;对象

3,在ie6,7,8(Q)下,经过setAttribute没法正确设置“class”,即setAttribute(“class”,“show”)不成功,经过getAttribute(“class”)blog

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

Python网络爬虫与推荐算法新闻推荐平台:网络爬虫:通过Python实现新浪新闻的爬取,可爬取新闻页面上的标题、文本、图片、视频链接(保留排版) 推荐算法:权重衰减+标签推荐+区域推荐+热点推荐.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计,皆可应用在项目、毕业设计、课程设计、期末/期/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值