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:

  1. Nodes: Cada element HTML és un node en l'arbre del DOM.
  2. Arbre del DOM: La representació jeràrquica del document HTML.
  3. Elements: Els nodes que representen etiquetes HTML.
  4. Atributs: Informació addicional sobre els elements HTML.
  5. 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

  1. getElementById: Selecciona un element pel seu ID.
  2. getElementsByClassName: Selecciona elements per la seva classe.
  3. getElementsByTagName: Selecciona elements pel seu nom d'etiqueta.
  4. querySelector: Selecciona el primer element que coincideix amb un selector CSS.
  5. 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

  1. Crea un document HTML amb un element <p> que contingui el text "Text original".
  2. 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

  1. Crea un document HTML amb un element <div> buit.
  2. 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

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

© Copyright 2024. Tots els drets reservats