Cómo obtener el valor de entrada en JavaScript

Para obtener un valor de entrada en JavaScript, seleccione el elemento de entrada y lea su propiedad value. Puede hacerlo directamente; la entrada no necesita estar envuelta en un formulario. Elija un método de búsqueda según cómo se identifica la entrada: un ID, una clase compartida o un selector CSS. Los ejemplos siguientes usan una pequeña estructura de prueba similar a un navegador (fixture) para que los pasos de selección y lectura del valor también puedan producir un resultado visible en el entorno de ejecución proporcionado. En una página, use los mismos métodos del DOM en document; coloque el script después de su marcado de entrada o ejecútelo después de que la página se haya cargado.

Obtener un valor de entrada con document.getElementById()

Dé a la entrada un id único y luego pase ese ID a document.getElementById(). El método devuelve el elemento coincidente, por lo que su propiedad value lee el texto que esa entrada contiene actualmente. El fragmento crea una entrada, le asigna su ID y su valor, y muestra el valor seleccionado. El caso en el entorno de ejecución proporcionado produjo Ada. Este enfoque es adecuado cuando la página da a un campo un ID estable y único, como una entrada de nombre o de correo electrónico. Los ID deben ser únicos dentro del documento; si dos elementos comparten uno, la búsqueda no puede expresar cuál quería. En el caso de un campo representado más tarde por un framework o insertado después de que se ejecute el script, realice la búsqueda solo después de que ese elemento exista. El objeto devuelto es la propia entrada, y .value lee su contenido actual. No lee una etiqueta cercana ni el atributo HTML del elemento como fuente 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

Obtener valores de entrada por clase con document.getElementsByClassName()

Use document.getElementsByClassName() cuando varias entradas comparten una clase. En un navegador devuelve una HTMLCollection indizada, no un array. Lea la entrada deseada por su posición, empezando en el índice 0, y luego acceda a .value. Mantenga esa posición alineada con el orden de los elementos coincidentes en la página. El código siguiente usa una pequeña fixture cuando se ejecuta fuera de un navegador; su resultado es una lista indizada para este ejemplo. El caso en el entorno de ejecución proporcionado seleccionó la segunda entrada y produjo Grace. Una clase es útil cuando una página repite el mismo tipo de control, pero el índice depende del orden del documento. Si la página agrega, elimina o reordena entradas coincidentes, el mismo índice puede referirse a un campo diferente. Cuando sea posible, combine la clase con un contenedor más específico o elija un ID para un campo conocido. Una HTMLCollection es similar a un array y admite indexación numérica, pero no es un array; los métodos de array como .map() no están disponibles directamente en ella. Si necesita procesar cada coincidencia, use un bucle o convierta la colección con 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

Obtener un valor de entrada con document.querySelector()

document.querySelector() acepta un selector CSS y devuelve el primer elemento coincidente. Use #name para un ID, .contact para una clase, input para una etiqueta o [name="email"] para un atributo name. Aplique .value a la entrada seleccionada. Si un selector coincide con varios elementos, este método lee solo el primero; use querySelectorAll() para trabajar con todas las coincidencias. Un selector que no coincide con ningún elemento devuelve null, así que confirme que el selector coincide con una entrada antes de leer su valor. El ejemplo selecciona una entrada por su atributo name. El caso en el entorno de ejecución proporcionado produjo ada@example.com. Use un selector que exprese el detalle identificativo más estable disponible y manténgalo alineado con el marcado de la página. Por ejemplo, [name="email"] funciona cuando la entrada tiene exactamente ese atributo name; cambiar el marcado a name="contactEmail" requiere cambiar también el selector. Como querySelector() devuelve solo un elemento, es conciso cuando la página debe proporcionar una coincidencia prevista. Cuando importa cada entrada coincidente, querySelectorAll() devuelve una colección que puede recorrer.

Leer un valor no envía un formulario ni cambia la entrada. Simplemente entrega a su script el texto introducido actualmente, que puede validar o usar en un controlador de eventos. Si muestra ese texto de nuevo en la página, asígnelo con textContent para que el navegador lo trate como texto y no como marcado. En un formulario real, decida también cuándo leer el valor: un controlador de eventos puede capturarlo después de que el usuario escribe o envía, mientras que un código que se ejecuta solo una vez al cargar la página lee el valor en ese momento. Los tres métodos difieren principalmente en cómo encuentran el elemento; una vez que tiene el elemento de entrada, .value es la misma propiedad que se lee.

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