Introduction au DOM

Le DOM signifie Document Object Model.

Le DOM représente la page HTML sous forme d’objets JavaScript.

Grâce au DOM, JavaScript peut :

Sans le DOM, JavaScript ne pourrait pas vraiment interagir avec une page web.

1. HTML, CSS et JavaScript

Sur le web, chaque technologie possède un rôle différent.

Technologie Rôle
HTML Structure de la page
CSS Style et apparence
JavaScript Logique et interactions
DOM Pont entre HTML et JavaScript

2. Le DOM comme un arbre

Quand une page HTML est chargée, le navigateur transforme le document en structure en arbre.

Chaque balise HTML devient un élément du DOM.

Cette structure permet à JavaScript de naviguer facilement dans la page.

Structure en arbre du DOM

3. Le navigateur construit le DOM

Le navigateur lit le HTML ligne par ligne.

Ensuite, il construit automatiquement le DOM en mémoire.

JavaScript peut ensuite accéder à cette structure. 

<body>

    <h1>Bonjour</h1>

</body>

Le navigateur transforme ce HTML en objets JavaScript manipulables.

4. L’objet document

L’objet global document représente la page HTML entière. 

console.log(document);

Grâce à document, JavaScript peut :

5. Le DOM rend les pages interactives

Le DOM permet de créer des interfaces dynamiques.

Par exemple :

C’est la base des applications web modernes.

6. JavaScript manipule le DOM

JavaScript peut modifier la page après son chargement. 

<p id="message"></p>

<script>

    const element = document.getElementById("message");

    element.textContent = "Bonjour Fred";

</script>

Ici, JavaScript change le contenu du paragraphe.

7. DOM moderne vs document.write()

Avant, certaines pages utilisaient document.write(). 

document.write("Bonjour");

Aujourd’hui, cette méthode est considérée comme ancienne.

Les applications modernes utilisent le DOM pour manipuler les éléments proprement. 

const message = document.getElementById("message");

message.textContent = "Bonjour";

8. Pourquoi apprendre le DOM ?

Le DOM est une des bases du développement front-end.

Sans le DOM, il serait impossible de créer :

Résumé rapide

Concept Description
DOM Représentation HTML en objets JavaScript
document Objet représentant la page HTML
Arbre DOM Structure hiérarchique des éléments
Manipulation DOM Modifier la page avec JavaScript
document.write() Ancienne méthode déconseillée