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

property ['prɔpəti]

n. 性质,性能;财产;所有权

英英释义:

  1. any area set aside for a particular purpose “the president was concerned about the property across from the White House”
    同义词:place
  2. 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
  3. a basic or essential attribute shared by all members of a class
  4. a construct whereby objects or individuals can be distinguished “self-confidence is not an endearing property”
    同义词:attribute | dimension
  5. 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.

  1. a construct whereby objects or individuals can be distinguished
    同义词:property | dimension
  2. an abstraction belonging to or characteristic of an entity

v.

  1. attribute or credit to ”We attributed this quotation to Shakespeare”
    同义词:impute | ascribe | assign
  2. 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方法来获取。

property and attribute

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

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

自定义属性互不干扰

那么,在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

(待翻译:http://javascript.info/tutorial/attributes-and-custom-properties#properties)

javascript之attribute 和 property的更多相关文章

  1. JavaScript的attribute和property辨析

    1.Attribute Attribute是HTML上设置的属性,在html中显式地设置,或者通过setAttribute()方法设置. <input type='text' id='txt' ...

  2. javascript中attribute和property的区别详解

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  3. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  4. Javascript中的attribute和property分析

    attribute和property这两个单词,都有属性的意思,attribute有属性.特质的意思,property则有性质,性能的意思. 首先需要明确的是,在规范中,读取和设置attribute的 ...

  5. jQuery的attr与prop,attribute和property区别

    jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东 ...

  6. attribute和property兼容性分析

    上一篇文章中,详细的分析了他们的区别,请看Javascript中的attribute和property分析 这次,来详细的看下他们的兼容性,这些内容主要来自于对于jQuery(1.9.x)源代码的分析 ...

  7. boolean attribute(布尔值属性) attribute vs property

    boolean attribute(布尔值属性) boolean attribute     HTML - Why boolean attributes do not have boolean val ...

  8. HTML中的attribute和property

    一.概述 attribute和property是常常被弄混的两个概念. 简单来说,property则是JS代码里访问的: document.getElementByTagName('my-elemen ...

  9. 必备技能:分清楚DOM的attribute和property

    分清楚DOM的attribute和property,用JQ的时候分清楚attr,和prop方法,网上有很多大神的总结,我就不列举了.

随机推荐

  1. nginx虚拟主机配置小结

    nginx的安装在lnmp环境搭建中已经介绍过了,配置文件在安装目录下的conf子目录下,主要主要分成四部分:main(全局设置).server(主机设置).upstream(负载均衡服务器设置).l ...

  2. Material Design风格登录注册

    本文实现了以下功能 完整的代码和样例托管在Github 当接口锁定时,防止后退按钮显示在登录Activity 上. 自定义 ProgressDialog来显示加载的状态. 符合材料设计规范. 悬浮标签 ...

  3. word公式图片显示不全的问题

    最近处理文档遇到比较棘手的问题,就是单行显示的公式和图片都显示不全,高度撑不起来,会被其他行的内容遮挡. 图片估计是对齐方式照成的,公式调了很久也没有办法.最后找了一个临时折衷的办法: 插入表格,然后 ...

  4. Qt Creator 你必须要掌握的快捷操作

    多使用快捷键能显著提高工作效率,尽可能减少键盘,鼠标之间切换所浪费的时间.我这里列出个人认为非常重要必须掌握的 Qt Creator 快捷键.看你知道几个? . 1 .Ctrl(按住)+ Tab快速切 ...

  5. perl中调用cgi

    来源: http://www.cnblogs.com/itech/archive/2012/09/23/2698856.html 参考:http://www.willmaster.com/librar ...

  6. 机器学习基石 2 Learning to Answer Yes/No

    机器学习基石 2 Learning to Answer Yes/No Perceptron Hypothesis Set 对于一个线性可分的二分类问题,我们可以采用感知器 (Perceptron)这种 ...

  7. 【BZOJ3527】力(FFT)

    [BZOJ3527]力(FFT) 题面 Description 给出n个数qi,给出Fj的定义如下: \[Fj=\sum_{i<j}\frac{q_i q_j}{(i-j)^2 }-\sum_{ ...

  8. MyBatis学习日记(二): MyBatis Say Hello

    首先在Eclipse中创建一个maven工程: 在maven工程下的pom.xml文件中添加MyBatis.MySQL.Junit依赖: <project xmlns="http:// ...

  9. 第五章jQuery

    DOM文档加载的步骤 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代码. DOM树构建完成. 加载图片等外部文件. 页面加载完毕. 执行时间不同 window.onload必须等到页 ...

  10. BZOJ2553 [BeiJing2011]禁忌 AC自动机 矩阵

    原文链接http://www.cnblogs.com/zhouzhendong/p/8196279.html 题目传送门 - BZOJ2553 题意概括 引用一下lych大佬的: 在字母只有前alph ...