attribute 와 property 의 차이
웹 퍼블리싱을 하면서 접했던 혼돈되는 용어 중에
‘특성’ 또는 ‘속성’이라는 사전적 의미를 가진 attribute 와 property에 대해 정리할 필요를 느꼈습니다.
이에 대한 개념을 잘 설명한 글이 있어 이를 갈무리 해 보겠습니다.
원문은 위에서 확인해보시길…
attribute 란 ?
attribute 는 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다.
예를 들어, <div class= ‘my-class’></div>라는 ‘my-class’라는 클래스 속성을 가진 div 요소에서 div 는 element(요소) 이고 class 는 attribute(속성) 가 되며 ‘my-class’ 는 class attribute의 value(값)가 됩니다.
property 란?
property는 html DOM 안에서 attribute 를 가리키는(혹은 대신하는) 표현입니다.
위 내용은 <div class= ‘my-class’></div> 태그를 DOM 으로 표현한 것인데 위에서 className이 property가 되는 것이죠. 다시 말하면 html 문서 안에서는 class가 attribute를 의미하지만 html DOM 안에서는 property를 의미한다고 보시면 될 것 같습니다.
그럼 attribute와 property를 구분하는 차이 또는 차이점이 무엇일까?
attribute는 html document/file 안에서 property 는 html DOM tree안에서 존재합니다. 이것이 뜻하는 것은 attribute는 정적으로 변하지 않고 property는 동적으로 그 값이 변할 수 있다는 것을 내포하고 있습니다. 예를 들어 체크박스 태그가 있을 때 유저가 체크박스에 체크를 하면 attribute의 상태는 변하지 않지만 property의 상태는 checked로 변하게 됩니다.
아래 내용을 보시죠.
위 그림에서 value attribute (html문서에서는 attribute)와 property(html DOM에서는 property)가 default에서는 똑같은 상태인것을 확인할 수 있습니다.
그럼 input에 텍스트 값을 입력하면 어떻게 될까요
위와 같이 joe 라는 텍스트를 입력했을 때 attribute 는 default 값 그대로지만 해당 DOM 값이 바뀜에 따라 property도 바뀌는 것을 확인해 볼 수 있습니다.
정리하면,
attribute 는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미하고, property 는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미합니다.
참고로,
jquery 문서에서 attr(), prop() 의 차이를 설명하고 있는데요.
http://api.jquery.com/prop/ 일독을 권해드립니다.
jquery 1.6 버젼을 기점으로 attr() 메소드는 속성 자체를 prop() 메소드는 속성 값을 다루는 용도로 사용하게 된다고 정리되어 있습니다.
