Seleccionar elementos del DOM con JavaScript

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Fundamentos Javascript

Funciones, Scope y Estructuras de Datos

DOM y Experiencia en el Navegador

Modulos y Asincronía

Tomar examen

Seleccionar elementos del DOM con JavaScript

Resumen

Aprende a controlar el DOM con JavaScript paso a paso. Desde la consola del navegador hasta selectores modernos y métodos clásicos, verás cómo leer, recorrer y preparar la manipulación de una landing de productos. Conoce qué es Document Object Model, cómo funciona su estructura en árbol y qué devuelve cada método al seleccionar elementos.

¿Qué es el DOM y cómo se conecta con JavaScript?

El DOM (Document Object Model) es la representación estructurada del documento HTML en forma de árbol. Cada etiqueta es un nodo con propiedades y relaciones. JavaScript puede leer, modificar, crear y eliminar estos nodos para cambiar contenido, estructura y estilos de una página.

Estructura en árbol: nodos padre e hijo que representan el HTML.
Acciones clave: leer, recorrer, modificar dinámicamente y estilizar.
Objetivo práctico: preparar una landing de productos para futuras inserciones dinámicas.

Además, se sugiere usar la extensión Live Server para correr un servidor local con recargas en tiempo real. Esto permite ver cambios inmediatos en el navegador basado en Chromium como Chrome.

¿Cómo inspeccionar y acceder al documento con la consola?

Abre las herramientas de desarrollador e ingresa a la consola. Desde ahí puedes obtener el documento completo o secciones específicas como head y body. También puedes inspeccionar visualmente elementos y su jerarquía.

¿Qué comandos básicos permiten ver el documento?

Ver el documento y su URL.

// Documento completo
document

// Secciones principales
document.head
document.body

Identificar etiquetas clave: en body verás elementos como header, main y footer, además de un script inyectado por Live Server para la recarga en tiempo real.

¿Cómo validar visualmente elementos en el inspector?

Usa inspeccionar para resaltar cada nodo en la página.
Confirma la estructura y las clases que vas a consultar.
Observa propiedades disponibles como innerHTML o draggable según el tipo de nodo.

¿Qué selectores y métodos usar para leer elementos del DOM?

Primero, practica con selectores modernos. Luego, refuerza con métodos clásicos que devuelven colecciones. Entiende qué retorna cada uno: un único nodo, una NodeList o una HTMLCollection.

¿Cómo usar querySelector y querySelectorAll?

Seleccionar por etiqueta, clase o id. Devuelve el primer match.

// Por etiqueta
document.querySelector('header')

// Por clase
document.querySelector('.producto')

// Por id
document.querySelector('#btnComprar')

// Por etiqueta específica
document.querySelector('h1') // "Productos útiles, entrega rápida"

Seleccionar todos los elementos que coinciden con la clase. Devuelve una NodeList indexable.

const destacados = document.querySelectorAll('.producto')
// destacados[0] -> audífonos nova
// destacados[1] -> mouse
// destacados[2] -> teclado

Claves de aprendizaje:

NodeList: se recorre por índice y permite iteraciones modernas.
Propiedades útiles: innerHTML para leer o insertar contenido, draggable para arrastrable.
Ideal para preparar inserciones dinámicas de contenido con JavaScript.

¿Qué métodos clásicos ayudan a obtener colecciones?

Por id: retorna un único elemento.

document.getElementById('btnComprar') // Botón "Ver ofertas"

Por clase: retorna una HTMLCollection con los elementos de navegación.

document.getElementsByClassName('nav-link')

Por etiqueta: retorna una HTMLCollection con todos los botones.

document.getElementsByTagName('button')

Diferencias prácticas:

querySelector: primer match. Útil para selecciones rápidas.
querySelectorAll: múltiple selección como NodeList.
getElementById: único nodo por id.
getElementsByClassName / TagName: colecciones vivas tipo HTMLCollection.

Aplicaciones inmediatas:

