JavaScript - Document Object Model (DOM)

Qu'est-ce que le DOM ?

Le Document Object Model, communément appelé DOM, est une interface de programmation pour les documents HTML et XML. Il représente la structure d'un document sous forme d'une hiérarchie arborescente d'objets, où chaque objet correspond à une partie du document, comme un élément, un attribut ou un nœud de texte.

JavaScript - HTML DOM

Imaginez que vous construisez une maison avec des briques Lego. Le DOM est comme avoir un plan magique qui non seulement vous montre comment la maison est construite, mais vous permet également de manipuler et de réorganiser les briques à l'aide de JavaScript. C'est un outil puissant qui fait le pont entre les pages web et les langages de programmation.

Concepts Clés du DOM

Nœud (Node) : Chaque partie du document est un nœud. Les éléments, les attributs et les textes sont tous des types de nœuds différents.
Structure en Arbre : Le DOM représente le document sous forme d'un arbre, avec l'objet document à la racine.
Navigation (Traversal) : Vous pouvez naviguer dans l'arbre DOM en utilisant diverses méthodes et propriétés.
Manipulation : Le DOM vous permet de modifier la structure, le style et le contenu du document dynamiquement.

Voyons un exemple simple pour illustrer ces concepts :

<!DOCTYPE html>
<html>
<head>
<title>Mon Premier Exemple DOM</title>
</head>
<body>
<h1 id="mainHeading">Bienvenue dans le DOM</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>

Dans ce document HTML, l'arbre DOM serait quelque chose comme ceci :

document
└── html
├── head
│   └── title
│       └── "Mon Premier Exemple DOM"
└── body
├── h1
│   └── "Bienvenue dans le DOM"
└── p
└── "Ceci est un paragraphe."

Qu'est-ce que le DOM HTML ?

Le DOM HTML est un modèle d'objets standard et une interface de programmation pour HTML. Il définit :

Les éléments HTML comme des objets
Les propriétés de tous les éléments HTML
Les méthodes pour accéder à tous les éléments HTML
Les événements pour tous les éléments HTML

En substance, le DOM HTML est une norme pour savoir comment obtenir, modifier, ajouter ou supprimer des éléments HTML.

Travailler avec le DOM HTML

Explorons quelques opérations courantes en utilisant le DOM HTML :

Accéder aux Éléments

// Obtenir un élément par son ID
const heading = document.getElementById('mainHeading');

// Obtenir des éléments par leur nom de balise
const paragraphs = document.getElementsByTagName('p');

// Obtenir des éléments par leur nom de classe
const highlights = document.getElementsByClassName('highlight');

// Utiliser querySelector pour des sélections plus complexes
const firstParagraph = document.querySelector('p');

Dans ces exemples, nous utilisons différentes méthodes pour sélectionner des éléments de notre document HTML. C'est comme utiliser une baguette magique pour pointer sur des parties spécifiques de notre page web !

Changer le Contenu

// Changer le contenu textuel d'un élément
heading.textContent = 'Bienvenue dans le Monde Magique du DOM !';

// Changer le contenu HTML d'un élément
paragraphs[0].innerHTML = 'Ce paragraphe a été <strong>modifié</strong> !';

Ici, nous mettons à jour le contenu de nos éléments. C'est comme effacer et réécrire des parties de notre page web instantanément !

Modifier les Styles

// Changer le style d'un élément
heading.style.color = 'bleu';
heading.style.fontSize = '24px';

Avec ces lignes, nous donnons un lifting à notre titre, changeant sa couleur et sa taille. C'est comme avoir un styliste pour vos éléments web !

Créer et Supprimer des Éléments

// Créer un nouvel élément
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Ceci est un paragraphe nouvellement créé.';

// Ajouter le nouvel élément au document
document.body.appendChild(newParagraph);

// Supprimer un élément
document.body.removeChild(paragraphs[0]);

Dans cet exemple, nous jouons le rôle d'un architecte de page web - construisant de nouveaux éléments et démolissant les anciens avec quelques lignes de code !

Pourquoi le DOM est-il nécessaire ?

Le DOM est essentiel pour plusieurs raisons :

Pages Web Dynamiques : Sans le DOM, les pages web seraient statiques. Le DOM nous permet de créer des expériences web interactives et dynamiques.
Séparation des Préoccupations : Le DOM offre un moyen de manipuler le contenu et la structure d'une page web à l'aide de JavaScript, le maintenant séparé du HTML et du CSS.
Compatibilité Multi-navigateurs : Le DOM fournit une interface de programmation standard qui fonctionne sur différents navigateurs, assurant une cohérence dans le développement web.
Gestion des Événements : Le DOM nous permet de lier des gestionnaires d'événements aux éléments, nous permettant de répondre aux interactions utilisateur comme les clics, les pressions de touches et les mouvements de souris.
AJAX et Applications à Page Unique : Le DOM est crucial pour mettre à jour des parties d'une page web sans recharger la page entière, ce qui est la fondation des applications web modernes.

Voyons un exemple qui rassemble beaucoup de ces concepts :

<!DOCTYPE html>
<html>
<head>
<title>Liste de Tâches</title>
<style>
.completed { text-decoration: line-through; }
</style>
</head>
<body>
<h1.Ma Liste de Tâches</h1>
<input type="text" id="newTodo">
<button id="addTodo">Ajouter une Tâche</button>
<ul id="todoList"></ul>

<script>
const newTodoInput = document.getElementById('newTodo');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');

addTodoButton.addEventListener('click', function() {
const todoText = newTodoInput.value;
if (todoText) {
const li = document.createElement('li');
li.textContent = todoText;

li.addEventListener('click', function() {
this.classList.toggle('completed');
});

todoList.appendChild(li);
newTodoInput.value = '';
}
});
</script>
</body>
</html>

Cet exemple demonstrates une application de liste de tâches simple. Il met en vedette :

L'accès aux éléments en utilisant le DOM
La création de nouveaux éléments
La modification du contenu et des styles des éléments
La gestion des événements
La mise à jour dynamique de la page sans rechargement

En utilisant le DOM, nous avons créé une application interactive qui répond à l'entrée utilisateur et se met à jour en temps réel. C'est la puissance du DOM en action !

Méthodes et Propriétés DOM Courantes

Voici un tableau de quelques méthodes et propriétés DOM couramment utilisées :

Méthode/Propriété	Description
`getElementById()`	Retourne l'élément avec l'ID spécifié
`getElementsByClassName()`	Retourne une collection d'éléments avec le nom de classe spécifié
`getElementsByTagName()`	Retourne une collection d'éléments avec le nom de balise spécifié
`querySelector()`	Retourne le premier élément qui correspond à un sélecteur CSS
`querySelectorAll()`	Retourne tous les éléments qui correspondent à un sélecteur CSS
`createElement()`	Crée un nouvel élément
`appendChild()`	Ajoute un nouvel enfant élément
`removeChild()`	Supprime un enfant élément
`innerHTML`	Obtient ou définit le contenu HTML à l'intérieur d'un élément
`textContent`	Obtient ou définit le contenu textuel d'un élément
`style`	Obtient ou définit le style en ligne d'un élément
`classList`	Permet de manipuler les classes d'un élément
`addEventListener()`	Attache un gestionnaire d'événement à un élément

En conclusion, le DOM est un outil puissant qui donne vie aux pages web. Il nous permet de créer des expériences web dynamiques et interactives qui répondent aux actions des utilisateurs et se mettent à jour en temps réel. Comme vous continuez votre parcours dans le développement web, vous trouverez le DOM être un allié indispensable pour créer des applications web engageantes et réactives. Bon codage !

Credits: Image by storyset

Tutoriel précédent:

JavaScript - mot-clé var

Tutoriel suivant:

JavaScript - Méthodes DOM