Introducción a la consulta del DOM

La consulta del DOM implica seleccionar y acceder a elementos específicos en el documento para poder manipularlos o interactuar con ellos. JavaScript proporciona varios métodos para consultar elementos, cada uno con su propio caso de uso y comportamiento.

GetElementById

getElementById se utiliza para seleccionar un solo elemento por su ID único. Es uno de los métodos más utilizados porque los IDs deben ser únicos dentro del documento.
Caso de uso: Ideal para seleccionar un elemento específico cuando se conoce su ID.
Devuelve: Un solo elemento o null si no se encuentra ningún elemento.

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassName selecciona elementos por su nombre de clase y devuelve una HTMLCollection en vivo de los elementos.
Caso de uso: Útil cuando se necesita seleccionar múltiples elementos con la misma clase.
Devuelve: Una HTMLCollection en vivo de los elementos coincidentes, que se actualiza si el DOM cambia.
Limitaciones: No se pueden usar directamente métodos de array; es necesario convertirlo a un array si se requiere.

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName selecciona elementos por su nombre de etiqueta (por ejemplo, div, p) y devuelve una HTMLCollection en vivo.
Caso de uso: Ideal para seleccionar todos los elementos de un tipo específico.
Devuelve: Una HTMLCollection en vivo de elementos.
Limitaciones: Poco específico, ya que selecciona todos los elementos de una etiqueta dada dentro del contexto.

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector selecciona el primer elemento que coincide con un selector CSS. Es versátil, permitiendo usar cualquier selector CSS válido para encontrar elementos.
Caso de uso: Adecuado para seleccionar la primera coincidencia de cualquier selector CSS.
Devuelve: El primer elemento coincidente o null si no se encuentra coincidencia.

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll selecciona todos los elementos que coinciden con un selector CSS y devuelve un NodeList estático. A diferencia de otros métodos, no se actualiza dinámicamente si el DOM cambia.
Caso de uso: Perfecto para seleccionar múltiples elementos con selectores complejos.
Devuelve: Un NodeList estático de elementos que no se actualiza automáticamente.

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

Diferencias entre estos métodos

Tipos de retorno

Colecciones en vivo vs. estáticas

Selectores CSS

Rendimiento

Ejemplo práctico: Validación de formularios

Combinación de estos métodos en un escenario práctico: resaltar campos de formulario no válidos utilizando clases.

El método getElementById selecciona el elemento de formulario, mientras que querySelectorAll recupera todos los campos de entrada con la clase .input-field. Un escuchador de eventos en el evento "submit" del formulario previene el envío predeterminado y verifica cada campo de entrada. Si un campo está vacío, se resalta con un borde rojo, mientras que los campos completos obtienen un borde verde, proporcionando retroalimentación visual inmediata al usuario.