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 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python中常用的os操作汇总
2020/11/05 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
不错的求职信范文
2014/07/20 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
部门2015年度工作总结
2015/04/29 职场文书
公司催款律师函
2015/05/27 职场文书
element多个表单校验的实现
2021/05/27 Javascript
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android