[JavaScript] Attribute와 Property의 설명과 차이

 

 

 

 

---

 

 

 

 

📑 개요

 

attribute와 property.. 많이 헷갈릴 개념이다.

가장 중요한 건 무엇이 변하고 무엇이 변하지 않는가라고 생각되고...

이걸 이해하면 대략적으로는 다 이해했다고 생각된다.

 

약간 어렵긴 한데...! 시작한다.

 

 

 

 

---

 

 

 

 

🧿 Attribute와 Property의 정의와 사용

 

 

- HTML의 Attribute

• HTML 요소의 속성
• HTML 마크업에 정의되어 있는것
• default 값이 변하지 않음
• html 문서에서 시각적이거나 기능적인 효과를 나타낼 때 사용됨
• 정적인 값으로 html 문서가 로드될 때 초기화

<input type="text" value="0">

// input -> element
// type, value -> attribute
// "text", "0" -> value

 

 

 

- DOM의 Property

• JavaScript 객체의 속성
• HTML DOM 트리에 있는 것
• default 값이 변함
• html 요소의 상태를 나타내거나 조작할 때 사용됨
• 동적인 값으로 JavaScript에서 요소를 조작하고 업데이트 할 때 사용 가능

const input = document.querySelector('input');
console.log(input.value); // 0

// input.value = property

 

 

 

이렇게 보면 "둘이 뭐가 달라요? 비슷한 거 아니에요?" 생각이 들 것이다.

그렇기 때문에 아래에서 위에서 적은 코드를 예시로 들며 차이점을 설명하겠다.

 

 

 

❓ Attribute와 Property의 차이

 

앞서 Attribute는 정적, Property는 동적이라고 말한 바가 있다.

이는 값이 바뀌는 것인지, HTML인지 DOM에 있는 객체인지에 따라 정해진 것이다.

 

코드로 예를 들어보자.

 

input.value = 100;
console.log(input.value); // 100

 

input.value는 console 상에서 100으로 나오게 된다.

하지만 HTML 태그에서 확인할 시 value 값은 여전히 0으로 되어있다.

 

어트리뷰트와 프로퍼티는 연결되어 있지만 다른 것들이기 때문에

property의 값을 변경하여도 DOM 객체만 업데이트 되고

HTML은 업데이트 되지 않아 attribute의 값은 그대로가 된다.

 

 

 

 

---

 

 

 

 

 

✨ 마무리

 

나도 정리하면서 공부한 내용...

용어는 알았는데 자세히는 몰랐다.

확실히 cs를 공부하다보니 애매하게 알던 것들이 정립되어가는 것 같아서 좋음!

이건 나중에 좀 더 공부하면서 정리도 더 해봐야할 것 같다.

 

 

- 요약

• attribute : HTML요소의 속성으로 정적이기 때문에 값이 변하지 않는다.
• property : HTML DOM 에 있는 것으로 동적이기 때문에 값이 변한다.

 

 

 

- 참고 문헌

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