La interacción entre JavaScript y los elementos HTML se realiza principalmente a través del Modelo de Objetos del Documento (DOM), una repersentación en árbol del documento generada por el navegador. JavaScript utiliza el DOM para acceder y manipular nodos, permitiendo la creación de interfaces dinámicas y receptivas.

Selección mediante atributo ID

Se asigna un identificador único al elemento HTML, y JavaScript lo recupera con el método document.getElementById. Este enfoque es directo para elementos individuales.

<button id="botonEnvio">Enviar</button>
<script>
  const btnEnvio = document.getElementById('botonEnvio');
  btnEnvio.addEventListener('click', () => {
    console.log('Acción de clic registrada');
  });
</script>

Selección por clases o nombre de etiqueta

Para grupos de eelmentos, se emplean clases o nombres de etiquetas. Los métodos getElementsByClassName o querySelectorAll devuelven colecciones iterables.

<div class="tarjeta">Alpha</div>
<div class="tarjeta">Beta</div>
<script>
  const tarjetas = document.querySelectorAll('.tarjeta');
  tarjetas.forEach((tarjeta, posicion) => {
    tarjeta.addEventListener('mouseover', () => {
      tarjeta.style.backgroundColor = '#f0f0f0';
      console.log(`Elemento ${posicion + 1} activado`);
    });
  });
</script>

La diferencia clave entre querySelector y querySelectorAll es que el primero devuelve un solo nodo (el primero coincidente), mientras que el segundo retorna una NodeList con todas las coincidencias, ideal para operaciones en lote.

Enlace de eventos directamente en el HTML

Aunque es posible usar atributos como onclick en el HTML, esta práctica no se recomienda en proyectos grandes, ya que mezcla la lógica con la estructura y dificulta el mantenimiento.

<button onclick="alert('Clic directo')">Acción</button>

Almacenamiento de datos con atributos personalizados

Los atributos data-* permiten adjuntar información arbitraria a los elementos, accesible desde JavaScript mediante la propiedad dataset.

<div data-estado="activo" id="modulo">Contenido</div>
<script>
  const modulo = document.getElementById('modulo');
  modulo.addEventListener('click', () => {
    const estadoActual = modulo.dataset.estado;
    modulo.dataset.estado = estadoActual === 'activo' ? 'inactivo' : 'activo';
    console.log(`Nuevo estado: ${modulo.dataset.estado}`);
  });
</script>

Resumen de técnicas de selección

La elección del método depende del caso de uso específico, considerando factores como rendimiento y legibilidad del código.