javascript中attribute和property的区别详解


Posted in Javascript onJune 05, 2014

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

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 = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box

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

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

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

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

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

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

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

console.log( elem.getAttribute('id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ); // hello

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

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

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

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900

很多新手朋友估计都很容易掉进这个坑中。
DOM元素一些默认常见的attribute节点都有与之对应的property属性,比较特殊的是一些值为Boolean类型的property,如一些表单元素:

<input type="radio" checked="checked" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // checked
console.log( radio.checked ); // true

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

<input type="radio" checked="anything" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('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;
Javascript 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
实例教学如何写vue插件
Nov 30 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 #Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 #Javascript
javascript数组去重方法终极总结
Jun 05 #Javascript
javascript设计模式之解释器模式详解
Jun 05 #Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 #Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 #Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 #Javascript
You might like
论建造顺序的重要性
2020/03/04 星际争霸
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
python写入中英文字符串到文件的方法
2015/05/06 Python
Python部署web开发程序的几种方法
2017/05/05 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python的json包位置及用法总结
2020/06/21 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
客服专员岗位职责
2014/02/28 职场文书
法律进企业活动方案
2014/03/04 职场文书
会计专业求职信范文
2014/03/16 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
2014年国庆标语
2014/06/30 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
二年级数学教学反思
2016/02/16 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python