Introduction to properties and attributes in JavaScript_javascript skills

首先看看这两个单词的英文释义（来自有道词典）。先是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方法来获取。

property and attribute

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

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

自定义属性互不干扰

Then, in JavaScript, attribute is not a subset of property. There is only an intersection between property and attribute, that is, standard attributes. Such questions can be reasonably explained.

But in IE9-, the appeal conclusion is not established. In IE9-browser, in addition to standard attributes, custom attributes are also shared, that is, standard methods and dots can be read and written.

Successfully set attributes will be reflected in HTML. Through outerHTML, you can see that attributes are added to the corresponding tags. Therefore, if the attribute is not a string type data, the toString() method will be called for conversion. However, in IE9-, there is no distinction between standard attributes and custom attributes. Attributes can still be any type of data and will not call toString() conversion. Non-string attributes will not be reflected in HTML, but there is a more serious problem. Yes, this can easily lead to memory leaks. Therefore, if it is not a custom attribute of string type, it is recommended to use related methods in mature frameworks (such as the data method in jQuery).

The difference between getAttribute and dot (.)
Although both getAttribute and dot methods can obtain standard attributes, there are differences in the values ​​they obtain for certain attributes, such as href, src , value, etc.

Test Link <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> The test shows that getAttribute obtains the literal value of the element attribute, while the dot obtains the calculated value. <BR> <P>For more details, please see this article: <A title="Attributes and custom properties" href="http://javascript.info/tutorial/attributes-and-custom-properties" target=_blank>Attributes and custom properties</script>