资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

attribute和property的区别-创新互联

DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密。很多新手朋友,也包括以前的我,经常会搞不清楚。attribute和proper
ty的区别

attribute翻译成中文术语为“特性”,property翻译成中文术语为“属性”,从中文的字面意思来看,确实是有点区别了,先来说说attribute。

创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都网站建设、乌拉特后网络推广、小程序定制开发、乌拉特后网络营销、乌拉特后企业策划、乌拉特后品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联建站为所有大学生创业者提供乌拉特后建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

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

1class="box" id="box" gameid="880">hello

上面的div元素的HTML代码中有class、id还有自定义的gameid,这些特性都存放在attributes中,类似下面的形式:

1[class="box", id="box", gameid="880" ]

可以这样来访问attribute节点:

1var elem = document.getElementById('box' );
2console.log( elem.attributes[0].name );// class
3console.log( elem.attributes[0].value );// box

但是IE6-7将很多东西都存放在attributes中,上面的访问方法和标准浏览器的返回结果又不同。通常要获取一个attribute节点直接用getAttribute方法:

1console.log( elem.getAttribute('gameid') );// 880

要设置一个attribute节点使用setAttribute方法,要删除就用removeAttribute:

1elem.setAttribute('testAttr','testVal');
2console.log( elem.removeAttribute('gameid') );// undefined

attributes是会随着添加或删除attribute节点动态更新的。

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

1elem.gameid = 880;// 添加
2console.log( elem.gameid )// 获取
3delete elem.gameid// 删除

之所以attribute和property容易混倄在一起的原因是,很多attribute节点还有一个相对应的property属性,比如上面的div元素的id和class既是attribute,也有对应的property,不管使用哪种方法都可以访问和修改。

1console.log( elem.getAttribute('id') );// box
2console.log( elem.id );// box
3elem.id ='hello';
4console.log( elem.getAttribute('id') );// hello

但是对于自定义的attribute节点,或者自定义property,两者就没有关系了。

1console.log( elem.getAttribute('gameid') );// 880
2console.log( elem.gameid );// undefined
3elem.areaid ='900';
4console.log( elem.getAttribute('areaid') )// null

对于IE6-7来说,没有区分attribute和property:

1console.log( elem.getAttribute('gameid') );// 880
2console.log( elem.gameid );// 880
3elem.areaid ='900';
4console.log( elem.getAttribute('areaid') )// 900

很多新手朋友估计都很容易掉进这个坑中。

DOM元素一些默认常见的attribute节点都有与之对应的property属性,比较特殊的是一些值为Boolean类型的property,如一些表单元素:

1"radio" checked="checked" id="raido">
2var radio = document.getElementById('radio' );
3console.log( radio.getAttribute('checked') );// checked
4console.log( radio.checked );// true

对于这些特殊的attribute节点,只有存在该节点,对应的property的值就为true,如:

1"radio" checked="anything" id="raido">
2var radio = document.getElementById('radio' );
3console.log( radio.getAttribute('checked') );// anything
4console.log( radio.checked );// true

最后为了更好的区分attribute和property,基本可以总结为attribute节点都是在HTML代码中可见的,而property只是一个普通的名值对属性。

1// gameid和id都是attribute节点
2// id同时又可以通过property来访问和修改
3
"880" id="box">hello
4// areaid仅仅是property
5elem.areaid = 900;
原载于:雨夜带刀's Blog
本文链接:http://stylechen.com/attribute-property.html 因本人技术有限,现阶段仅用作记录收藏他人作品。
当前题目:attribute和property的区别-创新互联
网页URL:http://cdkjz.cn/article/dejchs.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220