[ JavaScript ] attribute vs property

attribute 란?

• HTML의 속성이다.
• 엘리먼트에 아이디나 클래스와 같은 추가적인 정보를 일컫는다.

property 란?

• DOM의 속성이다.

//html
//attribute : class , style
<div class='my-class' style="color: red;"></div>

//DOM
// property : className, style
<script> 
    document.querySelector('div').className; // "my-class"
    document.querySelector('div').style.color; // "red"
</script>

attribute vs property 기능 차이

엘리먼트 속성 접근 차이

• attribute 는 정적으로 변하지 않고, property는 동적으로 값이 변할 수 있다.
  => attribute 는 html 안에, property는 DOM tree 안에 존재하기 때문이다.
  => DOM 은 JS 모델이므로 굳이 HTML 속성을 계속 업데이트 할 필요가 없다.
• 둘 다 값을 변경하고 싶다면, setAttribute()메서드를 사용하면 된다.

사용자 정의 속성 접근 차이

• HTML에 미리 정의된 태그의 속성 뿐만 아니라 개발자가 임의로 엘리먼트에 사용자 속성을 만들어 넣을 수도 있다.
  그러나 엘리먼트가 가진 모든 속성이 프로퍼티가 되진 않는다.

<!-- 실제 html에 없는 사용자 정의 임의 속성 custom -->
<input type="text" value="0" custom="9999">

const input = document.querySelector('input');
console.log(input.custom); // undefined

• 사용자 정의 속성 값에 접근하려면 getAttribute() , setAttribute()를 사용하면 된다.

일반적인 프로퍼티 접근이 getAttribute()와 setAttribute() 메서드보다 더 빠르다.

• 사용자 속성과 같이 별도의 프로퍼티가 없는 경우에만 메서드를 사용하고 그 외에는 프로퍼티로 접근하는 방법이 이상적이다.

---

참조

https://inpa.tistory.com/entry/%F0%9F%8C%90-attribute-property-%EC%B0%A8%EC%9D%B4

https://medium.com/hexlant/attribute-%EC%99%80-property-%EC%9D%98-%EC%B0%A8%EC%9D%B4-c6f1c91ba91