Skip to main content

El DOM i la Manipulació d'Elements HTML

El Document Object Model (DOM) és una interfície de programació que representa la pàgina web com una estructura jeràrquica de nodes. Gràcies al DOM, podem accedir, modificar, afegir i eliminar elements HTML mitjançant JavaScript.

Estructura del DOM​

Cada element HTML es representa com un node dins un arbre. El node arrel és <html>, amb fills com <head> i <body>, i així successivament.

Accés a Elements​

Mètodes de selecció​

document.getElementById("id");
document.getElementsByClassName("classe");
document.getElementsByTagName("etiqueta");
document.querySelector("selectorCSS");
document.querySelectorAll("selectorCSS");

Exemples​

const titol = document.getElementById("titol");
const inputs = document.querySelectorAll("input");

Activitats de selecció​

  1. Afegeix un ID a un <input> i imprimeix-lo amb getElementById()
  2. Selecciona l’element per classe i mostra’l per consola
  3. Fes servir getElementsByTagName() per seleccionar tots els inputs
  4. Usa querySelector() per accedir a un element per selector CSS
  5. Fes servir querySelectorAll() per obtenir diversos elements

Manipulació d'elements​

Propietats comunes​

element.textContent = "Hola món";
element.innerHTML = "<b>Hola</b>";
element.value = "nou valor";
element.src = "nova-imatge.jpg";

Activitats de manipulació​

  1. Fer visible una contrasenya i canviar el text del botó amb textContent i type
  2. Modificar el text d’un paràgraf
  3. Afegir un nou element a una llista amb innerHTML

innerHTML vs textContent​

PropietatFunció
textContentText pla (segur i ràpid)
innerHTMLPot contenir HTML (més potent però menys segur)

Estils en línia​

element.style.color = "red";
element.style.textAlign = "center";

Activitats amb estils​

  1. Canviar el color d’un <h1> segons un <input type="color">

Gestió de Classes​

element.classList.add("actiu");
element.classList.remove("actiu");
element.classList.toggle("actiu");
element.classList.replace("antiga", "nova");
element.classList.contains("visible"); // retorna true/false

Activitats amb classList​

  1. Afegeix una classe a un div
  2. Elimina la classe existent
  3. Canvia la classe per una altra
  4. Aplica toggle per afegir/eliminar una classe

Crear i eliminar elements​

const nou = document.createElement("div");
document.getElementById("contenidor").appendChild(nou);
// Eliminar
document.getElementById("element").remove(); // modern

Activitats​

  1. Afegir un element nou al DOM
  2. Eliminar un element amb remove() o removeChild()
element.childNodes;
element.children;
element.firstChild;
element.firstElementChild;
element.lastChild;
element.lastElementChild;
element.nextSibling;
element.nextElementSibling;
element.previousSibling;
element.previousElementSibling;
element.parentNode;

Activitats amb navegació​

  1. Elimina el primer fill d’un node
  2. Elimina l’últim fill d’un node
  3. Ressalta el següent element abans d’eliminar l’actual
  4. Ressalta el fill anterior abans d’eliminar el final
  5. Mostra el pare d’un node

Aquest capítol és essencial per comprendre com interactuar dinàmicament amb una pàgina HTML utilitzant JavaScript. El DOM et permet controlar tota la interfície i respondre a accions de l’usuari!