attribute와 property의 차이

Attribute

Attribute는 HTML elements에 추가적인 정보를 넣을 때 사용되는 요소입니다. 꼭 안줘도 됩니다. 즉 추가정보인 것입니다.

global인 추가정보가 있고(class, id, title, lang, data-x), 특정 element에서만 쓰이는 local 추가정보도 있습니다.

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

 

위 코드에서 class는 attribute(속성)이고, test-class는 value(속성값)입니다.

Property

property는 HTML DOM tree 안에서 attribute를 가르키는 요소입니다.

css에서 font-size, color 등은 원래 갖고 있는 특성입니다. 이 property는 조작이 가능합니다. 예로 font-size 같은 경우 15px을 줄 수 있고, 혹은 1em을 줄 수도 있습니다.

Our DIV node
|- nodename = "DIV"
|- className = "test-class"
|-style
	|- ...
|- ...

 

위 코드는 전 예시를 DOM tree로 표현한 것입니다. 여기서 className이 property입니다.

 

정리하자면, HTML 문서 안에서 class는 attribute를 의미하지만, HTML DOM tree 안에서는 property를 의미합니다.

추가적으로  property는 DOM 안에 존재해서 동적인 반면, attribute는 HTML 문서 안에 존재해서 정적인 상태로 변하지 않습니다.