attribute와 property의 차이(HTML: The difference between attribute and property 번역)

HTML: The difference between attribute and property

이 글은 2011년에 JQuery Howto에 게시된 HTML: The difference between attribute and property(HTML: attribute와 property의 차이)라는 글을 번역한 글입니다.

 

 

 

 

 

이번 짧은 포스팅에서 나는 HTML에서의 attributes와 properties의 차이를 설명하고자 합니다. JQuery 1.6에서 도입된 .prop() 함수에 의해 그 차이에 대한 많은 의문이 생겼습니다. 그래서 저는 이 포스팅이 의문들을 해결하는 데 도움이 되길 바랍니다.

 

 

 

attribute란 뭘까?

attribute는 HTML element에 대한 추가적인 정보를 제공하고 name="value" 꼴의 쌍으로 나타납니다. 예를 들어, <div class="my-class"><div> 같은 형태가 그렇습니다. 여기서 우리에겐 div 태그가 있고 이 div 태그는 "my-class" 라는 값을 가진 class attribute를 갖고 있습니다.

 

 

 

property란 뭘까?

property는 HTML DOM tree에서 attribute를 대신하는(표현하는) 방식입니다. 그래서 위 예시에 나왔던 attribute는 my-class라는 값을 가진 className이라는 이름의 property를 갖는 것입니다.

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

 

 

attribute와 property의 차이는 뭘까?

attribute는 우리의 HTML text document/file에서 쓰이지만 property는 HTML DOM tree에서 쓰입니다. 이 점은 attribute가 바뀔 수 없고 항상 초기 값(default 값) 을 가져온다는 것을 의미합니다. 그러나 HTML property는 바뀔 수 있는데, 사용자가 체크박스를 체크한다든지, 텍스트를 textarea에 입력한다든지, 자바스크립트를 이용해 property 값을 변경하는 상황에서 그렇습니다.

예시입니다.

사용자가 inputbox에 자신의 이름 "Joe"를 입력한다고 합시다. attribute와 property의 값이 무엇으로 변할지 봅시다.

보이는 것처럼, 오직 element의 property 값만 바뀌었습니다. 이는 property가 DOM에 속해있고 동적이기 때문입니다. 그러나 element의 attribute의 텍스트는 변하지 않습니다.