[TIL] 51. Attribute와 Property의 차이

leeeeunz·2020년 5월 18일
0

HTML / CSS

목록 보기
16/16

HTML/CSS를 공부하다보면 속성이라는 의미를 가진 Attribute, Property라는 단어를 자주 볼 수 있다. 매번 이 단어들은 무슨 차이가 있는걸까 궁금해하다가 잘 설명되어 있는 글을 읽고 정리해보았다.

Attribute란?

Attribute는 HTML elements에 추가적인 정보를 넣을 때 사용되는 요소이다.

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

위의 예시에서 class는 속성(attribute)이고, my-class는 속성값(value)이 된다.

Property란?

Property는 html DOM tree 안에서 attribute를 가르키는 요소이다.

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

위 내용은 <div class="my-class"><div>를 DOM으로 표현한 것인데, 여기서 className이 바로 property를 뜻한다.

즉, html 문서 안에서는 class가 attribute를 의미하지만 html DOM tree 안에서는 property를 의미한다고 볼 수 있다.

Attribute와 Property의 차이점

attribute는 HTML 문서 안에 있는 것이고 property는 HTML DOM tree 안에 있는 것이다. 이 의미는 attribute는 변하지 않지만 property는 변할 수 있다는 뜻이다.

예를 들어, 사용자가 체크박스를 체크하거나 input 박스에 텍스트를 입력했을 때 JavaScript로 값을 변경하면 property의 값은 변하게 된다.

간단한 예시로 확인해보자.

위 사진에서 attribute와 property값이 default로 동일한 것을 확인할 수 있다.

하지만 input 박스에 "Joe"를 입력하게 되면 attribute값은 그대로지만 property값이 변경된 것을 확인할 수 있다.

왜냐하면 property는 DOM 안에 존재하며 동적인 반면, attribute는 HTML 문서 안에 존재하며 정적인 상태로 변하지 않기 때문이다.


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

profile
👩🏻‍💻Frontend Developer #react #react -native #javascript #typescript

0개의 댓글