[JS] Property vs Attribute

 

 

1. Attribute (HTML 속성)

- HTML 마크업에 정의된 초기 속성 값.

- HTML 태그에 직접 작서외는 속성으로, 요소가 초기화될 때만 설정.

- 문서 로드 시점에만 DOM 요소의 초기 상태로 설정됨, 이후 DOM에 반영.

 

<input id="input" type="text" value="Hello">

=> input요소의 attribute : type, value

 

---

 

2. Property (DOM 속성)

- 자바스크립트에서 접근할 수 있는 DOM 객체의 속성.

- DOM에 로드된 이후 요소의 현재 상태.

- 동적으로 변경 가능하며, 변경 시 DOM에 즉시 반영.

 

const input = document.getElementById('input');
console.log(input.value); // "Hello" (Property 값 접근)

input.value = "World"; // Property 값 변경
console.log(input.getAttribute('value')); // "Hello" (Attribute 값은 초기 값)
console.log(input.value); // "World" (Property 값이 변경됨)

 

---

 

** 서버에서 가져온 데이터를 동적으로 채우는 경우 ( ex) Table이나 Grid를 먼저 그리고 값을 채우는 경우 )

   => 데이터 초기값에 attribute로 접근 불가. (null값이 나온다.)