기술 면접을 대비해 개념을 🍰 한입 크기로 잘라 정리합니다.
깃허브가 궁금하다면 놀러오세요!
👉 깃허브 보러가기 (Since 2023.05.10 ~ )
attribute와 property의 공통점과 차이점
자바스크립트에서 attribute와 property 모두 속성을 의미하지만, 존재하는 위치, 값의 불별성에 대한 차이점이 존재합니다.
예를 들어, value 값이 ‘기본값’인 input 요소가 있다 가정할 때, 해당 input 요소가 html에 있다면 value는 attribute를 의미하고, html DOM 안에 있다면 property를 의미합니다.
즉, 두 속성의 첫번째 차이점은 attribute는 html/document/file 안에서, property는 html DOM tree 안에서 존재합니다.
그리고 attribute는 정적으로 변하지 않은 값이며, property는 동적으로 값이 변할 수 있습니다. 이것이 두 속성의 두번째 차이점입니다.
예를 들어 input값의 value를 변경하면, attribute는 여전히 기본값 그대로지만, property는 변경된 값으로 바뀝니다.
한줄 정리
attribute와 property 모두 속성을 의미하지만, attribute는 html 문서 안에서 바뀌지 않은 정적인 값을 의미하며, property는 html DOM 안에서 동적인 값을 의미합니다.
예시
input 요소의 value값을 정의한 후,
<input value = "초기값" />해당 input의 attribute와 property를 찍어본다.
/*<--- attribute --->*/
console.log(input.getAtrribute('value')) // 초기값
/*<--- property --->*/
console.log(input.value) // 초기값만약 input 값을 바꾸면, attribute값은 변하지 않지만 property값은 변한다.
/*<--- attribute --->*/
console.log(input.getAtrribute('value')) // 초기값
/*<--- property --->*/
console.log(input.value) // 변경값→ property는 DOM에서 동적으로 존재하기 때문이다.
📎 참고문서