Leer el header para entender su estructura.
Extraer el H1 de la landing: “Productos útiles, entrega rápida”.
Obtener todos los productos destacados con su clase y trabajar con su lista.
Preparar un arreglo de objetos de opiniones de usuarios para insertarlas dinámicamente en el DOM más adelante.

Si te surgen dudas al practicar con la consola o quieres compartir un truco con selectores, deja tu comentario y continuamos la conversación.

// ============================================
// Reto: Seleccionar elementos del DOM con JavaScript
// ============================================
// Completa cada función según las instrucciones.
// Ejecuta los tests con: npx vitest src/21-seleccionar-elementos-dom
// ============================================

// --- Reto 1: Seleccionar elemento por ID ---
// Usa getElementById para seleccionar el elemento con id "titulo-principal"
// y retorna su contenido de texto (textContent).
function obtenerTextoPorId(Id) {
  // Tu código aquí
  return document.getElementById(Id).textContent;
}

// --- Reto 2: Seleccionar elemento por clase con querySelector ---
// Usa querySelector para seleccionar el primer elemento con clase "producto"
// y retorna su contenido HTML (innerHTML).
function obtenerHTMLPorClase(className) {
    // El ?. evita que el código explote si el elemento no existe (devuelve undefined) 
  return document.querySelector(`.${className}`) ?.innerHTML || '';
}

// --- Reto 3: Seleccionar todos los elementos por etiqueta ---
// Usa getElementsByTagName para seleccionar todos los elementos <button>
// y retorna la cantidad de elementos encontrados.
function contarBotones(element) {
  // Tu código aquí
  //getElementByTagName devuelve una lista
  return document.getElementsByTagName(element).length
}

// --- Reto 4: Seleccionar múltiples elementos por clase ---
// Usa querySelectorAll para seleccionar todos los elementos con clase "nav-link"
// y retorna un array con los textContent de cada elemento.
function obtenerTextosNavegacion() {
  // Tu código aquí
  //capturar elementos: 
  // querySelectorAll devuelve un NodeList (no un Array)
  const elementos = document.querySelectorAll('.nav-link'); 
  //transformar los elementos. Necesito Array.from() para poder usar .map() y extraer datos
  return Array.from(elementos).map(el => el.textContent);
}
// --- Reto 5: Seleccionar elementos por clase clásica ---
// Usa getElementsByClassName para seleccionar todos los elementos con clase "producto"
// y retorna la cantidad de elementos encontrados.
function contarProductosClase() {
  // Tu código aquí
  return document.getElementsByClassName('producto').length;
}

// --- Reto 6: Selector combinado ---
// Usa querySelector para seleccionar el primer elemento que tenga
// clase "producto" y sea descendiente de un elemento con clase "destacados"
// y retorna su atributo id si existe, o null si no tiene.
function obtenerIdProductoDestacado() {
  // Tu código aquí
  return document.querySelector('.destacados .producto').id ?.id||null;
}

// --- Reto 7: Selector de atributo ---
// Usa querySelectorAll para seleccionar todos los elementos que tengan
// el atributo "data-categoria" y retorna un array con los valores de dicho atributo.
function obtenerCategoriasPorAtributo() {
  // Tu código aquí
  //se usa [] porque es el valor del atributo
  const elements= document.querySelectorAll('[data-categoria]');  //Los corchetes deben ir dentro de las comillas para que el navegador los interprete como una búsqueda de atributo.
    //getAttribute se usa aquí porque data-categoria es un atributo personalizado.
    //getAttribute es la forma universal y explícita de pedirle al navegador: "dame el valor que está escrito en esta etiqueta".
  return Array.from(elements).map(el => el.getAttribute('data-categoria'));
}

