1. Javascript
  2. DOM

DOM

Références :

 

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.

Représentation générique du DOM

Représentation historique du DOM

Un exemple de construction du DOM par un navigateur à partir d'un fichier HTML

dom

Il existe de nombreuses méthodes js pour accéder et modifier le DOM. Vous trouverez ci-dessous une sélection des propriétés indispensables à connaître par coeur :

Accéder à un élément en utilisant son identité

const element = document.getElementById("id-de-l-element-html");

Supprimer un élément du DOM

element.remove();

Créer un élément du DOM (ici une section)

const section = document.createElement("section");

Ajouter un élément à l'arbre du document (DOM), ici le body

window.document.body.appendChild(section);

Ajouter du texte à un élément du dom (section par exemple)

section.innerText = "Texte à ajouter";

Ajouter un attribut (ici l'identité "news à l'élement stocké dans la const section)

section.setAttribute("id","news");

Récupérer la valeur d'un attribut 

section.getAttribute("id");

Héritage des éléments du DOM

Imaginons que votre page html contienne un balise h2 ayant pour valeur de l'attribut id "h2". Pour récupérer une référence à cet élément du dom, vous pouvez vous y prendre comme ceci :

let h2 = document.getElementById("h2");

Si vous êtes curieux, vous pouvez chercher à savoir de quel classe est issu cet élément :

console.log("class de h2 : ", h2.constructor.name);// affiche class de h2 : HTMLHeadingElement

Si vous êtes très curieux, vous pouvez remonter la chaîne des prototypes pour savoir exactement de qui h2 hérite :

while (h2) {
  console.log("class de h2 : ", h2.constructor.name);
  // Remonte la chaîne des prototypes
  h2 = Object.getPrototypeOf(h2);
}

En vérifiant dans la documentation de Mozzilla, vous pouvez en apprende plus sur chacune des interfaces dont héritent les éléments du DOM :

L'interface HTMLHeadingElement représente les différents éléments d'en-tête <h1> à <h6>. Elle hérite des méthodes et des propriétés de l'interface HTMLElement.

EventTarget Node Element HTMLElement HTMLHeadingElement

Sélection avancée des éléments du DOM

document.querySelector(".open-close > h2"); permet de récupérer le premier élément du DOM qui correspond au sélecteur passé en paramètre

document.querySelectorAll(".open-close > h2"); permet de récupérer un tableau d'éléments qui correspondent au sélecteur passé en paramètre

elt.nextElementSibling : permet de récupérer l'élément suivant l'élément elt

Exercice 1

Retrouvez à quelle interface du DOM appartiennent les propriétés suivantes :

  • innerText
  • focus
  • insertBefore
  • innerHTML
  • classList
  • addEventListener

Profitez-en pour les retenir, elles vous serviront dans votre vie de développeur front-end !

Exercice 2

Créer en js une balise "nav" qui contient 4 boutons avec les textes "Item 1", "Item 2", "Item 3", Item 4". Placez cet élément du dom dans le header.

Faites en sorte que le premier item soit de couleur rouge (utilisez querySelector puis la propriété "style.color").

Utilisez pour cela uniquement du javascript. Ré-utilisez la fonction createMarkup dont voici le code :

/**
   * Crée un élément du dom, lui ajoute du texte, le place comme dernier
   * enfant de parent et ajoute un attribut en utilisant le paramètre attributes
   * @param {String} markup_name 
   * @param {String} text 
   * @param {domElement} parent 
   * @param {Object} attributes
   * @returns domElement
   */
function createMarkup(markupname, text, parent, attributes = {}) {
  const markup = document.createElement(markupname);
  markup.textContent = text;
  parent.appendChild(markup);
  for (let key in attributes) {
   markup.setAttribute(key, attributes[key]);
  }
  return markup;
}

Exercice 3

Améliorez la fonction createMarkup de façon à ce que l'on puisse ajouter plusieurs attributs. Le paramètre attribute sera remplacé par "attributes" et ne sera plus de type "Objet" mais de type "Array".

Pour finir, faites en sorte que cette fonction n'attende qu'un seul paramètre de type "Object"

 

Exercice 4

Le but de cet exercice est de créer un simple diaporama qui permet de faire défiler des images.

Voici comment agencer votre code :

  • Créer une classe Slideshow
  • le constructeur de cette classe attend 4 paramètres :
    • nb_images (le nombre d'images que va gérer le slideshow,
    • width (la largeur du slideshow),
    • height (la hauteur du slideshow),
    • speed (la vitesse de changement d'images en millisecondes).
  • Dans le constructeur, vous initialisez 5 propriétés :
    • nb_images (number)
    • images (array)
    • width (number)
    • height (number)
    • speed (number)
  • puis, toujours dans le constructeur, vous faites appel à trois méthodes

    • feedSs (// remplissage du tableau d'images "images")
      Pour créer des images (élément du DOM "img"), vous utiliserez la méthode suivante :

      createImage = function() {
	  // création d'une image
	  const img = document.createElement("img");
	  img.setAttribute("src",`https://picsum.photos/${this.width}/${this.height}?id=${Math.random()*1000}`);
	  return img;
}

    • render (rendu du slideshow)

    • animateSs(animation du slideshow)

  • Pour l'animation, vous serez amené à utiliser soit setTimeout soit setInterval