HTML은 속성, DOM은 프로퍼티

HTML에서 "속성(attribute)"과 DOM에서 "프로퍼티(property)"는 비슷해 보이지만, 기술적으로는 다른 개념입니다. 이 둘의 차이를 이해하기 위해 HTML과 DOM이 어떻게 작동하는지 살펴보겠습니다.

 

 

---

1. HTML 속성 (Attribute)

HTML 속성은 정적인 초기 값을 설정합니다. HTML 문서의 소스 코드에 작성되며, 요소의 초기 상태를 정의합니다.

 

예:

<input type="text" value="초기 값">

 

여기서 value="초기 값"은 HTML 속성입니다. 이 값은 DOM이 처음 생성될 때 브라우저가 사용하는 초기 값입니다.

 

 

---

2. DOM 프로퍼티 (Property)

DOM 프로퍼티는 브라우저가 HTML을 파싱하여 생성한 JavaScript 객체의 속성입니다. DOM은 동적으로 업데이트될 수 있으며, 속성 값이 변경될 경우 DOM에서 이를 반영합니다.

 

예:

const inputElement = document.querySelector('input'); console.log(inputElement.value); // '초기 값' inputElement.value = '변경된 값';

 

여기서 inputElement.value는 DOM 프로퍼티입니다. JavaScript를 통해 이 값을 동적으로 변경할 수 있습니다.

 

 

---

3. 차이점

HTML 속성 (Attribute)

• HTML 마크업에 작성된 초기 상태.
• 정적인 값.
• 브라우저가 DOM을 생성할 때 초기 값으로 사용.

DOM 프로퍼티 (Property)

• JavaScript를 통해 동적으로 접근/변경 가능.
• HTML 속성과 연결되지만, 항상 동기화되지는 않음.
• DOM 객체의 상태를 반영. 

 

---

4. 연결과 비동기화

속성과 프로퍼티는 보통 초기에는 연결되어 있지만, 한쪽을 변경한다고 해서 다른 쪽이 항상 변경되는 것은 아닙니다.

 

예:

<input type="text" value="초기 값">

 

const inputElement = document.querySelector('input');   // 초기 상태 console.log(inputElement.getAttribute('value')); // '초기 값' console.log(inputElement.value); // '초기 값'   // DOM 프로퍼티 변경 inputElement.value = '새로운 값'; console.log(inputElement.getAttribute('value')); // '초기 값'   // HTML 속성 변경 inputElement.setAttribute('value', '다른 값'); console.log(inputElement.getAttribute('value')); // '다른 값' console.log(inputElement.value); // '새로운 값'

 

위 예제에서 getAttribute()는 HTML 속성을 참조하지만, inputElement.value는 DOM 프로퍼티를 참조합니다. 속성과 프로퍼티는 분리되어 따로 작동할 수 있습니다.

 

 

---

5. 정리

• HTML 속성은 요소의 초기 설정 값.
• DOM 프로퍼티는 브라우저가 HTML을 파싱한 뒤 동적으로 관리되는 값.
• 속성과 프로퍼티가 초기에는 연결되지만, 이후에는 독립적으로 변경될 수 있음.

속성은 마크업의 구성이고, 프로퍼티는 브라우저에서 동작 중인 객체의 상태라고 볼 수 있습니다.