Ya está disponible el framework MVC para WordPress! Puedes echarle un ojo aquí!

Cómo obtener elementos del DOM con JavaScript

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.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *