attribute vs property

- attribute

attribute는 html문서에서 elements에 추가적인 정보를 넣을 때 사용되는 요소이다.

<div class='d-flex'></dlv>

위와 같은 코드가 있다면 class가 div라는 element의 attribute인 것이다.

 

- property

html DOM에서 attribute를 가리키는 표현이다.

<div class='d-flex'></dlv>

위와같은 코드가 있을때

const $flex = ducument.querySelector('.d-flex')

위 코드로 html DOM 객체를 만들어 낼 수 있다.

$flex의 property로 .className, .classList 등이 존재한다.

 

즉, html 문서 안에서는 class가 attribute이지만, html DOM에서는 property인 것이다.

attribute는 html document/file 안에서

property는 html DOM tree 안에서 존재한다고 생각하면된다.

 

attribute는 정적으로 변하지 않고, property는 동적으로 그 값이 변할 수 있다는 의미를 내포하고 있다.

ex) check 박스를 클릭하면 attribute의 상태는 변하지 않아도 property의 상태는 checked가 됨.