首先看看这两个单词的英文释义(来自有道词典)。先是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. bzoj3295

    没什么好说的,树套树应该随便搞我在128MB空间下大胆的写了主席树当然要把原树和修改树分开来建没有然后了 type node=record l,r,s:longint; end; ..] of nod ...

  2. -_-#【jQuery插件】textSlider 文本滚动

    jQuery.textSlider.js ;(function($) { $.fn.textSlider = function(settings) { settings = jQuery.extend ...

  3. Mobile Computing-天平难题-Uva1354(回溯枚举二叉树)

    原题:https://uva.onlinejudge.org/external/13/1354.pdf 有s块石头,每块都被一根绳子吊着,如果有两个及以上的石头,需要平衡的天平把所有的石头挂起来. 房 ...

  4. Period - HDU 1358(next求循环节)

    题目大意:有一个长N的字符串,如果前缀Ni是一个完全循环的串(循环次数大于1),输出Ni和它循环了多少次.   分析:输入next的应用,求出来next数组直接判断Ni是否是完全的循环就行了,也就是N ...

  5. Servlet线程安全

    public class servletDemo1 extends HttpServlet { int i=0; public void doGet(HttpServletRequest reques ...

  6. 想挑战AlphaGO吗?先和PostgreSQL玩一玩?? PostgreSQL与人工智能(AI)

    1月4日晚,随着古力认输,Master对人类顶尖高手的战绩停留在60胜0负1和,而令人尴尬的是这唯一一场和棋还是因为棋手掉线系统自动判和,并不是棋盘上的局势真的势均力敌了.包括聂卫平.柯洁.朴廷桓.井 ...

  7. Android Developers:两个视图渐变

    淡入淡出动画(也被称为渐隐)逐渐淡出一个UI组件,同时淡入另一个.这个动画在你想在你的应用程序中切换内容或者是视图的情况下非常有用.淡入淡出非常微妙并短,但支持从一个屏幕到下一个屏幕流畅的过渡.当你不 ...

  8. POJ 2418 ,ZOJ 1899 Hardwood Species - from lanshui_Yang

    Description Hardwoods are the botanical group of trees that have broad leaves, produce a fruit or nu ...

  9. nodejs这个过程POST求

    下面是一个web登陆模拟过程.当我们问一个链接,你得到一个表格,然后填写相应的表格值,然后提交登陆. var http = require('http'); var querystring = req ...

  10. SCI科技论文写作技巧-核心价值

    第一次写SCI论文写作技巧,本身不是大牛,也许没有资金格谈论这个. 这里仅仅是一些个人思考,不正确,好还是不好.而当另一种理论. 对于工程专业的学生,谁往往应用,书写SCI事情.当然,也不是没可能.全 ...