¿Qué es JavaScript? — JavaScript es un lenguaje de programación de alto nivel, interpretado y dinámico. Es el lenguaje nativo de la web, ejecutado directamente por los navegadores sin necesidad de compilación. Permite crear contenido dinámico, controlar multimedia, animaciones y mucho más. Junto con HTML y CSS, es una de las tres tecnologías fundamentales de la World Wide Web.
<!DOCTYPE html><html><head><title>Artean</title></head><body><h1>Bolsa de empleo de Cuatrovientos</h1><p>Queremos dar la bienvenida....</p></body></html>
ulid="categories"
├─ li → "DAW"
├─ li → "DAW"
└─ li → "DAW"
Selectores por ID y clase
CSS
JavaScript Moderno
.offers {..}
document.querySelectorAll(".offers")
#container {..}
document.querySelector("#container")
p {..}
document.querySelectorAll("p")
Buscando por ID
¿Cómo seleccionamos específicamente el <ul> que tiene un ID "categories"?
document.querySelector("#categories");
Selector por ID en el DOM
body
├─ h1 → "Artean"
├─ h2 → "Primer empleo"
├─ p → "Categorías."
└─ ulid="categories" ← seleccionado
├─ li → "Asir"
├─ li → "Dam"
└─ liclass="medio" → "MicroInfo"
Buscando por clase
¿Cómo seleccionamos únicamente el <li> que tiene la clase "medio"?
document.querySelectorAll(".medio");
Selector por clase en el DOM
body
├─ h1 → "Artean"
├─ h2 → "Primer empleo"
├─ p → "Categorías."
└─ ulid="categories"
├─ li → "Asir"
├─ li → "Dam"
└─ liclass="medio" → "MicroInfo" ← seleccionado
Buscando en el DOM
Desarrollo de Interfaces Web
Selector descendiente
¿Cómo encontrar los <li> dentro de la <ul> con ID "categories"?
document.querySelectorAll("#categories li");
El espacio importa:#categories li selecciona todos los li descendientes.
Selector descendiente en el DOM
body
├─ h1 → "Artean"
├─ h2 → "Primer empleo"
└─ ulid="categories"
├─ li → "Asir"
├─ li → "Dam"
└─ li → "MicroInfo"
document.querySelectorAll(
"#categories li"
);
Selector descendiente — Sub-listas
document.querySelectorAll("#categories li");
Selecciona TODOS los li descendientes, incluyendo los de sub-listas anidadas.
Problema: demasiados descendientes
ulid="categories"
├─ li → "Asir" ← seleccionado
├─ li ← seleccionado (no queremos)
│ └─ ulid="desarrollo"
│ └─ li → "Dam" ← NO queremos este
└─ li → "MicroInfo" ← seleccionado
Selector hijo (directo)
¿Cómo encontrar solo los <li> hijos directos de "categories"?
document.querySelectorAll("#categories > li");
El símbolo > importa: Solo selecciona hijos directos, no todos los descendientes.
Selector hijo en el DOM
ulid="categories"
├─ li → "Asir" ← seleccionado (hijo directo)
├─ li ← seleccionado (hijo directo)
│ └─ ulid="desarrollo"
│ └─ li → "Dam" ← NO seleccionado
└─ li → "MicroInfo" ← seleccionado (hijo directo)
Selector múltiple
¿Cómo encontrar elementos con clase "medio" O ID "desarrollo"?
document.querySelectorAll(".medio, #desarrollo");
La coma importa: Permite combinar múltiples selectores.
Selector múltiple en el DOM
ulid="categories"
├─ li → "Asir"
├─ li
│ └─ ulid="desarrollo" ← seleccionado
│ └─ li → "Dam"
└─ liclass="medio" → "MicroInfo" ← seleccionado
Si empezamos seleccionando un elemento hijo, ¿podemos saber qué elemento es su padre?
document.querySelector("li").parentElement;
Obteniendo el padre
document.querySelector("li").parentElement;
body
├─ h1 → "Artean"
├─ h2 → "Primer empleo"
└─ ulid="categories" ← parent
├─ li → "Asir" ← hijo seleccionado
├─ li → "Dam"
└─ li → "MicroInfo"
Transversal hacia abajo — .children
Con un padre que tiene muchos hijos con sus propios hijos, ¿cómo encontrar solo la primera generación?
document.querySelector("#categories").children;
// Retorna solo hijos directos (HTMLCollection)
.children vs .querySelectorAll
// .children — solo hijos directos
document.getElementById("categories").children;
// .querySelectorAll — todos los descendientes
document.querySelectorAll("#categories li");
children solo selecciona hijos directos, a diferencia de querySelectorAll que busca todos los descendientes.
// Filtro ondemand
document.querySelector('#filters').addEventListener('click', (e) => {
if (e.target.classList.contains('ondemand-filter')) {
document.querySelectorAll('.offer.ondemand')
.forEach(el => el.classList.add('highlighted'));
}
});
// Filtro expiring — mismo patrón
if (e.target.classList.contains('expiring-filter')) {
document.querySelectorAll('.offer.expiring')
.forEach(el => el.classList.add('highlighted'));
}
¿Cómo no resaltar todas las ofertas?
Necesitamos eliminar la clase highlighted antes de volver a asignarla.
Solución: Eliminar antes de reasignar
document.querySelector('#filters').addEventListener('click', (e) => {
if (e.target.classList.contains('ondemand-filter')) {
// Primero eliminar de todos
document.querySelectorAll('.highlighted')
.forEach(el => el.classList.remove('highlighted'));
// Luego añadir a los filtrados
document.querySelectorAll('.offer.ondemand')
.forEach(el => el.classList.add('highlighted'));
}
});
Resultado — Solo se resalta la oferta seleccionada
Al hacer click en un filtro, se elimina el resaltado anterior y se aplica solo a las ofertas que cumplen la condición.
Resumen: JavaScript moderno nativo puede hacer todo lo necesario, sin dependencias externas.
