Introduction au DOM

Le DOM (Document Object Model) est une interface de programmation qui représente la structure d'un document HTML ou XML sous forme d'arbre d'objets. Chaque élément HTML devient un objet JavaScript que vous pouvez manipuler.

Concept Clé

Les éléments HTML sont des objets en JavaScript. Cela signifie que vous pouvez accéder à leurs propriétés, modifier leurs attributs, et appeler des méthodes sur eux.

Pourquoi le DOM est Important ?

Interactivité

Permet de créer des pages web dynamiques et interactives en répondant aux actions de l'utilisateur.

Manipulation

Modifiez le contenu, la structure et le style de la page sans recharger.

Événements

Réagissez aux actions utilisateur : clics, saisie clavier, mouvements de souris, etc.

Structure

Accédez et naviguez dans la structure hiérarchique du document.

L'Arbre DOM

Le DOM représente le document HTML sous forme d'arbre hiérarchique. Chaque élément est un nœud (node) dans cet arbre.

Structure Hiérarchique

<!DOCTYPE html>
<html>
    <head>
        <title>Ma Page</title>
    </head>
    <body>
        <h1 id="titre">Bonjour</h1>
        <p class="texte">Bienvenue sur ma page.</p>
    </body>
</html>
Représentation en Arbre 
Document
└── html
    ├── head
    │   └── title
    │       └── "Ma Page"
    └── body
        ├── h1#titre
        │   └── "Bonjour"
        └── p.texte
            └── "Bienvenue sur ma page."

Types de Nœuds

Type Description Exemple
Element Node Éléments HTML (balises) <div>, <p>, <h1>
Text Node Contenu textuel "Bonjour le monde"
Attribute Node Attributs des éléments id="titre", class="texte"
Comment Node Commentaires HTML <!-- commentaire -->

Sélection d'Éléments

Pour manipuler un élément, vous devez d'abord le sélectionner. JavaScript offre plusieurs méthodes pour sélectionner des éléments du DOM.

Méthodes de Sélection

Méthode document.getElementById(id)
Sélectionne un élément par son attribut id. Retourne un seul élément ou null si non trouvé. 
// HTML: <h1 id="titre">Bonjour</h1>
const titre = document.getElementById('titre');
console.log(titre.textContent); // "Bonjour"
Méthode document.getElementsByClassName(className)
Sélectionne tous les éléments ayant une classe spécifique. Retourne une HTMLCollection (collection live). 
// HTML: <p class="texte">Paragraphe 1</p>
//        <p class="texte">Paragraphe 2</p>
const paragraphes = document.getElementsByClassName('texte');
console.log(paragraphes.length); // 2
console.log(paragraphes[0].textContent); // "Paragraphe 1"
Méthode document.getElementsByTagName(tagName)
Sélectionne tous les éléments d'un type de balise donné. Retourne une HTMLCollection. 
// Sélectionner tous les paragraphes
const allParagraphs = document.getElementsByTagName('p');

// Sélectionner toutes les images
const allImages = document.getElementsByTagName('img');
Méthode document.querySelector(selector)
Sélectionne le premier élément correspondant au sélecteur CSS. Très flexible et moderne. 
// Par ID
const titre = document.querySelector('#titre');

// Par classe
const premierTexte = document.querySelector('.texte');

// Par balise
const premierParagraphe = document.querySelector('p');

// Sélecteur complexe
const lien = document.querySelector('nav a.active');
Méthode document.querySelectorAll(selector)
Sélectionne tous les éléments correspondant au sélecteur CSS. Retourne une NodeList (statique). 
// Tous les paragraphes
const allParagraphs = document.querySelectorAll('p');

// Tous les éléments avec la classe 'texte'
const allTexts = document.querySelectorAll('.texte');

// Sélecteur complexe
const navLinks = document.querySelectorAll('nav ul li a');
HTMLCollection vs NodeList
  • HTMLCollection : Collection "live" qui se met à jour automatiquement si le DOM change
  • NodeList : Collection "statique" qui ne change pas après sa création
  • Les deux sont similaires à des tableaux mais ne sont pas de vrais tableaux
  • Utilisez Array.from() ou [...collection] pour les convertir en tableaux

Propriétés des Éléments

Chaque élément DOM possède des propriétés que vous pouvez lire ou modifier.

Contenu Textuel

Propriété element.textContent
Obtient ou définit le contenu textuel de l'élément et de ses descendants (sans balises HTML). 
// HTML: <p id="texte">Bonjour <strong>monde</strong></p>
const p = document.getElementById('texte');
console.log(p.textContent); // "Bonjour monde"

// Modifier le texte
p.textContent = "Nouveau texte"; // Remplace tout le contenu
Propriété element.innerHTML
Obtient ou définit le contenu HTML de l'élément (avec balises). 
// HTML: <div id="contenu"><p>Texte</p></div>
const div = document.getElementById('contenu');
console.log(div.innerHTML); // "<p>Texte</p>"

// Modifier le HTML
div.innerHTML = "<h2>Nouveau titre</h2><p>Nouveau paragraphe</p>";
Attention Sécurité !

N'utilisez jamais innerHTML avec du contenu provenant de l'utilisateur sans le nettoyer, car cela peut créer des failles XSS (Cross-Site Scripting).

Propriété element.outerHTML
Obtient ou définit le HTML de l'élément incluant l'élément lui-même. 
// HTML: <div id="box"><p>Contenu</p></div>
const div = document.getElementById('box');
console.log(div.outerHTML); 
// "<div id=\"box\"><p>Contenu</p></div>"

Informations sur l'Élément

Propriété element.tagName
Retourne le nom de la balise en MAJUSCULES (lecture seule). 
const titre = document.querySelector('h1');
console.log(titre.tagName); // "H1"
Propriété element.id / element.className
Obtient ou définit l'ID ou la classe de l'élément. 
const element = document.querySelector('div');

// ID
console.log(element.id);
element.id = "nouveau-id";

// Classe (chaîne de caractères)
console.log(element.className);
element.className = "classe1 classe2";