JavaScript에서 입력 값 변경

HTML 텍스트 입력에 현재 들어 있는 내용을 바꾸려면 대상 요소를 선택하고 문자열을 해당 요소의 value 속성에 할당합니다. 그러면 컨트롤에 표시되는 현재 값이 바뀝니다. 이는 컨트롤의 기본값을 나타내는 value 콘텐츠 속성을 변경하는 것과 다릅니다.

현재 입력 값을 value 속성으로 변경

예를 들어, 다음 마크업은 입력 요소에 ID와 초기값을 지정합니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

<input type="text" id="user-name" value="Some Value">

브라우저 페이지에서는 document.getElementById("user-name")으로 해당 요소를 선택한 다음 input.value = "New value"를 할당해 새 텍스트를 설정합니다. 이 할당은 현재 값을 바꾸지만 원래 HTML 속성을 다시 쓰지는 않습니다. 사용자가 입력란에 직접 입력할 때도 같은 속성이 사용됩니다.

다음은 값을 할당하는 독립 실행형 JavaScript 예제입니다. 브라우저 밖에서도 속성 조작을 실행할 수 있도록 간단한 객체를 사용합니다. 페이지 코드에서는 input이 선택한 입력 요소를 가리킵니다.

const input = { value: "Some Value" };
input.value = "New value";
console.log(input.value);

독립 실행형 JavaScript 예제는 New value를 출력합니다. 코드와 출력 블록은 바이트 동일성 규칙에 따라 영어 원문 그대로 유지되므로, 출력 문자열도 영어입니다.

New value

입력 요소 선택

입력 요소에 고유한 ID가 있다면 getElementById()를 사용하세요. 이 메서드는 해당 ID의 요소를 반환하고, 그런 요소가 없으면 null을 반환합니다. 요소가 없을 수도 있다면 할당 전에 결과를 확인하세요. 예를 들어 페이지 코드에서 const input = document.getElementById("user-name");를 실행한 다음 if (input) input.value = "New value";를 사용할 수 있습니다.

CSS 선택자로 입력 요소를 찾으려면 querySelector()를 사용하세요. 예를 들어 document.querySelector('input[name="userName"]')처럼 쓸 수 있습니다. 이 메서드는 일치하는 요소 중 첫 번째 요소를 반환하며, 일치하는 요소가 없으면 null을 반환합니다. 특히 페이지에 입력 요소가 여러 개라면 대상 컨트롤을 정확히 찾도록 선택자를 구체적으로 작성하세요. 여기의 선택자 예제는 브라우저 페이지에서 사용하는 코드 조각이며, 독립 실행형 프로그램은 아닙니다.

양식은 document.forms 컬렉션을 통해서도 찾을 수 있습니다. profile이라는 이름의 양식에 userName이라는 컨트롤이 있다면 페이지 코드에서 document.forms["profile"].elements["userName"]으로 접근할 수 있습니다. 이 방법은 해당 이름이 지정되어 있어야 하며, 알고 있는 양식을 다룰 때 유용합니다. 일반적인 요소 검색에는 ID나 CSS 선택자가 더 명확한 경우가 많습니다. document.forms는 함수가 아니라 컬렉션입니다.

setAttribute()와 기본값 이해하기

입력 요소의 value 속성은 현재 값을 나타냅니다. value 콘텐츠 속성은 기본값을 제공하며, 이 값은 defaultValue 속성으로 확인할 수 있습니다. setAttribute("value", "New default")를 호출하면 해당 콘텐츠 속성과 기본값이 바뀝니다. 사용자가 현재 보고 있는 값을 바꾸려는 경우, 이것은 input.value에 할당하는 방법을 일반적으로 대신할 수 없습니다. 특히 속성이나 사용자의 편집으로 현재 값이 바뀐 뒤에는 기본값을 변경해도 현재 값까지 바뀌는 것은 아닙니다.

현재 값을 즉시 바꾸려면 input.value = "New value"를 사용하세요. 마크업 수준의 기본값을 바꾸려는 경우에는 input.setAttribute("value", "New default")를 사용하세요. 두 방법은 이름이 비슷하지만 대상이 다릅니다. 현재 컨트롤 상태와 기본값 중 무엇을 바꾸려는지에 따라 선택하세요.

결과 확인 및 방법 선택

입력 요소를 선택한 뒤 input.value를 읽으면 현재 값을 확인할 수 있습니다. 값이 바뀌지 않았다면 먼저 선택자가 의도한 요소와 일치하는지, 그리고 페이지에서 입력 요소를 사용할 수 있게 된 뒤 할당 코드가 실행되는지 확인하세요. getElementById() 또는 querySelector()의 검색 결과가 없으면 null이 반환됩니다. 이 결과에 값을 할당하려 하면 오류가 발생하므로 요소를 찾았는지 확인하세요. 코드가 기본 속성만 변경하는 대신 현재 값 속성에 할당하는지도 살펴보세요.

현재 값을 직접 바꾸려면 고유한 ID로 getElementById()를 사용하거나 적절한 CSS 선택자로 querySelector()를 사용해 요소를 선택한 다음 value에 할당하세요. 양식과 컨트롤의 이름을 알고 있다면 document.forms를 사용할 수 있습니다. 기본값 또는 콘텐츠 속성을 변경하려는 경우에만 setAttribute()를 사용하세요. 현재 값과 기본값은 서로 다를 수 있으므로 속성을 변경해도 화면에 표시된 텍스트가 예상대로 바뀌지 않을 수 있습니다.