Como obter o valor de entrada em JavaScript

Para obter um valor de entrada em JavaScript, selecione o elemento de entrada e leia sua propriedade value. Você pode fazer isso diretamente; a entrada não precisa ser envolvida em um formulário. Escolha um método de busca com base em como a entrada é identificada: um ID, uma classe compartilhada ou um seletor CSS. Os exemplos abaixo usam uma pequena fixture semelhante a um navegador, para que as etapas de seleção e leitura do valor também possam produzir um resultado visível no runtime fornecido. Em uma página, use os mesmos métodos DOM em document; coloque o script depois da marcação da entrada ou execute-o depois que a página for carregada.

Obter um valor de entrada com document.getElementById()

Dê à entrada um id exclusivo e passe esse ID para document.getElementById(). O método retorna o elemento correspondente, de modo que sua propriedade value lê o texto atualmente mantido por essa entrada. O trecho cria uma entrada, atribui seu ID e valor e exibe o valor selecionado. O caso no runtime fornecido produziu Ada. Essa abordagem é adequada quando a página dá a um campo um ID estável e exclusivo, como uma entrada de nome ou e-mail. Os IDs devem ser exclusivos no documento; se dois elementos compartilharem um, a busca não poderá expressar qual você pretendia. Para um campo renderizado depois por um framework ou inserido após a execução do script, faça a busca somente depois que esse elemento existir. O objeto retornado é a própria entrada, e .value lê seu conteúdo atual. Ele não lê um rótulo próximo nem o atributo HTML do elemento como uma fonte separada.

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

Obter valores de entrada por classe com document.getElementsByClassName()

Use document.getElementsByClassName() quando várias entradas compartilham uma classe. Em um navegador, ele retorna uma HTMLCollection indexada, não um array. Leia a entrada pretendida pela sua posição, começando no índice 0, e depois acesse .value. Mantenha essa posição alinhada com a ordem dos elementos correspondentes na página. O código abaixo usa uma pequena fixture quando executado fora de um navegador; seu resultado é uma lista indexada para este exemplo. O caso no runtime fornecido selecionou a segunda entrada e produziu Grace. Uma classe é útil quando uma página repete o mesmo tipo de controle, mas o índice depende da ordem do documento. Se a página adicionar, remover ou reordenar entradas correspondentes, o mesmo índice pode se referir a um campo diferente. Quando possível, combine a classe com um contêiner mais específico ou escolha um ID para um campo conhecido. Uma HTMLCollection é semelhante a um array e oferece suporte à indexação numérica, mas não é um array; métodos de array como .map() não estão diretamente disponíveis nela. Se precisar processar cada correspondência, use um loop ou converta a coleção com 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

Obter um valor de entrada com document.querySelector()

document.querySelector() aceita um seletor CSS e retorna o primeiro elemento correspondente. Use #name para um ID, .contact para uma classe, input para uma tag ou [name="email"] para um atributo name. Aplique .value à entrada selecionada. Se um seletor corresponder a vários elementos, esse método lê apenas o primeiro; use querySelectorAll() para trabalhar com todas as correspondências. Um seletor que não corresponde a nenhum elemento retorna null, então confirme que o seletor corresponde a uma entrada antes de ler seu valor. O exemplo seleciona uma entrada pelo seu atributo name. O caso no runtime fornecido produziu ada@example.com. Use um seletor que expresse o detalhe de identificação mais estável disponível e mantenha-o alinhado com a marcação da página. Por exemplo, [name="email"] funciona quando a entrada tem exatamente esse atributo name; mudar a marcação para name="contactEmail" exige mudar também o seletor. Como querySelector() retorna apenas um elemento, ele é conciso quando a página deve fornecer uma correspondência pretendida. Quando cada entrada correspondente importa, querySelectorAll() retorna uma coleção que você pode percorrer.

Ler um valor não envia um formulário nem altera a entrada. Ele simplesmente entrega ao seu script o texto atualmente inserido, que você pode validar ou usar em um manipulador de eventos. Se mostrar esse texto de volta na página, atribua-o com textContent para que o navegador o trate como texto, e não como marcação. Em um formulário real, decida também quando ler o valor: um manipulador de eventos pode capturá-lo depois que o usuário digita ou envia, enquanto um código executado apenas uma vez no carregamento da página lê o valor naquele momento. Os três métodos diferem principalmente em como encontram o elemento; depois que você tem o elemento de entrada, .value é a mesma propriedade a ser lida.

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