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(){...})失效

分析:

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

时间: 2024-08-29 08:45:54

html标签属性(attribute)和dom元素的属性(property)的相关文章

jQuery -> 获取/设置/删除DOM元素的属性

Sum square difference Problem 6 The sum of the squares of the first ten natural numbers is, 12 + 22 + ... + 102 = 385 The square of the sum of the first ten natural numbers is, (1 + 2 + ... + 10)2 = 552 = 3025 Hence the difference between the sum of

jQuery -> 获取/设置/删除DOM元素的属性

jQuery的属性操作很easy,以下以一个a元素来说明属性的获取/设置/删除操作 <body> <a>jquery.com</a> </body> 加入?属性 $('a').attr('href', 'http://www.jquery.com') 加入?多个属性 $('a').attr({'href':'http://www.jquery.com', 'title':'jquery.com'}) 获取属性 $('a').attr('href') clas

DOM元素选择 属性操作 事件操作 节点操作 创建元素的区别

DOM 获取页面元素 document.getElementById('id'); // id 选择器 document.getElementsByTagName('div'); // 标签选择器 返回伪数组 // html新增 document.getElementsByClassName('box'); // 类名学则器 document.querySelector('#id'): // 返回指定选择器的第一个元素对象,里面写css选择器 document.querySelectorAll(

Dom元素的属性常用操作汇总

2月20日汇总: 元素的属性操作:1.$(function(){ $(''#box).attr('class','box')}); 2.$('#box').attr({'title':'标题','class':'box'}) 添加多个通过定义对象添加:$("#box").attr("title",function(){ return '必须哦'}) 函数有返回值: 3.$("#box").removeAttr('title')删除指定元素属性:

jQuery - 获取内容和属性:操作 HTML 元素和属性的强大方法

jQuery - 获取内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. 获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记)

DOM元素的特性和属性

首先来看一下他们的概念: 特性(Attribute):是DOM元素在文档中作为html标签拥有的属性: 属性(Property):是DOM元素在js中作为对象拥有的属性: 首先来了解一下DOM的五个标准特性(id.title.lang.dir.class) 对于标准特性来说,Attribute和Property是同步的,是会自动更新的, 对于自定义的特性来说,他们是不同步的(自定义的特性不会自动 添加到property) HTML5规范对自定义特性做了增强,只要自定义特性以"data-attrN

DOM元素属性值如果设置为对象

结论:内部会调用toString方法,将设置的对象转换为字符串添加给相应的属性: 这个问题呢,是通过jQuery的each方法中,回调函数的this指向问题而来: 我们知道,回调函数中的this如果指向的是基本数据类型,那么系统会自动将这个基本数据类型的值包装为对应的对象类型: 就比如: 数组里面存的是string类型的值,然后jq实例调用each方法,打印的this如下图所示: this指向的基本数据类型的值被转换为了String类型: 但是这里说的不是这个问题,而是和这个问题类似,我们在给D

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条 一丶jQ操作标签内文本 html() 标签元素中的内容 /** 替换的内容可以使一个js对象,jq对象,文本 **/ /* 获取值:获取选中标签元素的所有内容 ,包括标签*/ $('ul').html() " <li>1</li> <li&g

HTML5学习笔记三 HTML元素、属性、标题、段落

一.HTML 元素 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签中进行关闭(以开始标签的结束而结束) 大多数 HTML 元素可拥有属性 嵌套的 HTML 元素  HTML 文档由嵌套的 HTML 元素构成. <!doctype html> <html> <body> <p>这是第一段</p> </body&