Attribute, Property

1. Attribute란?

 

속성이란 뜻을 지닌 attribute는 html문서에서 elements에 추가적인 정보를 넣을 때 사용되는 요소입니다.

 

<div class="my-class"></div>

위의 div태그의 "my-class"라는 클래스 속성을 볼 수 있는데, div태그는 element(요소)이고, class는 attrubute(속성)가 되며, my-class는 value(값)가 됩니다.

 

2. Property란?

 

특성이란 뜻을 지닌 property는 html dom 안에서 attribute를 나타내는 표현입니다.

 

Our DIV node
 |- nodeName = "DIV"
 |- className = "my-class"
 |- style
   |- ...
 |- ...

 

위는 1. Attribute 의 코드를 DOM으로 나타낸 것입니다.

className은 곧 property를 뜻하는데, 이는 html DOM에서는 property를 의미함을 뜻합니다.

 

3. 둘의 차이점은?

 

attribute는 HTML 문서 안에 있는 것이고, property는 HTML DOM tree 안에 있는 것을 뜻합니다.

attribute는 정적으로 변하지 않으며, property는 동적으로 값이 변할 수 있습니다. 밑의 첨부자료와 함께 부연설명 하겠습니다.

 

 

위의 첨부자료에서 attribute와 property가 같은 default인 것을 확인 할 수 있습니다.

 

여기서 input값에 데이터를 입력한다면,

 

 

attribute값은 그대로 default, property값은 Joe로 값이 변경 된 것을 확인 할 수 있습니다.

 

이는 attrubute가 HTML에서 정적인 상태인 것을, property는 DOM안에서 동적인 것을 확인 할 수 있습니다.

 

 

 

 - 출처 - 

 

http://jquery-howto.blogspot.com/2011/06/html-difference-between-attribute-and.html

HTML: The difference between attribute and property