HTML, JS / attribute와 property 속성 차이

최민경·2024년 5월 1일

📌 `attribute` 속성

attribute의 특징은 다음과 같다.

HTML 요소에 대한 추가 정보를 전달하며

시작 태그에 지정되며

name="value"쌍으로 제공된다.
<div class="myClass"></div>

property는 HTML DOM 트리에서 노드의 속성을 나타낸다.

Our DIV node
 |- nodeName = "DIV"
 |- className = "my-class"
 |- style
   |- ...
 |- ...

attribute는 HTML 안에 존재하지만
property는 DOM 트리 안에 존재한다.

attribute는 변할 수 없으며 항상 초기(기본값) 값을 전달하고
property는 변할 수 있다는 것을 의미한다.

HTML　　　　　　　　　　　　　　　　DOM
<input value="default" /> 　　　value = default

Current values:
Attribute: "default"　　　　　　　　　　Property: "default"

위 코드는 input 태그의 value를 default로 지정함으로써 attribute값은 default이다.
여기서 input 값을 변경하지 않을 경우 property도 default로 동일하다.

HTML 　　　　　　　　　　　　　　　　DOM
<input value="default" />　　　　value = Joe

Current values:
Attribute: "default" 　　　　　　　　　　Property: "Joe"

하지만 자바스크립트에서 input 값을 변경할 경우 input 태그의 attribute는 default로 동일하지만 property는 dom 트리 내에서 값이 변경되어 Joe로 변경된 것을 알 수 있다.

여기서 자바스크립트에서 속성을 바꾸더라도
html 속성 attribute는 변하지 않고
DOM Tree 내 property는 변경된다는 것을 알 수 있다.

~~jquery는 아직 안배웠지만..~~~
attribute와 property 차이를 이해하기 좋을 거 같아서 작성해보았다

jquery attr/prop 참고 링크
.prop()는 속성 값을 명시적으로 검색하는 방법을 제공하는 반면
.attr()은 속성을 검색한다고 한다.

<!-- 체크박스 -->
<input type="checkbox" checked="checked" />

체크박스를 뜻하는 elem 요소가 있다고 한다면 다음과 같다.

JS code	뜻
elem.checked	true(부울) 체크박스 상태에 따라 변경된다.
$( elem ).prop( "checked" )	true(부울) 체크박스 상태에 따라 변경된다.
elem.getAttribute( "checked" )	"checked"(문자열) 체크박스의 초기 상태. 변하지 않는다
$( elem ).attr( "checked" )	"checked"(문자열) 체크박스의 초기 상태. 변하지 않는다

해당 메소드들을 통해 property는 변할 수 있고, attribute는 변하지 않는다는 것을 알 수 있다.