Tema 15 · DOM y Eventos

Selección de Elementos en el DOM

Domina las técnicas para ubicar y capturar elementos HTML desde JavaScript: getElementById, querySelector, querySelectorAll y la diferencia entre NodeList y HTMLCollection.

Desestructuración y Operador Spread (...) Modificar Contenido, Atributos y CSS

¿Qué es el DOM (Document Object Model)?

Cuando un navegador web carga una página HTML, crea internamente una estructura jerárquica en árbol llamada DOM (Modelo de Objetos del Documento). A través del objeto global document, JavaScript puede inspeccionar, seleccionar y modificar cualquier elemento de la página.

Los Métodos de Selección Esenciales

Método Criterio de Búsqueda Qué Retorna
document.getElementById("mi-id") Busca por el atributo id único. El elemento exacto o null (es el más rápido).
document.querySelector("selector") Busca usando cualquier selector CSS (.clase, #id, tag[attr]). El primer elemento coincidente o null.
document.querySelectorAll("selector") Busca todos los elementos que cumplan el selector CSS. Una NodeList estática que soporta .forEach().
document.getElementsByClassName("clase") Busca por nombre de clase. Una HTMLCollection viva (se actualiza automáticamente).

Ejemplos de Sintaxis

// 1. Selección por ID
const titulo = document.getElementById("encabezado-principal");

// 2. Selección del primer botón primario con querySelector
const botonGuardar = document.querySelector(".btn.btn-primary");

// 3. Selección de todas las tarjetas activas con querySelectorAll
const tarjetas = document.querySelectorAll(".tarjeta.activa");
tarjetas.forEach(tarjeta => {
  tarjeta.style.borderColor = "#22c55e";
});

⚡ Explorador Interactivo de Selectores del DOM

Prueba seleccionar elementos individuales o múltiples y observa cómo se resaltan en pantalla:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Selección de Elementos en el DOM</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-dom { max-width: 540px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .botones-accion { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
    .botones-accion button { padding: 8px 12px; background: #f1f5f9; border: 1px solid #94a3b8; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }
    .botones-accion button:hover { background: #0284c7; color: white; border-color: #0284c7; }
    .area-demo { border: 2px dashed #cbd5e1; border-radius: 6px; padding: 15px; margin-bottom: 15px; }
    .item-demo { padding: 8px 12px; margin: 6px 0; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; transition: all 0.3s; }
    .resaltado-rojo { background: #fee2e2 !important; border-color: #ef4444 !important; font-weight: bold; color: #991b1b; }
    .resaltado-verde { background: #dcfce7 !important; border-color: #22c55e !important; font-weight: bold; color: #166534; }
    .consola-salida { background: #0f172a; color: #38bdf8; padding: 10px 14px; border-radius: 6px; font-family: monospace; font-size: 0.85rem; }
  </style>
</head>
<body>

  <div class="card-dom">
    <h3 style="margin-top: 0; color: #0f172a;">Práctica: Selectores del DOM</h3>

    <div class="botones-accion">
      <button onclick="seleccionarPorId()">getElementById('caja-alfa')</button>
      <button onclick="seleccionarPrimerItem()">querySelector('.item-demo')</button>
      <button onclick="seleccionarTodos()">querySelectorAll('.urgente')</button>
      <button onclick="limpiarSeleccion()">Restablecer</button>
    </div>

    <div class="area-demo" id="contenedor-items">
      <div id="caja-alfa" class="item-demo">Caja Alfa (#caja-alfa)</div>
      <div class="item-demo urgente">Elemento Urgente 1 (.urgente)</div>
      <div class="item-demo">Elemento Regular</div>
      <div class="item-demo urgente">Elemento Urgente 2 (.urgente)</div>
    </div>

    <div class="consola-salida" id="log-salida">Haz clic en un selector para inspeccionar el DOM...</div>

    <script>
      function limpiarSeleccion() {
        document.querySelectorAll('.item-demo').forEach(el => {
          el.className = 'item-demo' + (el.innerText.includes('Urgente') ? ' urgente' : '');
        });
        document.getElementById('log-salida').textContent = "Selección restablecida.";
      }

      function seleccionarPorId() {
        limpiarSeleccion();
        const el = document.getElementById('caja-alfa');
        if (el) {
          el.classList.add('resaltado-verde');
          document.getElementById('log-salida').textContent = `Seleccionado 1 elemento por ID: <${el.tagName.toLowerCase()} id="${el.id}">`;
        }
      }

      function seleccionarPrimerItem() {
        limpiarSeleccion();
        const primer = document.querySelector('.item-demo');
        if (primer) {
          primer.classList.add('resaltado-rojo');
          document.getElementById('log-salida').textContent = `querySelector retornó el primer nodo coincidente: "${primer.textContent}"`;
        }
      }

      function seleccionarTodos() {
        limpiarSeleccion();
        const urgentes = document.querySelectorAll('.urgente');
        urgentes.forEach(nodo => nodo.classList.add('resaltado-verde'));
        document.getElementById('log-salida').textContent = `querySelectorAll retornó una NodeList con ${urgentes.length} elementos.`;
      }
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.