Què és el DOM?
El Document Object Model (DOM) és una interfície de programació per als documents HTML i XML. Representa la pàgina de manera que els programes poden canviar l'estructura del document, l'estil i el contingut. El DOM proporciona una representació estructurada del document i defineix com els programes poden accedir i manipular el document.
Conceptes Clau del DOM:
- Nodes: Cada element HTML és un node en l'arbre del DOM.
- Arbre del DOM: La representació jeràrquica del document HTML.
- Elements: Els nodes que representen etiquetes HTML.
- Atributs: Informació addicional sobre els elements HTML.
- Text: El contingut textual dins dels elements HTML.
Estructura de l'Arbre del DOM
L'arbre del DOM és una representació jeràrquica del document HTML. Cada node en l'arbre representa una part del document. Aquí tens un exemple d'un document HTML simple i la seva representació en l'arbre del DOM:
<!DOCTYPE html> <html> <head> <title>Exemple de DOM</title> </head> <body> <h1>Hola, món!</h1> <p>Aquest és un paràgraf.</p> </body> </html>
Representació de l'Arbre del DOM:
- Document - html - head - title - "Exemple de DOM" - body - h1 - "Hola, món!" - p - "Aquest és un paràgraf."
Accés i Manipulació del DOM amb JavaScript
JavaScript proporciona diverses maneres d'accedir i manipular els elements del DOM. Aquí tens alguns dels mètodes més comuns:
Selecció d'Elements
getElementById
: Selecciona un element pel seu ID.getElementsByClassName
: Selecciona elements per la seva classe.getElementsByTagName
: Selecciona elements pel seu nom d'etiqueta.querySelector
: Selecciona el primer element que coincideix amb un selector CSS.querySelectorAll
: Selecciona tots els elements que coincideixen amb un selector CSS.
Exemple Pràctic
Suposem que tenim el següent document HTML:
<!DOCTYPE html> <html> <head> <title>Manipulació del DOM</title> </head> <body> <h1 id="titol">Hola, món!</h1> <p class="text">Aquest és un paràgraf.</p> <p class="text">Aquest és un altre paràgraf.</p> </body> </html>
Podem accedir i manipular aquests elements amb JavaScript de la següent manera:
// Selecciona l'element pel seu ID var titol = document.getElementById('titol'); console.log(titol.textContent); // Output: Hola, món! // Selecciona elements per la seva classe var paragrafs = document.getElementsByClassName('text'); for (var i = 0; i < paragrafs.length; i++) { console.log(paragrafs[i].textContent); // Output: Aquest és un paràgraf. // Output: Aquest és un altre paràgraf. } // Selecciona elements pel seu nom d'etiqueta var h1Elements = document.getElementsByTagName('h1'); console.log(h1Elements[0].textContent); // Output: Hola, món! // Selecciona el primer element que coincideix amb un selector CSS var primerParagraf = document.querySelector('.text'); console.log(primerParagraf.textContent); // Output: Aquest és un paràgraf. // Selecciona tots els elements que coincideixen amb un selector CSS var totsElsParagrafs = document.querySelectorAll('.text'); totsElsParagrafs.forEach(function(paragraf) { console.log(paragraf.textContent); // Output: Aquest és un paràgraf. // Output: Aquest és un altre paràgraf. });
Exercicis Pràctics
Exercici 1: Canviar el Contingut d'un Element
- Crea un document HTML amb un element
<p>
que contingui el text "Text original". - Escriu un script JavaScript que canviï el text d'aquest element a "Text modificat".
Solució:
<!DOCTYPE html> <html> <head> <title>Exercici 1</title> </head> <body> <p id="paragraf">Text original</p> <script> var paragraf = document.getElementById('paragraf'); paragraf.textContent = 'Text modificat'; </script> </body> </html>
Exercici 2: Afegir un Nou Element
- Crea un document HTML amb un element
<div>
buit. - Escriu un script JavaScript que afegeixi un nou element
<p>
dins del<div>
amb el text "Nou paràgraf".
Solució:
<!DOCTYPE html> <html> <head> <title>Exercici 2</title> </head> <body> <div id="contenidor"></div> <script> var contenidor = document.getElementById('contenidor'); var nouParagraf = document.createElement('p'); nouParagraf.textContent = 'Nou paràgraf'; contenidor.appendChild(nouParagraf); </script> </body> </html>
Resum
En aquesta secció, hem après què és el DOM, com està estructurat i com podem accedir i manipular els elements del DOM utilitzant JavaScript. Hem vist exemples pràctics de com seleccionar elements i modificar el seu contingut, així com afegir nous elements al document. Aquestes habilitats són fonamentals per treballar amb JavaScript i crear aplicacions web dinàmiques. En la propera secció, explorarem com seleccionar i manipular elements del DOM amb més detall.
JavaScript: De Principiant a Avançat
Mòdul 1: Introducció a JavaScript
- Què és JavaScript?
- Configuració del Teu Entorn de Desenvolupament
- El Teu Primer Programa en JavaScript
- Sintaxi i Conceptes Bàsics de JavaScript
- Variables i Tipus de Dades
- Operadors Bàsics
Mòdul 2: Estructures de Control
- Declaracions Condicionals
- Bucles: for, while, do-while
- Declaracions Switch
- Gestió d'Errors amb try-catch
Mòdul 3: Funcions
- Definició i Crida de Funcions
- Expressions de Funció i Funcions Fletxa
- Paràmetres i Valors de Retorn
- Àmbit i Tancaments
- Funcions d'Ordre Superior
Mòdul 4: Objectes i Arrays
- Introducció als Objectes
- Mètodes d'Objecte i Paraula Clau 'this'
- Arrays: Conceptes Bàsics i Mètodes
- Iteració sobre Arrays
- Desestructuració d'Arrays
Mòdul 5: Objectes i Funcions Avançades
- Prototips i Herència
- Classes i Programació Orientada a Objectes
- Mòduls i Importació/Exportació
- JavaScript Asíncron: Callbacks
- Promeses i Async/Await
Mòdul 6: El Model d'Objectes del Document (DOM)
- Introducció al DOM
- Selecció i Manipulació d'Elements del DOM
- Gestió d'Esdeveniments
- Creació i Eliminació d'Elements del DOM
- Gestió i Validació de Formularis
Mòdul 7: APIs del Navegador i Temes Avançats
- Emmagatzematge Local i de Sessió
- Fetch API i AJAX
- WebSockets
- Service Workers i Aplicacions Web Progressives (PWAs)
- Introducció a WebAssembly
Mòdul 8: Proves i Depuració
- Depuració de JavaScript
- Proves Unitàries amb Jest
- Proves d'Integració
- Proves de Cap a Cap amb Cypress
Mòdul 9: Rendiment i Optimització
- Optimització del Rendiment de JavaScript
- Gestió de Memòria
- Manipulació Eficient del DOM
- Càrrega Per Mandat i Divisió de Codi
Mòdul 10: Frameworks i Llibreries de JavaScript
- Introducció a React
- Gestió d'Estat amb Redux
- Conceptes Bàsics de Vue.js
- Conceptes Bàsics d'Angular
- Triar el Framework Adequat