728x90
Attribute(HTML 속성)
- 정적 값: HTML 속성은 문서의 초기 상태에서 정의된 값을 의미
- HTML 태그에 정의된 값: HTML에서 요소가 정의될 때, 태그 내에서 설정된 값을 `attribute`라고 함
- DOM에 반영되기 전의 상태: HTML 속성은 웹 페이지가 로드될 때 초기값으로 설정됨
<input type="text" id="username" value="John Doe">`value`는 `input` 요소의 속성, value="John Doe"는 페이지가 처음으로 로드될 때 설정된 속성 값이다.
Property (DOM 속성)
- 동적 값: DOM 속성은 JS 코드에서 변경할 수 있는 값을 의미, JS 코드에 의해 변경될 수 있음
- DOM 객체에 반영된 값: HTML 문서에서 설정된 초기 값을 DOM 객체로 가져와서 JS로 제어
const input = document.getElementById('username');
console.log(input.value); // "John Doe"
input.value = 'Jane Doe'; // JavaScript로 값 변경
console.log(input.value); // "Jane Doe"| Aspect | Attribute | Property |
| 정의 | HTML 태그에서 정의된 값 | DOM 객체에 반영된 값 |
| 초기 값 | 페이지 로드 시 설정된 초기 값 | JS로 변경 가능하며, 동적으로 바뀔 수 있음 |
| 수정 가능성 | JS로 직접 수정 불가 (속성 자체 수정X) | JS로 동적 수정 가능 |
| EX | `<input value="John">` | `element.value = 'new value';` |
Attribute와 Property의 관계
초기 값: HTML 속성은 페이지가 로드될 때 DOM에 의해 초기화 됨.
변경된 값: JS에서 DOM 객체의 property를 수정하면, 동적으로 변하고 HTML 속성값과 다를 수 있음
<input type="text" id="username" value="John">
const input = document.getElementById('username');
console.log(input.getAttribute('value')); // "John" (HTML 속성)
console.log(input.value); // "John" (DOM 속성)
input.value = 'Jane';
console.log(input.value); // "Jane" (DOM 속성 변경)
console.log(input.getAttribute('value')); // "John" (HTML 속성은 변경되지 않음)
`Attribute`는 HTML 태그에 정의된 초기값이며, `Property`는 DOM 객체에 반영된 동적 값임.
728x90