HTML attribute와 property 차이

📌  attribute란?

 

<div class="label">리스트</div>

 

HTML element의 추가적인 정보를 전달한다. 태그 내에서 이름="값" 쌍으로 작성된다.

div 태그는 "label" 이란 값을 지닌 class 어트리뷰트를 가지고 있다. 

 

 

📌  property란?

 

DOM을 직접 조작하여 <div class="label">리스트</div> HTML엘리먼트를 만들었다.

 

console창에서 해당 DOM Properties를 검색해보았다.

 

 

HTML DOM tree 내부에서 attribute를 가리킬 때 쓰인다.

(예시의) 해당 엘리먼트는 HTML DOM tree에서 이름이 className이고 값이 "label" 인 property를 가진다.

 

 

📌  그렇다면 !! attribute와 property의 차이는 무엇인가?

 

위치적 관점에서 본다면,

attribute는 HTML 문서 안에 있고, property는 HTML DOM tree 안에 있다.

 

즉, attribute의 값은 변하지 않고, property는 (자바스크립트로 DOM을 조작했을 때) 값이 변할 수 있다.

직접 DOM을 조작하며 결과를 확인해보자.

 

DOM을 직접 조작하여 HTML Element 를 만들었다.

 

해당 property에 담긴 value값이 변하는 걸 볼 수 있다. 초기에 설정했던 HTML attribute 값은 defaultValue에 담겨있다.

 

attribute의 값은 변하지 않고, property의 값은 변할 수 있다.