[Javascript] 속성(Attribute), 요소(Property) 차이

해피몬·2022년 12월 15일
0
post-thumbnail

속성 (Attribute)

속성(Attribute)은 HTML 태그에 포함된 추가 정보를 제공합니다. HTML 요소 내에서 직접 정의되며, 해당 요소에 대한 메타데이터를 설정하거나 초기 값을 설정하는 데 사용됩니다.

HTML 태그 안에서 정의
초기 설정 값을 제공하거나 HTML 요소의 특성을 정의

<input type="text" value="John Doe" id="name" disabled>

type, value, id, disabled는 속성(Attribute)입니다. 각 속성은 HTML 요소가 어떻게 렌더링될지에 영향을 미칩니다.

  • 속성은 HTML 문서에서 요소가 처음 생성될 때만 설정됩니다.
    HTML DOM에서는 JavaScript를 통해 속성에 접근하거나 변경할 수 있습니다.

요소(Property)

요소(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 문서의 초기 설정 값이 아닌, 실시간 상태를 나타냅니다.

정리

  • 속성(Attribute)은 HTML에서 요소의 초기 특성을 설정하는 데 사용되고, HTML 태그 내에서 정의됩니다.
  • 요소(Property)는 JavaScript에서 DOM 객체로 해당 요소에 접근할 때 사용되는 현재 상태나 동적인 값을 나타냅니다.
profile
슬기로운개발생활🤖

0개의 댓글