Attribute

Attribute는 HTML 요소의 추가적인 정보를 전달하고 이름="값" 이렇게 쌍으로 온다.

<div class="myclass"></div>
// div 태그가 class 라는 값이 "myclass"인 attribute를 가지고 있다.

Property

Property는 Attribute에 대한 HTML DOM트리 안에서의 표현이다.

같은 예시에서 Attribute는 값이 “myclass” 이고 이름이 className인 Property를 가진다.

const $element = document.querySelector(".myclass");
const propertyName = $element.className;

둘의 차이는 Attribute는 HTML 택스트 문서에 있는 것이고, Property는 HTML DOM 트리에 있는 것이다.

Attribute는 변하지 않고, Property는 변할 수 있다. 가령 사용자가 체크박스를 체크하면 Property의 값은 변하는 것이다. (DOM 안에 존재하고 동적이기 때문이다)