[JavaScript] attribute와 property의 차이점

자바스크립트에서 attribue, property 둘 다 속성의 개념인데 무슨 차이가 있는지 예시와 함께 정리해보자.

 

attributes는 HTML 마크업에 정의되어 있는 것이고, properties는 HTML DOM 트리에 있는 것이다. 즉, attribute는 default 값이 변하지 않으며 property는 변할 수 있다.

 

input을 예시로 들어보겠다.

 

<input value="기본값입니다" />

 

// attribute
console.log(input.getAttribute('value')) // 기본값입니다
// property
console.log(input.value) // 기본값입니다

 

 

input에 "자바스크립트"라고 입력했다면, attribute는 그대로지만 property 값은 변한다.

property는 DOM에 존재하며 동적이기 때문이다.

 

// attribute
console.log(input.getAttribute('value')) // 기본값입니다
// property
console.log(input.value) // 자바스크립트