Attribute와 Property의 차이

Attribute와 Property의 차이

- HTML의 Attribute

HTML의 속성, 엘리먼트에 id나 class와 같은 추가적인 정보를 일컫음

<!-- div 엘리먼트의 id와 class 속성은 attribute -->
<div id="ksykma" class="front"></div>

<!-- input 엘리먼트의 type과 value 속성은 attribute -->
<input type="text" value="123">

- DOM의 Property

DOM의 속성, HTML의 Attribute를 DOM 내에서 대신해서 하는 표현이라고 생각

<div class='front' style="color: purple;"></div>

<script>
    // className과 style은 프로퍼티
    document.querySelector('div').className; // "front"
    document.querySelector('div').style.color; // "purple"
</script>

- 차이점은?

HTML 요소의 속성이냐, Javascript 객체의 속성이냐!

Attribute 속성은 정적인 값으로 HTML문서가 로드될 때 초기화 되고, Property는 동적인 값으로 Javascript에서 요소를 조작하고 업데이트 할 때 사용가능