javascript中attribute和property的区别详解
DOM元素的attribute和property很容易混倄在⼀起,分不清楚,两者是不同的东西,但是两者⼜联系紧密。很多新⼿朋友,也包括以前的我,经常会搞不清楚。
attribute翻译成中⽂术语为“特性”,property翻译成中⽂术语为“属性”,从中⽂的字⾯意思来看,确实是有点区别了,先来说说attribute。
attribute是⼀个特性节点,每个DOM元素都有⼀个对应的attributes属性来存放所有的attribute节点,attributes是⼀个类数组的容器,说得准确点就是NameNodeMap,总之就是⼀个类似数组但⼜和数组不太⼀样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了⼀个attribute节点。
复制代码代码如下:
<div class="box" id="box" gameid="880">hello</div>
上⾯的div元素的HTML代码中有class、id还有⾃定义的gameid,这些特性都存放在attributes中,类似下⾯的形式:
复制代码代码如下:
[ class="box", id="box", gameid="880" ]
可以这样来访问attribute节点:
复制代码代码如下:
var elem = ElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box
但是IE6-7将很多东西都存放在attributes中,上⾯的访问⽅法和标准浏览器的返回结果⼜不同。通常要获取⼀个attribute节点直接⽤getAttribute⽅法:
复制代码代码如下:
console.log( Attribute('gameid') ); // 880
要设置⼀个attribute节点使⽤setAttribute⽅法,要删除就⽤removeAttribute:
复制代码代码如下:
elem.setAttribute('testAttr', 'testVal');
console.log( veAttribute('gameid') ); // undefined
attributes是会随着添加或删除attribute节点动态更新的。
property就是⼀个属性,如果把DOM元素看成是⼀个普通的Object对象,那么property就是⼀个以名值对(name=”value”)的形式存放在Object中的属性。要添加和删除property也简单多了,和普通的对象没啥分别:
复制代码代码如下:
elem.gameid = 880; // 添加
console.log( elem.gameid ) // 获取
delete elem.gameid // 删除
之所以attribute和property容易混倄在⼀起的原因是,很多attribute节点还有⼀个相对应的property属性,⽐如上⾯的div元素的id和class既是attribute,也有对应的property,不管使⽤哪种⽅法都可以访问和修改。
复制代码代码如下:
console.log( Attribute('id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( Attribute('id') ); // hello
但是对于⾃定义的attribute节点,或者⾃定义property,两者就没有关系了。
复制代码代码如下:
console.log( Attribute('gameid') ); // 880
console.log( elem.gameid ); // undefined
elem.areaid = '900';
console.log( Attribute('areaid') ) // null
对于IE6-7来说,没有区分attribute和property:
复制代码代码如下:
console.log( Attribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( Attribute('areaid') ) // 900
很多新⼿朋友估计都很容易掉进这个坑中。
DOM元素⼀些默认常见的attribute节点都有与之对应的property属性,⽐较特殊的是⼀些值为Boolean类型的property,如⼀些表单元素:
复制代码代码如下:
javascript的特性
<input type="radio" checked="checked" id="raido">
var radio = ElementById( 'radio' );
console.log( Attribute('checked') ); // checked
console.log( radio.checked ); // true
对于这些特殊的attribute节点,只有存在该节点,对应的property的值就为true,如:
复制代码代码如下:
<input type="radio" checked="anything" id="raido">
var radio = ElementById( 'radio' );
console.log( Attribute('checked') ); // anything
console.log( radio.checked ); // true
最后为了更好的区分attribute和property,基本可以总结为attribute节点都是在HTML代码中可见的,⽽property只是⼀个普通的名值对属性。
复制代码代码如下:
// gameid和id都是attribute节点
// id同时⼜可以通过property来访问和修改
<div gameid="880" id="box">hello</div>
// areaid仅仅是property
elem.areaid = 900;

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。