[지식루프 IT공부] HTML속성과 DOM 프로퍼티 차이

HTML에서의 속성은 attribute로 element가 가지고 있는 것을 의미하고 정적인 속성을 뜻합니다. 또한 특성은 항상 name=”value” 의 형태를 따릅니다.

아래와 같은 코드를 예시로 들어보겠습니다.

<input value="codeit" />

위에서 attribute는 value=”codeit” 입니다.

 

Dom에서의 속성은 property로 동적인 속성을 뜻합니다. 즉 , html Dom tree안에 존재하고 JavaScript에 의해 생성되고 조작되는 값입니다.

<input />

만일 위와 같은 input 태그에 사용자가 코드잇이라고 한글로 입력하면 코드잇은 다른 값으로 대체 가능하고 변하기 때문에 property가 됩니다.

 

둘 사이가 약간 모호하고 일부 겹치는 부분이 있지만 일반적으로 HTML attribute 사용하여 초기 값을 설정하고 DOM property를 사용하여 요소의 상태를 동적으로 조작합니다.

 

아래는 MDN에서 나온 용어 설명에 대한 참고 링크입니다.

📌 참고

MDN attribute