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的一个简单的脚本验证插件
Apr 05 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
JavaScript运行原理分析
Feb 09 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 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
php include,include_once,require,require_once
2008/09/05 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
php源码的使用方法讲解
2019/09/26 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
深入解析Python中的__builtins__内建对象
2016/06/21 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
管理站站长岗位职责
2013/11/27 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
敬老月活动总结
2014/08/28 职场文书
面试自我评价范文
2014/09/17 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
JavaScript函数柯里化
2021/11/07 Javascript
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技