专栏首页前端杂货铺html标签属性(attribute)和dom元素的属性(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方法,可以额外设置第二个参数,

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Callbacks vs Events

      前言:本文翻译自Dean Edwards的一篇文章,原文地址:http://dean.edwards.name/weblog/2009/03/callbac...

    欲休
  • node的异步执行性能

    https://github.com/kyrylkov/promise-async-performance

    欲休
  • js实现css3的过渡,需要注意的一点(浏览器优化)

    大部分浏览器对元素几何改变时候的重排做了优化。据说是这样子,一定时间内本应多次重排的改变,浏览器会hold住,仅一次重排。其中如果使用分离的一步处理过程,例如计...

    欲休
  • 【前端词典】Vue 使用时常见的 5 个问题

    可能有些人注意到了,在 vue-cli 生成的模板中在导入组件时使用了这样的语法:

    小生方勤
  • HTML基础知识

    div用于存放需要显示的数据,css用于指定如何显示数据样式,做到结构与样式相互分离。

    达达前端
  • AvroSchemaRegistry

    该控制服务器提供一个注册和访问schema的服务,可以简单的理解为key-value。key是schema的名称,value是符合Avro Schema格式的文...

    用户5475193
  • uNetXST:将多个车载摄像头转换为鸟瞰图语义分割图像

    项目地址:https://github.com/ika-rwth-aachen/Cam2BEV

    3D视觉工坊
  • Fastjson与Jackson性能问题

    话说在前面,本篇并不会去比较fastjson与Jackson在正常业务场景下的json解析性能,侧重点是比较两者在解析大json字符串上的性能。可以给出的结论是...

    Java艺术
  • SpringMVC源码解析-HandlerExecutionChain

    调用所有的HandlerInterceptor拦截器并调用其preHandler方法。

    JavaEdge
  • 数据挖掘系列(6)决策树分类算法

     从这篇开始,我将介绍分类问题,主要介绍决策树算法、朴素贝叶斯、支持向量机、BP神经网络、懒惰学习算法、随机森林与自适应增强算法、分类模型选择和结果评价。总共7...

    小莹莹

扫码关注云+社区

领取腾讯云代金券