// --- Reto 8: Selector de pseudo-clase ---
// Usa querySelectorAll para seleccionar el primer elemento <li> de cada lista <ul>
// usando la pseudo-clase :first-child y retorna un array con sus textos.
function obtenerPrimerosElementosLista() {
  // Tu código aquí
  //La Regla del Selector: ¿Es un string? ¿Usa la sintaxis correcta (. para clase, # para ID, [] para atributo, espacio para descendiente)?
  const firstElement=document.querySelectorAll('ul li:first-child');
  //como es una lista, no puedo aplicar .textContent directo; necesito .map().
  return Array.from(firstElement).map(element=> element.textContent);
}

// --- Reto 9: Selector jerárquico ---
// Usa querySelector para seleccionar el elemento <h1> dentro del <header>
// y retorna su texto. Si no existe, retorna "No encontrado".
function obtenerTituloHeader() {
  // Tu código aquí
  return document.querySelector('header h1')?.textContent||'No encontrado';
}

// --- Reto 10: Selector múltiple ---
// Usa querySelectorAll para seleccionar todos los elementos que sean
// <h2>, <h3> o tengan clase "subtitulo" y retorna la cantidad total.
function contarTitulosYSubtitulos() {
  // Tu código aquí
  //la , simboliza 'esto O esto O esto'
  return document.querySelectorAll('h2, h3, .subtitulo')?.length;
}

module.exports = {
  obtenerTextoPorId,
  obtenerHTMLPorClase,
  contarBotones,
  obtenerTextosNavegacion,
  contarProductosClase,
  obtenerIdProductoDestacado,
  obtenerCategoriasPorAtributo,
  obtenerPrimerosElementosLista,
  obtenerTituloHeader,
  contarTitulosYSubtitulos,
};

// ============================================
// Reto: Seleccionar elementos del DOM con JavaScript
// ============================================
// Completa cada función según las instrucciones.
// Ejecuta los tests con: npx vitest src/21-seleccionar-elementos-dom
// ============================================

// --- Reto 1: Seleccionar elemento por ID ---
// Usa getElementById para seleccionar el elemento con id "titulo-principal"
// y retorna su contenido de texto (textContent).
function obtenerTextoPorId(Id) {
  // Tu código aquí
  return document.getElementById(Id).textContent;
}

// --- Reto 2: Seleccionar elemento por clase con querySelector ---
// Usa querySelector para seleccionar el primer elemento con clase "producto"
// y retorna su contenido HTML (innerHTML).
function obtenerHTMLPorClase(className) {
    // El ?. evita que el código explote si el elemento no existe (devuelve undefined) 
  return document.querySelector(`.${className}`) ?.innerHTML || '';
}

// --- Reto 3: Seleccionar todos los elementos por etiqueta ---
// Usa getElementsByTagName para seleccionar todos los elementos <button>
// y retorna la cantidad de elementos encontrados.
function contarBotones(element) {
  // Tu código aquí
  //getElementByTagName devuelve una lista
  return document.getElementsByTagName(element).length
}

// --- Reto 4: Seleccionar múltiples elementos por clase ---
// Usa querySelectorAll para seleccionar todos los elementos con clase "nav-link"
// y retorna un array con los textContent de cada elemento.
function obtenerTextosNavegacion() {
  // Tu código aquí
  //capturar elementos: 
  // querySelectorAll devuelve un NodeList (no un Array)
  const elementos = document.querySelectorAll('.nav-link'); 
  //transformar los elementos. Necesito Array.from() para poder usar .map() y extraer datos
  return Array.from(elementos).map(el => el.textContent);
}
// --- Reto 5: Seleccionar elementos por clase clásica ---
// Usa getElementsByClassName para seleccionar todos los elementos con clase "producto"
// y retorna la cantidad de elementos encontrados.
function contarProductosClase() {
  // Tu código aquí
  return document.getElementsByClassName('producto').length;
}

// --- Reto 6: Selector combinado ---
// Usa querySelector para seleccionar el primer elemento que tenga
// clase "producto" y sea descendiente de un elemento con clase "destacados"
// y retorna su atributo id si existe, o null si no tiene.
function obtenerIdProductoDestacado() {
  // Tu código aquí
  return document.querySelector('.destacados .producto').id ?.id||null;
}

