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 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 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
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
Julep官网:美容产品和指甲油
2017/02/25 全球购物
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
大学生饮食连锁店创业计划书
2014/01/17 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
作风整顿剖析材料
2014/09/30 职场文书