JavaScript에서 입력 값을 가져오는 방법

JavaScript에서 입력 값을 가져오려면 입력 요소를 선택하고 그 value 속성을 읽으세요. 이는 직접 수행할 수 있으며, 입력을 폼으로 감쌀 필요가 없습니다. 입력이 식별되는 방식, 즉 ID, 공유 클래스 또는 CSS 선택자에 따라 조회 방법을 선택하세요. 아래 예제는 작은 브라우저 유사 픽스처(fixture)를 사용하므로 선택 및 값 읽기 단계가 제공된 런타임에서도 눈에 보이는 결과를 생성할 수 있습니다. 페이지에서는 document에 대해 동일한 DOM 메서드를 사용하고, 스크립트를 해당 입력 마크업 뒤에 배치하거나 페이지가 로드된 뒤에 실행하세요.

document.getElementById()로 입력 값 가져오기

입력에 고유한 id를 부여한 다음 그 ID를 document.getElementById()에 전달하세요. 이 메서드는 일치하는 요소를 반환하므로, 그 value 속성은 해당 입력이 현재 보유한 텍스트를 읽습니다. 스니펫은 입력을 만들고, 그 ID와 값을 할당하고, 선택된 값을 표시합니다. 제공된 런타임 케이스에서는 Ada가 생성되었습니다. 이 접근법은 페이지가 이름이나 이메일 입력 같은 필드에 안정적이고 고유한 ID를 부여할 때 적합합니다. ID는 문서 내에서 고유해야 합니다. 두 요소가 하나를 공유하면 조회로는 어느 쪽을 의도했는지 표현할 수 없습니다. 프레임워크가 나중에 렌더링하거나 스크립트 실행 뒤에 삽입하는 필드의 경우, 해당 요소가 존재한 이후에만 조회를 수행하세요. 반환되는 객체는 입력 자체이며, .value는 그 현재 내용을 읽습니다. 근처의 레이블이나 요소의 HTML 속성을 별도의 소스로 읽지는 않습니다.

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ id: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    getElementById: id => elements.find(element => element.id === id) ?? null
  };
})();

const input = doc.createElement("input");
input.id = "name";
input.value = "Ada";
doc.body.append(input);

const currentValue = doc.getElementById("name").value;
doc.body.textContent = currentValue;

Ada

document.getElementsByClassName()으로 클래스별 입력 값 가져오기

여러 입력이 클래스를 공유할 때 document.getElementsByClassName()를 사용하세요. 브라우저에서는 배열이 아닌 인덱스된 HTMLCollection을 반환합니다. 원하는 입력을 인덱스 0부터 시작하는 위치로 읽은 다음 .value에 접근하세요. 그 위치를 페이지에서 일치하는 요소들의 순서와 맞추세요. 아래 코드는 브라우저 밖에서 실행될 때 작은 픽스처를 사용합니다. 그 결과는 이 예제에서는 인덱스된 목록입니다. 제공된 런타임 케이스에서는 두 번째 입력을 선택하여 Grace를 생성했습니다. 클래스는 페이지가 같은 종류의 컨트롤을 반복할 때 유용하지만, 인덱스는 문서 순서에 의존합니다. 페이지가 일치하는 입력을 추가, 제거 또는 재정렬하면 같은 인덱스가 다른 필드를 가리킬 수 있습니다. 가능하면 클래스를 더 구체적인 컨테이너와 쌍으로 사용하거나 알려진 필드에는 ID를 선택하세요. HTMLCollection은 배열과 유사하고 숫자 인덱싱을 지원하지만 배열은 아닙니다. .map() 같은 배열 메서드를 직접 사용할 수는 없습니다. 각 일치를 처리해야 한다면 루프를 사용하거나 Array.from()으로 컬렉션을 변환하세요.

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ className: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    getElementsByClassName: className => elements.filter(element => element.className.split(/\s+/).includes(className))
  };
})();

const firstInput = doc.createElement("input");
firstInput.className = "contact";
firstInput.value = "Ada";

const secondInput = doc.createElement("input");
secondInput.className = "contact";
secondInput.value = "Grace";

doc.body.append(firstInput, secondInput);

const currentValue = doc.getElementsByClassName("contact")[1].value;
doc.body.textContent = currentValue;

Grace

document.querySelector()로 입력 값 가져오기

document.querySelector()는 CSS 선택자를 받아 처음 일치하는 요소를 반환합니다. ID에는 #name, 클래스에는 .contact, 태그에는 input, name 속성에는 [name="email"]을 사용하세요. 선택한 입력에 .value를 적용합니다. 선택자가 여러 요소와 일치하면 이 메서드는 첫 번째만 읽습니다. 모든 일치를 다루려면 querySelectorAll()을 사용하세요. 어떤 요소와도 일치하지 않는 선택자는 null을 반환하므로, 값을 읽기 전에 선택자가 입력과 일치하는지 확인하세요. 예제는 name 속성으로 입력을 선택합니다. 제공된 런타임 케이스에서는 ada@example.com이 생성되었습니다. 사용 가능한 가장 안정적인 식별 세부 정보를 표현하는 선택자를 사용하고 페이지 마크업과 맞추세요. 예를 들어, [name="email"]은 입력에 정확히 그 name 속성이 있을 때 작동합니다. 마크업을 name="contactEmail"로 바꾸면 선택자도 바꿔야 합니다. querySelector()는 하나의 요소만 반환하므로, 페이지가 의도한 일치 하나를 제공해야 할 때 간결합니다. 일치하는 모든 입력이 중요할 때는 querySelectorAll()이 순회할 수 있는 컬렉션을 반환합니다.

값을 읽는다고 해서 폼이 제출되거나 입력이 변경되지는 않습니다. 현재 입력된 텍스트를 스크립트에 전달할 뿐이며, 이를 검증하거나 이벤트 핸들러에서 사용할 수 있습니다. 그 텍스트를 페이지에 다시 표시할 경우 textContent로 할당하여 브라우저가 이를 마크업이 아니라 텍스트로 취급하게 하세요. 실제 폼에서는 값을 언제 읽을지도 결정하세요. 이벤트 핸들러는 사용자가 입력하거나 제출한 뒤에 이를 캡처할 수 있고, 페이지 로드 시 한 번만 실행되는 코드는 그 순간의 값을 읽습니다. 세 메서드는 주로 요소를 찾는 방식에서 차이가 납니다. 입력 요소를 확보하면 읽을 .value는 동일한 속성입니다.

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ name: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    querySelector: selector => {
      const match = selector.match(/^\[name=["'](.+)["']\]$/);
      return match ? elements.find(element => element.name === match[1]) ?? null : null;
    }
  };
})();

const input = doc.createElement("input");
input.name = "email";
input.value = "ada@example.com";
doc.body.append(input);

const currentValue = doc.querySelector('[name="email"]').value;
doc.body.textContent = currentValue;

ada@example.com