속성(Attribute)은 HTML 태그에 포함된 추가 정보를 제공합니다. HTML 요소 내에서 직접 정의되며, 해당 요소에 대한 메타데이터를 설정하거나 초기 값을 설정하는 데 사용됩니다.
HTML 태그 안에서 정의
초기 설정 값을 제공하거나 HTML 요소의 특성을 정의
<input type="text" value="John Doe" id="name" disabled>
type, value, id, disabled는 속성(Attribute)입니다. 각 속성은 HTML 요소가 어떻게 렌더링될지에 영향을 미칩니다.
요소(Property)는 JavaScript 객체의 특성을 나타냅니다. HTML 요소를 JavaScript에서 다룰 때 DOM 객체의 요소(Property)으로 접근합니다. 요소(Property)은 HTML 속성보다 더 동적으로 변경할 수 있고, 자주 HTML 속성의 상태를 반영합니다.
JavaScript에서 DOM 객체를 통해 관리
요소의 현재 상태나 값을 표현하거나 변경
<input type="text" id="name" value="John Doe">
const inputElement = document.getElementById('name');
console.log(inputElement.value); // "John Doe"
inputElement.value = "Jane Doe"; // 요소의 value 속성을 변경
console.log(inputElement.value); // "Jane Doe"
value는 속성(Attribute)이기도 하지만, JavaScript에서 요소(Property)로도 사용할 수 있습니다. 여기서는 DOM 객체의 속성인 value를 사용하여 값을 변경하고 있습니다.
요소(Property)은 동적으로 변경할 수 있으며, 브라우저가 변경 사항을 즉시 반영합니다.
요소(Property)은 HTML 문서의 초기 설정 값이 아닌, 실시간 상태를 나타냅니다.