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 相关文章推荐
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
JS定时器实例详细分析
Oct 11 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
angular4自定义组件详解
Sep 28 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
使用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
Protoss兵种介绍
2020/03/14 星际争霸
php 检查电子邮件函数(自写)
2014/01/16 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
Vue组件基础用法详解
2020/02/05 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
python插入数据到列表的方法
2015/04/30 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python中的Numpy矩阵操作
2018/08/12 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
MySQL 全文索引使用指南
2021/05/25 MySQL
python非标准时间的转换
2021/07/25 Python
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python