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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
JavaScript实现图片轮播特效
Oct 23 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中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
js微信分享实现代码
2020/10/11 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Numpy之reshape()使用详解
2019/12/26 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
一套C#面试题
2013/10/09 面试题
保研推荐信
2014/05/09 职场文书
冬季施工防火方案
2014/05/17 职场文书
车辆管理制度范本
2015/08/05 职场文书
小学班主任心得体会
2016/01/07 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang