HTML attribute와 DOM property는 무엇이 다르고 언제 값이 달라지나요?

이렇게 답해 보세요 (핵심 답변)

HTML attribute는 HTML 마크업 텍스트에 적힌 초기 속성으로 getAttribute()로 읽으면 문자열이나 null을 반환하는 반면, DOM property는 자바스크립트 DOM 노드의 객체 프로퍼티로서 불리언, 숫자 등 타입 있는 현재 상태를 나타냅니다. id처럼 서로 반영되는 것도 있지만, input의 value나 checked처럼 사용자가 입력창에 글자를 치거나 체크박스를 누르면 초기값인 attribute는 그대로 남고 현재 상태인 property만 달라집니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 체크박스의 checked attribute는 마크업에 적혀 있는지만으로 초기 선택 여부를 정하고, 실제 현재 체크 상태는 input.checked 프로퍼티(boolean)로 확인합니다.
2. 폼에서 '초기값으로 되돌리기(reset)'를 구현할 때는 초기 attribute 값을 참고하고, '현재 입력값 검증'을 할 때는 DOM property 값을 읽어야 합니다.

면접에서 자주 하는 실수

HTML attribute와 DOM property가 모든 속성에서 항상 실시간으로 똑같은 값을 유지한다고 가정하면 폼 처리 버그가 생기기 쉽습니다.