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.
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?
// Documento completo document // Secciones principales document.head document.body
¿Cómo validar visualmente elementos en el inspector?
¿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?
// 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"
const destacados = document.querySelectorAll('.producto') // destacados[0] -> audífonos nova // destacados[1] -> mouse // destacados[2] -> teclado
Claves de aprendizaje:
¿Qué métodos clásicos ayudan a obtener colecciones?
document.getElementById('btnComprar') // Botón "Ver ofertas"
document.getElementsByClassName('nav-link')
document.getElementsByTagName('button')
Diferencias prácticas:
Aplicaciones inmediatas:
Si te surgen dudas al practicar con la consola o quieres compartir un truco con selectores, deja tu comentario y continuamos la conversación.
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.
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.
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.
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.
// Documento completo
document
// Secciones principales
document.head
document.body
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.
// 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"
const destacados = document.querySelectorAll('.producto')
// destacados[0] -> audífonos nova
// destacados[1] -> mouse
// destacados[2] -> teclado
Claves de aprendizaje:
document.getElementById('btnComprar') // Botón "Ver ofertas"
document.getElementsByClassName('nav-link')
document.getElementsByTagName('button')
Diferencias prácticas:
Aplicaciones inmediatas:
Si te surgen dudas al practicar con la consola o quieres compartir un truco con selectores, deja tu comentario y continuamos la conversación.
Resumen:
getElementById() → por id → devuelve 1 elemento
getElementsByClassName() → por clase → devuelve HTMLCollection
getElementsByTagName() → por etiqueta → devuelve HTMLCollection
querySelector()→ selector CSS → devuelve 1 elemento
querySelectorAll() → selector CSS → devuelve NodeList
Tip: querySelector() y querySelectorAll() son muy usados hoy en día porque permiten usar selectores CSS como .clase, #id, div p, etc.
Comparto los retos que vi en 21-seleccionar-elementos-dom
// ============================================
// 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,
};
donde esta la sección de recursos? @Profe
Mi solución al reto:
// ============================================
// 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() {
// Tu código aquí
let elemento = document.getElementById("titulo-principal");
return elemento.textContent;
}
console.log(obtenerTextoPorId());
// --- 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() {
// Tu código aquí
let elemento = document.querySelector('.producto');
return elemento.textContent;
}
console.log(obtenerHTMLPorClase());
// --- 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() {
// Tu código aquí
let elemento = document.getElementsByTagName('button');
return elemento
}
console.log(contarBotones());
// --- 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() {
let elementos = document.querySelectorAll('.nav-link');
let textos = Array.from(elementos).map((elemento) => {
return elemento.textContent;
});
return textos;
}
console.log(obtenerTextosNavegacion());
// --- 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í
let elementos = document.getElementsByClassName("producto");
return elementos.length;
}
console.log(contarProductosClase());
// --- 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í
let elemento = document.querySelector(".destacados .producto");
if (elemento && elemento.id) {
return elemento.id
} else
return null
}
console.log(obtenerIdProductoDestacado());
// --- 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í
let elementos = document.querySelectorAll("[data-sku]");
let skus = Array.from(elementos).map((elemento) => {
return elemento.getAttribute("data-sku");
});
return skus;
}
console.log(obtenerCategoriasPorAtributo());
// --- 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í
let elementos = document.querySelectorAll("ul li:first-child");
let textos = Array.from(elementos).map((elemento) => {
return elemento.textContent;
})
return textos;
}
console.log(obtenerPrimerosElementosLista());
// --- 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í
let elemento = document.querySelector("header h1");
if (elemento) {
return elemento.textContent
} else
return "Elemento no encontrado"
}
console.log(obtenerTituloHeader());
// --- 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í
let elementos = document.querySelectorAll("h2, h3, .subtitulo");
return elementos.length;
}
console.log(contarTitulosYSubtitulos());
module.exports = {
obtenerTextoPorId,
obtenerHTMLPorClase,
contarBotones,
obtenerTextosNavegacion,
contarProductosClase,
obtenerIdProductoDestacado,
obtenerCategoriasPorAtributo,
obtenerPrimerosElementosLista,
obtenerTituloHeader,
contarTitulosYSubtitulos,
};