dom节点有一些属性和对象属性. 有时候我们会把他们搞混淆, 因为他们是相关联的, 但是他们真的是两个不同的东西.
特性 dom节点是一个对象. 因此它可以存储自定义的对象属性和方法,就像任何的javascript对象. 下面的例子是指定分配一个对象给document.body的mydata对象属性.
document.body.mydata = { name: 'john'}alert(document.body.mydata.name) // johndocument.body.sayhi = function() { alert(this.nodename)} document.body.sayhi() // body
自定义的对象属性和方法仅在javascript是可以见有效的. 不影响html.
同样, 自定义对象属性可以通过for..in来与原生对象属性混合输出.
document.body.custom = 5var list = []for(var key in document.body) { list.push(key)}alert(list.join('\n'))
自定义dom对象属性:
可以有任何值. 对象属性名称有大小写之分.
不影响html
属性 dom节点提供了下面的标准方法来访问html的标签属性.
elem.hasattribute(name)- 检查属性是否存在
elem.getattribute(name)- 获取属性的值
elem.setattribute(name, value)- 设置一个属性
elem.removeattribute(name)- 移除属性
在小于ie8和ie8兼容模式下,这些属性就表现得不一样:
仅 getattribute和 setattribute方法存在.
他们实际上是修改dom对象属性, 不是属性.
属性和对象属性在ie<8是融合的. 有时候会导致不可预料的结果, 但是这种方式管理属性, 是比较好的一个处理方法.
对象属性和属性之间的对比:
都是字符串.
名称大小写表现得不一样. 因为html属性没有大小写之分.
他们都可以使用innerthml(除了老版本的ie之外)
可以列出所有的属性数组.
例如, 我们看看下面的html结构:
代码名称

下面的例子设置一些属性.

运行上面这段代码的时候, 有下面几点提示:
getattribute('about')使用大写名称, 这是没关系的.
你可以试着分配一个字符串或者另外类型的原始值, 都会变成一个字符串. 对象会自动转换, 但是基于其他类型的值, ie会有一些问题,
innerhtml会包含一个新的属性test
对象属性和属性同步化 dom节点的每一种类型有着标准的对象属性. 例如, 'a' 标签元素. 他有href和accesskey属性, 以及其他特定的属性. 除此之外, 他会继承id属性以及其他的htmlelement的属性.
标准的dom对象属性和属性是同步的. id 例如, 浏览器id属性和id对象属性是同步存在的:

href 同步不保证有相同的值.下面是设置href属性的例子:

这是因为href的正确连接, 符合w3c规范
另外的属性, 他们是同步的, 但不是复制. 例如下面的input.checked:

input.checked对象属性值在true和false之间, 但是属性则不会管这些.
value 同样创建对象属性与之同步, 只有一种方式. 下面例子中,input.value从属性设置中同步:

但是从对象属性中创建, 属性则同步不了:

value在对象属性更新后, 属性的值还是原来的值. 例如当访问者输入一些内容的时候, 如果input被改变或者重新被设置,原始值可以用来做检查.
class/classname 名称不一样: class属性与之对应的对象属性是classname 因为 class 是在javascript中是保留字, 所以则会选择另外的名称classname来与class想匹配

提示, 这个例子在ie<9下是不能正常运行的, 因为奇怪的方式属性和对象属性混合使用.
我们可以让它执行好, 但是仅使用classname对象属性来管理class,不是attribute.
指定一个div到一个变量
获取data-widgetname的属性值
文档
select the genre

有趣的老版本ie 首先,ie<9同步所有的对象属性和属性:
document.body.setattribute('try-in-ie', 123)alert( document.body['try-in-ie'] === 123 ) // true in ie<9
类型也是一样的.属性没有变成一个字符串.
其次,在ie<8(或者ie8兼容ie7的模式)对象属性和属性一样.会出现一些有趣的结果.
例如, 对象属性名称是大小写区分的,而属性名称则不是. 如果浏览器认为他们是一样的, 那下面的代码结果会是什么样?
document.body.abba = 1 // assign property (now can read it by getattribute)document.body.abba = 5 // assign property with another case// must get a property named 'abba' in case-insensitive way.alert( document.body.getattribute('abba') ) //
浏览器避开这些陷阱,则给他们设置一个默认值. 在ie中getattribute方法提供了可选的第二个参数, 来决定是否大小写区分. 可以看看msdn getattribute的详细说明.
所有浏览器, 除了ie<9, class属性改变class, 不要使用attribute. 同时使用classname属性 兼容ie, 正确的使用属性.或者换句话说, 试着所有时候都使用对象属性, 除非你真的需要一个属性的时候.
需要属性的时候:
获取一个自定义的属性时, 因为dom对象属性中没有同步这些属性.
获取标准的html属性的原始值,例如 .
属性作为dom节点 属性节点同样可以访问,通过elem.attributes集合.
在 attributes 集合中, 每一个属性通过一个特殊的dom节点呈现. name, value和另外的对象属性.
例如:
text
顺便说说, ie
属性dom节点不是document数的一部分, 他们从他们的元素标签中访问.
总结 在dom模式中,属性和对象属性都是核心的特点.
下面表格中表现了他们的关系和不同:
properties attributes
任何值 string
名称大小写区分 不区分大小写
innerhtml中不会呈现 innerhtml中可见
标准的dom对象属性和属性是同步的, 自定义的不是.
属性和对象属性在ie
如果你想有自定义的属性, 可以通过html5中有效的data-*属性来完成. 不明白的可以看html5标准.
在实际当中, 98%例子中, dom对象属性被使用.
两种情况下使用属性:
自定义的html属性, 因为dom对象属性不同步.
去访问一个创建在html属性中的, 没有同步的dom对象, 且确保你需要这个属性. 比如 input的value.
本文属于吴统威的博客, 微信公众号:bianchengderen,qq群:186659233的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=226 ,欢迎大家传播与分享.