dom元素的特性(attribute)和属性(property)区别
来源: 何俊逸/
华南师范大学,建信金融广州事业群
1675
9
0
2018-01-08


attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数组的容器,说得准确点就是NameNodeMap,总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

<div class ="box" id="box" gameid="880">hello</div>

其实就是<>标签里面的属性

property就是一个属性,如果把DOM元素看成是一个普通的Object对象,那么property就是一个以名值对(name=”value”)的形式存放在Object中的属性。要添加和删除property也简单多了,和普通的对象没啥分别,例如

elem.gameid = 880; // 添加

console.log( elem.gameid ) // 获取

delete elem.gameid // 删除

简单理解,Attribute就是dom节点自带的属性,例如html中常用的id、class、title、align等:

而Property是这个DOM元素作为对象,其附加的内容,例如childNodes、firstChild等:

脚踏两条船

另外,常用的Attribute,例如id、class、title等,已经被作为Property附加到DOM对象上,可以和Property一样取值和赋值。但是自定义的Attribute,就不会有这样的特殊优待,例如:

<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>

这个div里面的“title1”就不会变成Property。

即,只要是DOM标签中出现的属性(html代码),都是Attribute。然后有些常用特性(id、class、title等),会被转化为Property。可以很形象的说,这些特性/属性,是“脚踏两只船”的。

比如在浏览器中输入div#div1.divclass就可以看到div1的属性(property)

看到attribute是其中的一个属性,而attribute里面的id值这个也作为了属性(property)

注意

getAttribute()可以取得任何特性,不管是标准的还是自定义的。

但是这个方法的浏览器兼容性有问题,有些浏览器可能会获取属性Property的值,因此jQuery要做一个测试,看getAttribute()是否是绝对获取特性Attribute的值。

div1.className = 'a';var judge = div1.getAttribute("className") === 'a';

如果以上代码成立,说明getAttribute()方法出现了问题,将不再使用。



登录用户可以查看和发表评论, 请前往  登录 或  注册
SCHOLAT.com 学者网
免责声明 | 关于我们 | 联系我们
联系我们: