HTML 마크업의 attribute와 자바스크립트 DOM property는 어떻게 구분하나요?

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

HTML attribute는 HTML 문서에 작성된 직렬화된 초기 속성값이고, DOM property는 메모리에 생성된 DOM 객체가 들고 있는 실시간 상태값입니다. 예를 들어 <input value="초기값">에 사용자가 새 글자를 입력하면 input.getAttribute('value')는 여전히 '초기값'을 돌려주지만, input.value 프로퍼티는 사용자가 방금 수정한 현재 문자열을 반환합니다. 따라서 화면의 현재 상호작용 상태를 읽고 바꿀 때는 DOM property를 기준으로 다루어야 합니다.

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

1. disabled나 checked 같은 불리언 속성은 attribute에 빈 문자열만 있어도 프로퍼티에서는 true로 해석되므로 타입 차이를 이해해야 합니다.
2. textContent나 classList처럼 대응하는 같은 이름의 HTML attribute가 아예 없는 DOM 전용 프로퍼티도 존재합니다.

면접에서 자주 하는 실수

사용자가 입력창 값을 바꿨을 때 HTML 태그의 value attribute 문자열도 자동으로 함께 바뀐다고 오해하지 않아야 합니다.