Aller au contenu

Langage avancé DOM

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une représentation structurée du document et une manière d’accéder à cette structure. Cela permet notamment :

  • de parcourir cet arbre (cibler un élément, les enfants/parents, etc.)
  • de modifier la structure du document (ajouter, enlever, déplacer des éléments)
  • d’accéder au informations des nœuds (contenu, attribut, etc.)
  • d’ajouter des événements (interactions utilisateur)
  • de modifier les styles CSS d’un élément
  • etc.

Cela se fait grâce aux attributs et méthodes d’objets de différents éléments.

L’objet document#

L’objet global document est l’objet principal d’un document HTML. Il contient les méthodes de ciblage d’éléments :

  • document.getElementById(id) cible l'élément par son id
  • document.querySelector(selecteur) cible le premier élément qui correspond au sélecteur CSS
  • document.querySelectorAll(selecteur) cible tous les éléments qui correspondent au sélecteur CSS
// Cible l'élément avec l’id menu
let menu = document.getElementById('menu');

// Cible le premier paragraphe de la page
let texte = document.querySelector('p');

// Cible tous les liens de la div id=menu
let liens = document.querySelectorAll('#menu a');

Mais également une méthode de création d’objet DOM :

  • document.createElement('str') crée un nouveau noeud DOM (str est une chaîne de caractère représentant le type d'élément HTML souhaité)
// Crée une nouvelle <div> en mémoire (pas encore insérée dans la page)
let monElement = document.createElement('div');

Enfin, les éléments de base de la page peuvent être ciblés plus facilement :

  • document.documentElement est l'élément principal du document (html)
  • document.head est l'élément head
  • document.body est l'élément body

Liste complète des attributs et méthodes de document

Les éléments#

Voici quelques attributs et méthodes applicables aux éléments d’une page HTML, qu’ils soient créés en JS ou déjà présents dans la page :

Attributs#

  • monElement.id retourne (ou définit) l’identifiant d’un élément
  • monElement.classList est une interface pour ajouter/modifier/connaitre les classes sur un élément :
    • monElement.classList.add('maClasse')
    • monElement.classList.remove('maClasse')
    • monElement.classList.toggle('maClasse')
    • monElement.classList.contains('maClasse')
  • monElement.setAttribute(attr, value) définit la valeur de l’attribut spécifié
  • monElement.removeAttribute(attr) supprime l’attribut spécifié
  • monElement.getAttribute(attr) retourne la valeur de l’attribut spécifié

Parcours DOM#

  • monElement.children retourne tous les enfants d’un élément (un tableau d’éléments)
  • monElement.parentNode retourne l’élément parent d’un élément

Modification DOM#

  • monElement.innerText retourne (ou définit) le contenu textuel
  • monElement.innerHTML retourne (ou définit) le contenu HTML (attention à la sécurité)
  • monElement.value retourne la valeur d’un champ de formulaire (<textarea>, <input>, etc.)
// récupère le contenu texte
let texte = monElement.innerText;

// définit un nouveau contenu
monElement.innerText = 'Nouveau contenu';
monElement.innerHTML = '<p>Hello</p>';
  • monElement.appendChild(element) ajoute un nœud enfant à la fin
  • monElement.removeChild(element) supprime un nœud
  • monElement.insertBefore(elementAInserer, elementCible) insère le nœud a insérer juste avant l’élément cible, dans le nœud courant

Mise en forme#

  • monElement.style est l’objet pour modifier les styles CSS
// changer le couleur d’un élément
monElement.style.color = 'red';

Liste complète des attributs et méthodes des éléments

Exercice - Manipulations simples du DOM#

  • dans une page HTML (vous pouvez utiliser la page today.php)

    • créez un paragraphe contenant le texte "00:00:00"

  • au chargement, en JS

    • générez l’heure au format HH:MM:SS (avec new Date().toLocaleTimeString('fr'))
    • modifiez le texte du paragraphe avec l’heure

  • faites en sorte que l’heure se mette à jour automatiquement toutes les secondes (avec setTimeout())

  • affichez l’heure en rouge et en gras (en CSS) si les secondes sont multiples de 10 (15:52:00, 15:52:10, etc.)

Les évènements#

Les évènements permettent notamment d’interagir avec l’internaute. Il est possible d’effectuer des actions, comme :

  • récupérer le mouvement de la souris, ou le click
  • intercepter les touches du clavier
  • détecter la validation d’un formulaire
  • etc.

Pour cela, il nous faut «écouter» l’évènement de notre choix :

  • monElement.addEventListener(type, listener) ajoute un gestionnaire d’évènements de type type. La fonction listener sera exécutée dès que l’évènement se déclenchera (l’évènement peut être passé en paramètre).

Voici quelques types d’évènements :

  • click, mousedown, mouseup, mousemove, mouseover, mouseout, load, submit, scroll ou wheel, keydown, keyup, keypress, input, change

Affiche en console lors du click sur un élément

let monElement = document.getElementById("toto"); // cible #toto
monElement.addEventListener("click", function(){
    console.log("L'événement click a été déclenché");
});

Exercice - Manipulations simples du DOM (suite)#

  • créez un bouton HTML (balise <button>Switch timezone</button>)
  • ajoutez un événement, et lors du click :
    • récupérez une timezone aléatoire avec Intl.supportedValuesOf('timeZone')
      • vous aurez encore besoin de Math.random()
    • utilisez l’option timeZone pour pour générer l’heure dans cette timezone (new Date().toLocaleTimeString('fr', { timeZone: '...' })
    • affichez la timezone dans la page (dans un autre paragraphe par exemple)
  • vous pouvez également utiliser la même fonction au chargement et récupérer la timezone du client (Intl.DateTimeFormat().resolvedOptions().timeZone)

L’objet event#

L’objet event passé automatiquement à la fonction de callback a également ses propres attributs et méthodes

  • event.target est l’élément cible sur lequel l’évènement a eu lieu
  • event.type est le nom de l’évènement
  • event.preventDefault() empêche la propagation de l’évènement. Utile pour arrêter l’action par défaut du navigateur par exemple.

Récupère les coordonnées du click

let monElement = document.getElementById("toto"); // cible #toto
monElement.addEventListener("click", function(event){
  console.log(event.clientX, event.clientY);
});

Autres considérations#

Un évènement bien pratique est DOMContentLoaded sur l’objet window. En effet, cet évènement est déclenché au chargement complet du DOM. Il est ainsi possible d’exécuter du code JS après la création complète de l’arbre, et ainsi appeler ses fichiers JS depuis le <head> du document HTML.

Détection du chargement complet du DOM

window.addEventListener("DOMContentLoaded", function(){
  // DOM chargé
});

L’évènement load permet de détecter la fin complète du chargement de la page (après exécution des scripts potentiellement asynchrones)

Liste complète des évènements

Attention, dans le cas d’une fonction nommée, listener doit être une référence à la fonction, et pas un appel à cette fonction.

function onClick () {
  console.log('Click');
}

// OK
monElement.addEventListener('click', onClick)

// Pas OK: la fonction sera appelée avant même le click
monElement.addEventListener('click', onClick())

Pour passer des paramètres à cette fonction, il n’est donc pas possible de faire

// NOK
monElement.addEventListener('click', onClick(param))

Dans ce cas, deux solutions :

// fonction anonyme qui appelle notre fonction
monElement.addEventListener('click', function() { onClick(param) })

// utilisation de bind (changement de contexte)
monElement.addEventListener('click', onClick.bind(null, param))