SHANUKI JS · JavaScript y el DOM — Parte 1: Fundamentos · Ciencias de la Computación

Todo en una página es un árbol

El navegador no ve tu HTML como texto: lo convierte en una estructura de nodos conectados entre sí, el DOM, que JavaScript puede leer y modificar. Entender esa estructura es el primer paso para todo lo que sigue.

📘 Este es el Recurso 1 de 2 sobre JavaScript y el DOM: acá vemos los fundamentos (el DOM, seleccionar, leer y escribir contenido, crear elementos). El Recurso 2 sigue con eventos, condicionales y la función de corrección automática que vas a necesitar para tu actividad de Sprint 3.

🧠 Todo es un árbol

Cuando el navegador carga una página, la convierte en una estructura de nodos llamada DOM (Document Object Model). Cada etiqueta se transforma en un objeto con el que JavaScript puede hablar: leerlo, cambiarlo, borrarlo o crear otros nuevos.

Esa estructura tiene forma de árbol genealógico: hay un nodo raíz (<html>), que tiene hijos (<head> y <body>), esos hijos tienen sus propios hijos, y así sucesivamente.

🐍 Como en Python: trabajas todo el tiempo con estructuras anidadas (una lista de diccionarios, un diccionario dentro de otro). El DOM es la misma idea aplicada a una página web: en vez de datos["clave"]["otra"], tienes etiquetas anidadas dentro de etiquetas. La diferencia es que el DOM ya viene armado por el navegador a partir de tu HTML.

<html>

<head>

<body>

<h1>

<main>

<h2>

<p>

<aside>

Toca cualquier etiqueta del árbol para ver su información acá (de qué se trata, cuál es su padre, cuántos hijos directos tiene).

🧩 Padres, hijos y hermanos

Un nodo puede tener un padre (el que lo contiene directamente), varios hijos (los que están directamente dentro de él) y hermanos (nodos que comparten el mismo padre).

Estas palabras no son solo vocabulario: JavaScript tiene propiedades que usan exactamente estos nombres, como elemento.parentElement y elemento.children, que vas a usar todo el tiempo para moverte por la página.

🌳 <body> es padre de <header>, <main> y <footer> — y esos tres son hermanos entre sí, porque comparten el mismo padre.

🧩 ¿Lo entendiste? · Repaso rápido

Elegir elementos con selectores CSS

Antes de poder cambiar algo en la página, tienes que poder encontrarlo. querySelector y querySelectorAll son las herramientas para eso, usando los mismos selectores que ya conoces de CSS.

🔎 querySelector y querySelectorAll

document.querySelector("selector") busca en toda la página y devuelve el primer elemento que coincide con ese selector CSS (por clase, por id, por etiqueta). Si no encuentra nada, devuelve null.

document.querySelectorAll("selector") devuelve todos los que coinciden, como una lista que puedes recorrer con forEach.

🐍 Como en Python: no hay selectores CSS en Python, pero "buscar el elemento que cumple una condición" sí lo conoces: es como una comprensión de listas con un if. querySelector es pedir "el primero que cumple esto"; querySelectorAll es como [x for x in lista if condición].

const primero = document.querySelector('.fruta');
const todas = document.querySelectorAll('.fruta');

// todas es recorrible con forEach
todas.forEach(function (el) {
  console.log(el.textContent);
});

🧩 ¿Lo entendiste? · Completa el código

Completar espacios

Completa con el método correcto en cada espacio.

document.('#resultado');
document.('.fruta');

✅ La pseudo-clase :checked

Los selectores CSS también incluyen pseudo-clases, como :checked, que selecciona checkboxes o radios marcados en este momento. Por ejemplo document.querySelectorAll(".gusta:checked") devuelve solo los checkboxes con clase "gusta" que estén tildados.

Practica abajo: vas a combinar querySelector para leer texto y :checked para contar cuántos checkboxes están marcados.

JS script.js

Leer, escribir y decorar contenido

Una vez que encontraste un elemento, ¿qué puedes hacer con él? Leerlo o cambiarlo (textContent, innerHTML) y cambiar su apariencia con clases (classList).

