Attribute vs Property

1. 정의

Attribute: HTML 요소의 추가적인 정보. HTML에서 정의된다.
      ex. <div class="root"/>
Property: DOM Tree 내의 Attribute. DOM에서 정의된다.
      ex. const $div = document.querySelector(".root");
           console.log(div.className); // root

  웹페이지 개발을 하다보면 Attribute와 Property라는 단어를 접하게 된다. 두 단어는 어떤 차이가 있을까? 먼저 Attribute는 HTML 요소의 추가적인 정보를 정의하기 위한 것으로 HTML에서 정의된다. 반면 Property는 DOM Tree 내에서의 Attribute를 가리키므로 DOM 내에서 정의된다.

 

*DOM: HTML 페이지를 객체로 구조화한 것. 프로그래밍 언어에서 HTML 페이지를 조작할 수 있도록 연결하는 역할

 

2. 이름과 값

See the Pen Btn Disabled by ImHyeLim1209 (@imhyelim1209) on CodePen.

  Attribute와 Property는 각 이름과 값이 1:1 매핑되기도 하고 그렇지 않기도 하다. 예를 들어 id는 Attribute와 Property 둘 다 존재하지만, class는 Attribute에만 존재하며, Property는 className이 Attribute의 class와 같은 값을 갖는다. 비슷하게 textContent는 Property에만 존재하며 Attribute로는 존재하지 않는다.

 

  이름이 같더라도 값이 다른 경우도 있다. 예를 들어 위 코드펜에서 disabled attribute가 그러하다. disabled라는 Attribute는 HTML 요소에 존재하면 그 값과는 상관 없이 해당 요소를 비활성화시킨다. DOM에서 각 버튼의 disable라는 Property를 확인해보면 비활성화된 버튼은 값이 true, 그렇지 않으면 false를 갖는다.

 

3. 변경 가능성

See the Pen property_attribute by ImHyeLim1209 (@imhyelim1209) on CodePen.

  DOM 요소의 Property는 HTML 요소의 Attribute를 기반으로 초기화되며, Attribute는 더 이상 변경되지 않는다. 즉, Property는 JS 코드에 의해 추후 값이 변경될 수 있지만 Attribute는 그렇지 않다. 위 코드펜의 input 박스의 텍스트를 변경하고 change 버튼을 눌러보자. 그 결과 div1은 변경된 텍스트가 출력되지만 div2는 그렇지 않다. div2는 getAttribute 메소드로 Attribute를 가져왔기 때문에 value가 변경되지 않은 것이다.

 

 

---

참고글: https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html/6004028