>웹 프론트엔드 >JS 튜토리얼 >JavaScript_javascript 기술의 속성 및 속성 소개

JavaScript_javascript 기술의 속성 및 속성 소개

WBOY
WBOY원래의
2016-05-16 17:57:531389검색

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

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" />