// --- Reto 7: Selector de atributo ---
// Usa querySelectorAll para seleccionar todos los elementos que tengan
// el atributo "data-categoria" y retorna un array con los valores de dicho atributo.
function obtenerCategoriasPorAtributo() {
  // Tu código aquí
  //se usa [] porque es el valor del atributo
  const elements= document.querySelectorAll('[data-categoria]');  //Los corchetes deben ir dentro de las comillas para que el navegador los interprete como una búsqueda de atributo.
    //getAttribute se usa aquí porque data-categoria es un atributo personalizado.
    //getAttribute es la forma universal y explícita de pedirle al navegador: "dame el valor que está escrito en esta etiqueta".
  return Array.from(elements).map(el => el.getAttribute('data-categoria'));
}

// --- Reto 8: Selector de pseudo-clase ---
// Usa querySelectorAll para seleccionar el primer elemento <li> de cada lista <ul>
// usando la pseudo-clase :first-child y retorna un array con sus textos.
function obtenerPrimerosElementosLista() {
  // Tu código aquí
  //La Regla del Selector: ¿Es un string? ¿Usa la sintaxis correcta (. para clase, # para ID, [] para atributo, espacio para descendiente)?
  const firstElement=document.querySelectorAll('ul li:first-child');
  //como es una lista, no puedo aplicar .textContent directo; necesito .map().
  return Array.from(firstElement).map(element=> element.textContent);
}

// --- Reto 9: Selector jerárquico ---
// Usa querySelector para seleccionar el elemento <h1> dentro del <header>
// y retorna su texto. Si no existe, retorna "No encontrado".
function obtenerTituloHeader() {
  // Tu código aquí
  return document.querySelector('header h1')?.textContent||'No encontrado';
}

// --- Reto 10: Selector múltiple ---
// Usa querySelectorAll para seleccionar todos los elementos que sean
// <h2>, <h3> o tengan clase "subtitulo" y retorna la cantidad total.
function contarTitulosYSubtitulos() {
  // Tu código aquí
  //la , simboliza 'esto O esto O esto'
  return document.querySelectorAll('h2, h3, .subtitulo')?.length;
}

module.exports = {
  obtenerTextoPorId,
  obtenerHTMLPorClase,
  contarBotones,
  obtenerTextosNavegacion,
  contarProductosClase,
  obtenerIdProductoDestacado,
  obtenerCategoriasPorAtributo,
  obtenerPrimerosElementosLista,
  obtenerTituloHeader,
  contarTitulosYSubtitulos,
};

Fundamentos Javascript

Primeras líneas de JavaScript en la consola del navegador

Construye un editor de notas Markdown con JavaScript

Configuración del entorno para JavaScript

Var, let y const: qué cambia en JavaScript

Tipos de datos en JavaScript: primitivos vs complejos

Operadores aritméticos en JavaScript

Template literals en JavaScript: sintaxis y uso práctico

Métodos esenciales de strings en JavaScript

Coerción de tipos en JavaScript explicada

Igualdad débil vs estricta en JavaScript

Operadores lógicos AND, OR y NOT en JavaScript

If, else y else if en JavaScript

Switch en JavaScript: cuándo y cómo usarlo

Bucles for, while y for...of en JavaScript

while en JavaScript: evita bucles infinitos

Funciones, Scope y Estructuras de Datos

Anatomía de funciones en JavaScript

Scope en JavaScript: global, función y bloque

Closures en JavaScript: estado privado en cuentas

Qué es un array y cómo funciona en JavaScript

Objetos en JavaScript: claves, acceso y optional chaining

Destructuración de objetos en JavaScript

Map y filter: manipula arreglos de objetos

find, filter y reduce: cuándo usar cada uno

Primeras funciones del sistema de notas

Avanzar en nuestro proyecto leyendo código ajeno

DOM y Experiencia en el Navegador