被问到 property 和 attribute 的区别,想来也是要好好看一下。
一、基本概念区别
其实Attribute和Property这两个单词,翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”,以示区别。从而我们也可以顾名思义
特性vs属性(当然平时也可以简单的说两者都是属性),可以这样认为:
Attribute
是HTML标签上的某个属性(特性),如‘type’,‘id‘,‘value‘,‘class‘以及自定义属性,它的值只能是字符串。
Property
javascript获取到的DOM节点对象,比如a 你可以将他看作为一个基本的js对象,这个节点对象包括很多属性((property),比如“value”,“className”)
以及一些方法,setAttribute,getAttribute,onclick等
还是太生涩了?看个input的例子
<input type="text" name="age" class="age" id="age" value="17" myAttr="myAttr">
可以看到,attributes只是properties这个大货色中的某个属性,其余property也是这样(和attributes同级)
再来看看attributes这货长什么样?
ok那我们可以直接这样玩了
也许是因为class是js的保留字,不能直接age.class吧,用className代替这几种方式分别获取了attribute和property
但是我们的自定义属性,就有不同了
常用的Attribute,例如id、class、name等,已经被作为Property附加到DOM对象上,可以和Property一样取值和赋值。但是自定义的Attribute,就不会有这样的特殊优待
attribute的获取设置修改一般使用 setAttribute()和getAttribute() 比较方便
而property 则使用 打点符. 或 [] 的方式获取即可
二、一些息息相关又有差异的东东
1. value的差异
默认情况下是17
手动或直接代码更改value为15后(可以看出输入框value的变化只会引起property方面的变化)
那主动权换为attribute呢?
2. name , id, class (互相影响)
同样的,让attribute来主动
class的操作
3.上面都是在原有属性改来改去,那增添新的属性会怎样呢?
abc,cba是可以认为是一个非默认属性吧,title,align 是,看下结果慢慢领会
把主动权交给attribute
所以一般对于默认的自有属性而言,property和attribute的影响是双向的
事实上value这东西真的很... 假设我最初没有value,会发生什么呢?
<input type="text" name="age" class="age" id="age" myAttr="myAttr">
所以啊,这是个特例,要想attribute的value也能得到变化,还非得特地去setAttribute()才行
4.对于形如 hidden:true的属性
高能预警:看这个东西会死很多脑细胞..(我的建议是跳过这段吧)
可以发现,若初始
假如我一开始input就设置了hidden呢?
<input type="text" name="age" class="age" id="age" myAttr="myAttr" hidden>
是不是很绕啊~~~~~~
那假如我一开始就给hidden来个属性呢,比如 no_hidden?(这样输入框也是会直接隐藏的)
<input type="text" name="age" class="age" id="age" myAttr="myAttr" hidden="no_hidden">
我们来看看操作
还有一种情况额,假如我设置为 hidden=true呢
<input type="text" name="age" class="age" id="age" myAttr="myAttr" hidden=true>
基本没其他情况了吧,总结一下? 好难总结,还是算了..
5. style属性
<input type="text" name="age" class="age" id="age" myAttr="myAttr" style="width:50%;height:30px;">
对于这其中的style Attribute和property的返回有什么不同呢? Attribute照常是字符串,而property则是个对象
6. onclick属性
<input type="text" name="age" class="age" id="age" myAttr="myAttr" onclick="function(){}">
Attribute可以正确获取到,而property方式就只能作为事件处理机制(所以会报错),也许也可以将其归入自定义属性的行列
7. src 或 href 这些有链接形式的属性
<img src="./1.jpg" id="img">
获取的时候,Attribute会直接使用表面上的属性(相对路径),property则会使用实际的绝对路径(设置的时候可以用相对)
三、来个小小的总结
1.没有非常明确的区别,只是有某些规律可遵循
2.attributes是和每个Property是在同一父级(可以这样认为吧)的,而每个Attribute的父级就是attributes
3. Attribute可以理解为特性(就是说可以有自定义的属性),property可以理解为属性(即html最基本提供的属性)
4.一般来说,无论开始还是任何时候,Attribute的变化会引起Property的变化, 而property的变化也会同步给Attribute进行变化(value除外)
5.有一些特殊的属性,要特殊对待
6.为了统一,最好直接使用 setAttribute()和getAttribute() ,IE8以上都支持了,不过IE6/7不支持的话,
比如obj.setAttribute("style","z-index:999;cursor:pointer")不支持,
那就退化成obj.style.cssText="z-index:999;cursor:pointer";
7.jq提供的 attr()和prop()方法, 其实就是基于 Attribute和property原生的使用方式