JavaScript

Document Object Model

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

Arbre DOM

L'API DOM permet de manipuler l'arbre correspondant
à une page HTML en JavaScript.

document.toString();
const element = document.getElementById("dom-1");
element.toString();
element.tagName;
element.attributes[0].name;
element.attributes[0].value;
element.children[0].tagName;
element.children[1].tagName;

Le document (racine), les éléments, les attributs des éléments, le texte à l'intérieur des éléments sont des nœuds de l'arbre.

Children

element.children renvoie les sous-éléments d'un élément HTML

const element = document.getElementById("dom-2");
element.tagName;
const child = element.children[0];
child.toString();
child.tagName;

API DOM

children renvoie des HTMLCollection mais
PAS des tableaux : on verra bientôt la différence.

const element = document.getElementById("dom-3");
const array = [...element.children];
console.log(element.children.toString());
console.log(element.children.length);
console.log(element.children[0].tagName);
console.log(array.forEach);

Mais on peut récupérer une collection dans un tableau grâce à l'opérateur spread.

Chercher des éléments

document.getElementById(id): renvoie un élément par son id
document.getElementsByClassName(classname): renvoie les éléments ayant la classe
document.querySelectorAll(css_selector): renvoie les éléments par un sélecteur CSS

const cs = document.getElementsByClassName("bad-container");
cs.length;
const dts = document.querySelectorAll("dl#dom4 dt");
dts.length;

document.getElementsByClassName renvoie une HTMLCollection
document.querySelectorAll renvoie une NodeList (c'est à peu près pareil).

Contenu textuel d'un élément

element.innerText: renvoie le contenu textuel d'un élément

const div2 = document.getElementById("dom-content");
div2.innerText = "<b>" + new Date() + "</b>";

On peut s'en servir pour modifier le contenu textuel de l'élément.

Caractéristiques d'un élément

element.id: renvoie l'ID d'un élément
element.classList: renvoie la liste des classes d'un élément
element.attributes: renvoie une liste des attributs d'un élément

const dom5 = document.getElementById("dom5");
dom5.classList.add("blue");
for(let i = 0; i < dom5.attributes.length; i++) {
  console.log(`${dom5.attributes[i].name}=${dom5.attributes[i].value}`);
}
// dom5.attributes[1].value = "red";

On ne peut pas réassigner ces listes, mais on peut modifier leurs éléments.

Ajouter de nouveaux éléments

document.createElement permet de créer un élément.
parent.appendChild(element) ajoute un élément.

const div = document.getElementById("dom-new");
for (let i = 0; i < 10; i++) {
  const element = document.createElement("div");
  element.id = `new-${i}`;
  if (i % 2 == 0) { element.classList.add("blue"); }
  div.appendChild(element);
}

Window.onload

La fonction window.onload sera appelée une fois la page entièrement chargée !


<head>
 <script>
  "use strict";
  window.onload = function() {
    const element = document.getElementById("paragraph");
    element.innerText = "J'ai réussi à changer le DOM.";
  };
  </script>
</head>
<body>
 <p id="paragraph">Je n'ai pas réussi à changer le DOM.</p>
</body>

Si le script tente d'accéder à un élément alors qu'il n'a pas encore été chargé, il échouera !