Cómo obtener elementos del DOM con JavaScript

Cuando accedes de cualquier elemento del DOM, lo habitual es guardarlo en una variable. Esto es algo que a priori podría parecer muy sencillo, que si eres un programador principiante podría darte ciertos quebraderos de cabeza en algunas ocasiones.

Para empezar, vamos a ver cómo puedes obtener un elemento del DOM mediante JavaScript. Primero vamos a definir un campo input de ejemplo:

<input id="coche">

Ahora vamos a ver cómo podemos obtener el valor del campo:

const coche = document.querySelector('input#coche').value;

Sin embargo, esta variable no se actualizará cuando el DOM cambie. Es decir, que si por ejemplo quieres enviar el valor que has almacenado a tu servidor mediante un formulario dinámico, tendrás que volver a obtener el elemento del DOM.

La variable coche obtiene su valor del estado que tenía el DOM en el momento en el que el navegador ejecutó la sentencia mediante la cual obtenemos el valor del campo, y salvo que no actualicemos su valor, no cambiará.

Imaginemos que quieres enviar el valor del campo a través de un formulario AJAX:

const coche = document.querySelector('input#coche').value;

document.querySelector('form').addEventListener('submit', event => {
  // Código que envía la la variable coche al servidor
});

Es muy habitual que un programador principiante haga esto, el valor del campo #coche puede que haya cambiado cuando enviemos la variable coche, que no se habrá actualizado. la solución pasa pos obtener el valor justo antes de enviarlo al servidor:

document.querySelector('form').addEventListener('submit', event => {
  const coche = document.querySelector('input#coche').value;
  // Código que envía la la variable coche al servidor
});

En caso de que quieras que el código del interior del evento no sea tan largo, puedes guardar una referencia al campo, que es diferente a su valor:

const inputCoche= document.querySelector('input#coche');
document.querySelector('form').addEventListener('submit', event => {
  const coche = inputCoche.value;
  // Código que envía la la variable coche al servidor
});

Y esto ha sido todo.

---