JavaScript_javascript 기술의 속성 및 속성 소개

首先看看这两个单词的英文释义（来自有道词典）。先是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，那么为何无法通过点号获取？

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

自定义属性互不干扰

그러면 JavaScript에서는 속성이 속성의 하위 집합이 아닙니다. 속성과 속성 사이에는 교차점이 있을 뿐입니다. 즉, 이러한 질문은 합리적으로 설명할 수 있습니다.

그러나 IE9-에서는 항소 결론이 성립되지 않습니다. IE9 브라우저에서는 표준 속성 외에도 사용자 정의 속성도 공유됩니다. 즉, 표준 메소드와 점을 읽고 쓸 수 있습니다.

성공적으로 설정된 속성은 HTML에 반영됩니다.outerHTML을 통해 해당 태그에 속성이 추가되는 것을 볼 수 있습니다. 따라서 속성이 문자열 유형의 데이터가 아닌 경우 toString() 메소드가 호출됩니다. 전환을 위해. 그러나 IE9에서는 표준 속성과 사용자 정의 속성 사이에 구분이 없습니다. 속성은 여전히 ​​모든 유형의 데이터일 수 있으며 toString() 변환을 호출하지 않습니다. 문자열이 아닌 속성은 HTML에 반영되지 않습니다. 심각한 문제입니다. 예, 이로 인해 메모리 누수가 쉽게 발생할 수 있습니다. 따라서 문자열 유형의 사용자 정의 속성이 아닌 경우 성숙한 프레임워크에서 관련 메소드(예: jQuery의 데이터 메소드)를 사용하는 것이 좋습니다.

getAttribute와 dot(.)의 차이점
getAttribute와 dot 메소드 모두 표준 속성을 얻을 수 있지만 href, src, value 등 특정 속성에 대해 얻는 값에는 차이가 있습니다. , 등.

테스트 링크입력 유형= "text" value="텍스트 입력" id="ipt" /> <script> var $ = function(id){return document.getElementById(id);}; 'href'));//# 경고($('link').href);//fullpath/file.html# 경고($('image').getAttribute('src'))//img.png Alert($('image').src)//fullpath/img.png Alert($('ipt').getAttribute('value'))//텍스트 입력 Alert($('ipt').value)/ /텍스트 입력 $('ipt').value = 5; Alert($('ipt').getAttribute('value'))//텍스트 입력 Alert($('ipt').value)//5 < /script> 테스트에서는 getAttribute가 요소 속성의 리터럴 값을 얻는 반면 점은 계산된 값을 얻는다는 것을 보여줍니다. <BR> <P>자세한 내용은 <A title="Attributes and custom properties" href="http://javascript.info/tutorial/attributes-and-custom-properties" target=_blank>속성 및 사용자 정의 속성</script> 문서를 참조하세요.