Sanfeliu
  1. Apunts
  2. JavaScript
  3. Lliçó 10 de 14

El DOM i la manipulació d'elements HTML

El DOM des de JavaScript: seleccionar elements, canviar-ne el text i l’HTML, estils i classes amb classList, crear i eliminar nodes i recórrer l’arbre.

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

Propietat Funció
textContent Text pla (segur i ràpid)
innerHTML Pot 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!