📝 textContent vs innerHTML

elemento.textContent lee o escribe el texto plano de un elemento. Si le asignas etiquetas HTML, NO se interpretan: aparecen tal cual, como texto.

elemento.innerHTML lee o escribe interpretando el HTML: si le asignas "<strong>hola</strong>", el navegador va a mostrar "hola" en negrita de verdad.

⚠️ Si el texto que insertas con innerHTML viene de otra persona (algo que escribió un usuario) y no lo revisaste, podría meter una etiqueta <script> peligrosa. Regla: texto plano → textContent; HTML que tú controlas → innerHTML.

conTexto.textContent = "<b>hola</b>"

conHtml.innerHTML = "<b>hola</b>"

hola

🧩 ¿Lo entendiste? · Practica

JS script.js

🎨 classList: add y remove

Cada elemento tiene una propiedad classList para manejar sus clases CSS. Los métodos más usados: classList.add("clase") y classList.remove("clase").

Esta es la técnica central para dar feedback visual: agregar la clase correcto (verde) o incorrecto (roja) según el resultado de una acción — exactamente lo que vas a usar para corregir actividades en el Recurso 2.

🐍 Como en Python: piensa en classList como un set de etiquetas. .add() y .remove() se llaman igual que en los sets de Python y hacen lo mismo.

caja.classList.add('correcto');
caja.classList.remove('incorrecto');

caja.classList.toggle('activa'); // la agrega si no está, la saca si está
caja.classList.contains('correcto'); // true o false

🧩 ¿Lo entendiste? · Practica

JS script.js

Crear elementos y armar texto

Hasta ahora trabajaste con elementos que ya existían. Ahora vas a crear elementos nuevos desde código, y a armar los textos que les pones adentro de una forma más prolija.

🧱 createElement, appendChild y remove

document.createElement("li") crea un elemento nuevo en memoria (todavía no se ve en la página). Le puedes poner texto con textContent antes de mostrarlo.

padre.appendChild(elemento) lo agrega como último hijo de "padre", y ahí aparece en pantalla. elemento.remove() lo saca del DOM directamente.

🐍 Como en Python: createElement es armar un objeto nuevo (todavía no está en ninguna lista); appendChild es como lista.append(objeto); .remove() es sacar un elemento de la lista. Acá la "lista" es visual: es la página misma.

const nuevo = document.createElement('li');
nuevo.textContent = 'Nueva tarea';
lista.appendChild(nuevo);

tareaVieja.remove();

🧩 ¿Lo entendiste? · Practica

JS script.js

🧩 Template literals (backticks)

Un template literal se escribe con comillas invertidas (`) en vez de comillas simples o dobles. Dentro, insertas el valor de una variable con ${variable}.

También puedes poner expresiones dentro de ${ }, no solo variables sueltas: por ejemplo `Doble: ${puntos * 2}`.

🐍 Como en Python: son el equivalente casi exacto de los f-strings. Donde en Python escribirías f"Hola {nombre}", en JS escribes `Hola ${nombre}` — mismo concepto, distinta letra inicial.

Con +	Con template literal
`"Hola " + nombre + "!"`	`Hola ${nombre}!`
`"Puntos: " + (p*2)`	`Puntos: ${p * 2}`

🧩 ¿Lo entendiste? · Practica

JS script.js

Práctica integrada

Una misión chica que combina todo lo de este recurso: seleccionar, leer/escribir contenido, clases y crear elementos con template literals.

🎯 Misión: tarjeta de perfil interactiva

Tienes una tarjeta de estudiante con un botón para agregar una habilidad y un botón para marcarla como favorita. Completa el código para que funcione de punta a punta.

Leer el nombre y el puntaje con querySelector y armar el saludo con un template literal.
Agregar una nueva habilidad a la lista con createElement + appendChild.
Marcar la tarjeta como favorita con classList cuando se hace clic en la estrella.

JS script.js

Glosario

Todos los términos de este recurso, para repasar. Toca una tarjeta para girarla y ver la definición.

🔍