[미션 3-3] DOM API를 사용하여 문서 객체에 접근/처리 중에 질문이 있습니다
조회수 1383회
[미션 3-3] DOM API를 사용하여 문서 객체에 접근/처리 중에 질문이 있습니다
제가 로컬환경에서 코드를짜서 크롬 개발자도구를 통해 input_num_first 변수값을 콘솔로 확인했는데, input 엘리먼트의 value는 동적으로 바뀌지 않는 반면에 console.log(input_num_first.value);을 통해서는 value가 동적으로 변하는것을 확인했습니다. 둘 사이에 어떤 차이가 있는것일까요? (제대로 설명이 된건지 몰라 스크린캡처도 함께 업로드 합니다)
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
안녕하세요 :-)
먼저 HTML 속성(Attribute)과 JavaScript 속성(Property)은 다릅니다. HTML 속성은 마크업 과정에서 사용자가 추가한 코드로 "정적"인 반면, 브라우저를 통해 객체로 해석된 요소의 속성은 "동적"입니다.
HTML 코드를 작성하면서
<input>
요소에 추가한value
속성 값은 기본 값 입니다.<input type="number" value="10" aria-label="첫번째 수">
반면 JavaScript에서 사용자의
input
이벤트 발생 시, 처리되는input.value
속성 값은 동적으로 변경됩니다. 변경된 값은 프로그래밍 단에서 값을 읽거나 쓸 수 있지만, HTML<input>
의value
값이 업데이트 되지는 않습니다.var input = document.querySelector('[aria-label="첫번째 수"]'); console.log(input.value); // 기본 value 값 : '10' 출력 input.value = 20; console.log(input.value); // 업데이트 된 value 값: '20' 출력
만약 프로그래밍 단에서
input
객체의 초기 값을 알고자 한다면 다음과 같이 코드를 작성할 수 있습니다.console.log(input.defaultValue); // input 객체의 defaultValue: '10' 출력
defaultValue
속성은<input>
요소의 기본값을 설정하거나 반환합니다.여기서 기본값이란? HTML 코드에 작성한 값입니다.
defaultValue
와value
속성 의 차이점은defaultValue
에 기본값이 포함되는 반면,value
에는 변경 사항이 적용된 후 현재 값이 포함된다는 것입니다. 변경 사항이 없으면defaultValue
와value
는 동일합니다.defaultValue
속성은<input>
요소의 내용이 변경 되었는지 여부를 확인하려는 경우 유용합니다.-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력