JavaScript中的property和attribute介绍


Posted in Javascript onDecember 26, 2011

首先看看这两个单词的英文释义(来自有道词典)。先是property:

property ['prɔpəti] n. 性质,性能;财产;所有权 
英英释义: 
any area set aside for a particular purpose “the president was concerned about the property across from the White House” 
同义词:place 
something owned; any tangible or intangible possession that is owned by someone “that hat is my property”; ” he is a man of property” 
同义词:belongings | holding | material possession 
a basic or essential attribute shared by all members of a class 
a construct whereby objects or individuals can be distinguished “self-confidence is not an endearing property” 
同义词:attribute | dimension 
any movable articles or objects used on the set of a play or movie 
同义词:prop

重点看2、3、4条。
再看attribute:
attribute [ə'tribju:t, 'ætribju:t] 
n. 属性;特质 
vt. 归属;把…归于 
英英释义: 
n. 
a construct whereby objects or individuals can be distinguished 
同义词:property | dimension 
an abstraction belonging to or characteristic of an entity 
v. 
attribute or credit to ”We attributed this quotation to Shakespeare” 
同义词:impute | ascribe | assign 
decide as to where something belongs in a scheme 
同义词:assign

property,attribute都作“属性”解,但是attribute更强调区别于其他事物的特质/特性,而在这篇文章中也提交到attribute是property的子集。
而在JavaScript中,property和attribute更是有明显的区别。众所周知,setAttribute是为DOM节点设置/添加属性的标准方法:
var ele = document.getElementById("my_ele"); ele.setAttribute("title","it's my element");但很多时候我们也这样写:
ele.title = "it's my element";如果不出什么意外,他们都运行的很好,它们似乎毫无区别?而且通常情况下我们还想获取到我们设置的“属性”,我们也很爱这样写:
alert(ele.title);这时候,你便会遇到问题,如果你所设置的属性属于DOM元素本身所具有的标准属性,不管是通过ele.setAttribute还是ele.title的方式设置,都能正常获取。但是如果设置的属性不是标准属性,而是自定义属性呢?
ele.setAttribute('mytitle','test my title'); alert(ele.mytitle); //undefined alert(ele.getAttribute('mytitle')); //'test my title' ele.yourtitle = 'your test title'; alert(ele.getAttribute('yourtitle')); //null alert(ele.yourtitle); //'your test title'通过setAttribute设置的自定义属性,只能通过标准的getAttribute方法来获取;同样通过点号方式设置的自定义属性也无法通过 标准方法getAttribute来获取。在对自定义属性的处理方式上,DOM属性的标准方法和点号方法不再具有任何关联性(上诉代码在IE6-有兼容性 问题,后面会继续介绍)。
这种设置、获取“属性”的差异性,究其根源,其实也是property与attribute的差异性所致。
通过点号设置的“属性”其实是设置的property,如上所说attribute是property的子集,那么点号设置的property自然无法通过只能获取attribute的getAttribute方法来获取。
JavaScript中的property和attribute介绍

property and attribute

照图似乎更易理解,getAttribute无法获取到不属于attribute的property也是理所应当。但是这时候你会发现另外一个问题,通过setAttribute设置的属性,同样也应该属于property,那么为何无法通过点号获取?

我们换种理解,只有标准属性才可同时使用标准方法和点号方法,而对于自定义属性,标准方法和点号方法互不干扰。

JavaScript中的property和attribute介绍

自定义属性互不干扰

那么,在JavaScript中attribute并不是property的子集,property与attribute仅存在交集,即标准属性,这样疑问都可得到合理的解释。

但在IE9-中,上诉结论并不成立。IE9-浏览器中,除了标准属性,自定义属性也是共享的,即标准方法和点号皆可读写。

成功设置的attribute都会体现在HTML上,通过outerHTML可以看到attribute都被添加到了相应的tag上,所以如果 attribute不是字符串类型数据都会调用toString()方法进行转换。但是由于IE9-中,标准属性与自定义属性不做区 分,attribute依然可以是任意类型数据,并不会调用toString()转换,非字符串attribute不会体现在HTML上,但更为严重的问 题是,这样很容易就会导致内存泄漏。所以如果不是字符串类型的自定义属性,建议使用成熟框架中的相关方法(如jQuery中的data方法)。

getAttribute与点号(.)的差异性
虽然getAttribute和点号方法都能获取标准属性,但是他们对于某些属性,获取到的值存在差异性,比如href,src,value等。

<a href="#" id="link">Test Link</a> <img src="img.png" id="image" /> <input type="text" value="enter text" id="ipt" /> <script> var $ = function(id){return document.getElementById(id);}; alert($('link').getAttribute('href'));//# alert($('link').href);//fullpath/file.html# alert($('image').getAttribute('src'))//img.png alert($('image').src)//fullpath/img.png alert($('ipt').getAttribute('value'))//enter text alert($('ipt').value)//enter text $('ipt').value = 5; alert($('ipt').getAttribute('value'))//enter text alert($('ipt').value)//5 </script>测试可发现getAttribute获取的是元素属性的字面量,而点号获取的是计算值。

更多细节可查看这篇文章:Attributes and custom properties

Javascript 相关文章推荐
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
JavaScript打字小游戏代码
Dec 26 #Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 #Javascript
js 函数调用模式小结
Dec 26 #Javascript
JavaScript 原型继承
Dec 26 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 #Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 #Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 #Javascript
You might like
我的论坛源代码(五)
2006/10/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
如何在python中实现线性回归
2020/08/10 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
材料采购员岗位职责
2013/12/17 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
学校春季防火方案
2014/06/08 职场文书
公司董事长岗位职责
2014/06/08 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
商务邀请函
2015/01/30 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书