[미션 3-3] DOM API를 사용하여 문서 객체에 접근/처리 중에 질문이 있습니다

조회수 1366회

[미션 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 코드에 작성한 값입니다.

    defaultValuevalue 속성 의 차이점은 defaultValue 에 기본값이 포함되는 반면, value에는 변경 사항이 적용된 후 현재 값이 포함된다는 것입니다. 변경 사항이 없으면 defaultValuevalue는 동일합니다. defaultValue 속성은 <input> 요소의 내용이 변경 되었는지 여부를 확인하려는 경우 유용합니다.

    input value vs defaultValue

    • (•́ ✖ •̀)
      알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)