La pàgina parla: DOM

⚠ Important

En aquesta part del curs el simulador NO pot aturar automàticament un bucle infinit. Si el teu programa es queda penjat (la pàgina no respon), tanca la pestanya i torna-la a obrir. Revisa sempre que els teus bucles tinguin una condició de sortida abans d'executar.

Què és el DOM

Una pàgina web és un document HTML: una col·lecció d'elements (títols, paràgrafs, botons…) organitzats en forma d'arbre. JavaScript veu aquesta estructura com un objecte gegant anomenat DOM (Document Object Model). A través del DOM, pots:

• Llegir el contingut de qualsevol element.
• Modificar el text, els colors, l'estil…
• Afegir i eliminar elements.

L'objecte central és document. És com el Math que vam veure abans: no l'has de declarar, ja existeix. T'hi pots referir des de qualsevol part del codi.

Buscar un element: document.querySelector

Per fer alguna cosa amb un element de la pàgina, primer cal trobar-lo. La funció més potent és document.querySelector("selector"). El selector és el mateix que faries servir en CSS:

• "h1" — el primer element <h1> de la pàgina.
• "p" — el primer paràgraf.
• "#titol" — l'element amb id="titol".
• ".destacat" — el primer element amb class="destacat".

El simulador següent té la pàgina:

<h1>Hola, món!</h1>
<p>Aquesta és la meva pàgina.</p>

Executa i veuràs que querySelector retorna un objecte que representa l'element trobat:

Llegir i canviar el text: .textContent

Quan tens un element, la propietat .textContent et dona el text de dins. Pots llegir-lo:

O pots canviar-lo, assignant un nou valor. Observa la pàgina viva quan executis:

El text del <h1> ha canviat a la pàgina viva. Aquest és el moment màgic: JavaScript ha modificat HTML que ja era a la pantalla.

Canviar l'estil: .style

Cada element té una propietat .style que et permet modificar el seu CSS directament. Els noms de les propietats CSS amb guió (com background-color o font-size) es transformen en camelCase: backgroundColor, fontSize.

Els valors són sempre strings, exactament com els escriuries en CSS. Per a mides cal escriure les unitats: "48px", no 48.

Algunes propietats útils:

• .style.color — color del text
• .style.backgroundColor — color de fons
• .style.fontSize — mida de lletra ("24px")
• .style.fontWeight — gruix ("bold")
• .style.textAlign — alineació ("center")
• .style.border — vora ("2px solid black")
• .style.padding — espaiat intern

Tots a l'hora: querySelectorAll

querySelector retorna només el primer element que troba. Si vols tots els elements que coincideixen, fas servir querySelectorAll, que retorna una col·lecció que pots recórrer amb un bucle:

Tots els <li> han canviat alhora. Aquest és un patró molt habitual: trobar molts elements i fer-los alguna cosa a tots.

Una alternativa: getElementById

Hi ha una altra forma de trobar un element, especialment quan tens un id únic: document.getElementById("nom-id"). És equivalent a document.querySelector("#nom-id"), però sense necessitat del #:

Es coneix també com a "getElementById" i és potser la forma més antiga i ràpida. querySelector és més modern i flexible (admet qualsevol selector CSS), però getElementById encara s'usa molt.

.textContent vs .innerHTML

A part de .textContent, hi ha una altra propietat anomenada .innerHTML. La diferència és important:

• .textContent — només text. Si poses "<b>hola</b>", es mostra exactament així, amb les etiquetes visibles.
• .innerHTML — interpreta HTML. Si poses "<b>hola</b>", l'etiqueta es renderitza i es veu "hola" en negreta.

Per defecte, fes servir sempre .textContent. .innerHTML només quan vulguis afegir HTML real (com fer una llista) i estiguis segur que el text no ve de l'usuari (per evitar problemes de seguretat).

Errors típics

1. Buscar un element que no existeix — querySelector retorna null si no troba res. Si intentes accedir a una propietat de null, el codi peta:

L'error és TypeError: Cannot set properties of null. Sempre comprova el resultat si no estàs segur que l'element existeixi.

2. Confondre style amb noms CSS amb guió — recorda que els noms van en camelCase, no com al CSS:

// CSS:
background-color: red;
font-size: 24px;

// JavaScript:
element.style.backgroundColor = "red";   // ✓
element.style.fontSize = "24px";          // ✓

// Això NO funciona:
element.style.background-color = "red";   // ✗ ERROR
element.style["background-color"] = "red"; // ✓ (alternativa amb claudàtors)

3. Oblidar les unitats — moltes propietats CSS necessiten unitats explícites (px, em, %):

La consola mostra que fontSize ha quedat com a string buit: el navegador ha ignorat l'assignació. Has d'escriure "48px".

Resum

• El DOM és la representació de la pàgina HTML com a objecte JavaScript. L'objecte principal és document.
• document.querySelector("selector") troba el primer element. El selector és sintaxi CSS: "h1", "#id", ".classe".
• document.querySelectorAll("selector") en retorna tots, en una col·lecció que pots recórrer.
• document.getElementById("id") és una alternativa més directa per a ids únics.
• element.textContent llegeix o canvia el text de l'element.
• element.innerHTML permet canviar HTML real, però vés amb compte.
• element.style.X modifica el CSS. Els noms van en camelCase: backgroundColor, no background-color.
• Si l'element no existeix, querySelector retorna null — comprova abans d'accedir a propietats.