Qu'est-ce que le DOM ?
Imaginez un document HTML comme un arbre généalogique. Chaque élément a un parent, il peut y avoir des enfants et des voisins. Le DOM est un moyen pour le navigateur d'organiser tous les éléments de la page en tant qu'objets JavaScript avec lesquels vous pouvez travailler.
<!DOCTYPE html>
<html>
<body>
<h1>Привет, мир!</h1>
<p>Это параграф</p>
</body>
</html>Dans cet exemple, <body> est le parent de <h1> et <p>, et ils sont ses enfants.
Recherche d'éléments sur la page
Avant de changer quoi que ce soit, vous devez trouver l'élément. Il y a plusieurs façons de le faire :
// Recherche par ID
const header = document.getElementById('main-header');
// Recherche par classe (renvoie une collection d'éléments)
const buttons = document.getElementsByClassName('btn');
// Recherche par mot-clé
const paragraphs = document.getElementsByTagName('p');
// Méthodes modernes (les plus populaires !)
const firstButton = document.querySelector('.btn'); // premier élément
const allButtons = document.querySelectorAll('.btn'); // tous les élémentsLes méthodes querySelector et querySelectorAll sont vos meilleures amies. Elles fonctionnent avec tous les sélecteurs CSS et sont très pratiques.
Modification du contenu
Maintenant que nous avons trouvé l'élément, faisons quelque chose avec :
const title = document.querySelector('h1');
// Modifier le texte
title.textContent = 'New title';
// Modifier le code HTML (vous pouvez insérer des balises)
title.innerHTML = 'Title with <span>accent</span>';Important : utilisez textContent pour le texte normal et innerHTML uniquement lorsque vous avez vraiment besoin d'insérer du code HTML. C'est plus sûr.
Travail avec les attributs
Les attributs des éléments sont également faciles à modifier :
const link = document.querySelector('a');
// Obtenir un attribut
const href = link.getAttribute('href');
// Définir l'attribut
link.setAttribute('href', 'https://example.com');
// Supprimer l'attribut
link.removeAttribute('target');
// Travail avec les classes
link.classList.add('active');
link.classList.remove('disabled');
link.classList.toggle('highlighted'); // changer de classeChangement de styles
Les styles CSS peuvent être modifiés directement à partir de JavaScript :
const box = document.querySelector('.box');
// Modifier un style
box.style.backgroundColor = 'blue';
box.style.width = '200px';
// La meilleure façon est à travers les classes
box.classList.add('big-box');Conseil : essayez de changer les styles à travers les classes, pas directement. Ainsi, le code est plus facile à maintenir.
Création de nouveaux éléments
Vous pouvez créer des éléments à partir de zéro et les ajouter à la page :
// Créer un élément
const newDiv = document.createElement('div');
// Ajouter du contenu
newDiv.textContent = 'I am a new element!';
newDiv.classList.add('message');
// Ajouter à la page
document.body.appendChild(newDiv); // à la fin du corps
// Ou insérer dans un endroit spécifique
const container = document.querySelector('.container');
container.appendChild(newDiv);Suppression d'éléments
Les éléments peuvent être supprimés :
const oldElement = document.querySelector('.old');
// Méthode moderne
oldElement.remove();
// Ancienne méthode (fonctionne partout)
oldElement.parentNode.removeChild(oldElement);
Exemple pratique : liste des tâches
Créons une application simple pour une liste de tâches. Essayez par vous-même :
Mes tâches
Voici le code qui fait fonctionner cette application :
const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
addBtn.addEventListener('click', function() {
const taskText = input.value.trim();
if (taskText === '') return;
// Créer un nouvel élément de liste
const li = document.createElement('li');
li.textContent = taskText;
// Nous ajoutons la possibilité de marquer une tâche
li.addEventListener('click', function() {
li.classList.toggle('completed');
});
// Bouton de suppression
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.className = 'delete-btn';
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation(); // pour que le clic sur li ne fonctionne pas
li.remove();
});
li.appendChild(deleteBtn);
taskList.appendChild(li);
// Effacer le champ de saisie
input.value = '';
});
// Ajout par Enter
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addBtn.click();
}
});Conseils utiles
Mettez en cache les éléments. Si vous utilisez un élément plusieurs fois, enregistrez-le dans une variable au lieu de le rechercher à nouveau.
// Mauvais
document.querySelector('.box').style.width = '100px';
document.querySelector('.box').style.height = '100px';
// Bien
const box = document.querySelector('.box');
box.style.width = '100px';
box.style.height = '100px';Utilisez la délégation d'événements. Au lieu d'ajouter des gestionnaires à chaque élément, ajoutez-en un au parent.
Minimisez le reflow. Les changements fréquents de DOM peuvent ralentir la page. Regroupez les modifications ou utilisez DocumentFragment.
Vérifiez l'existence des éléments avant de travailler avec eux pour éviter les erreurs.
const element = document.querySelector('.maybe-exists');
if (element) {
element.textContent = 'Found it!';
}Conclusion
La manipulation DOM est la base des pages Web interactives. Avec leur aide, vous pouvez créer des interfaces dynamiques, répondre aux actions des utilisateurs et rendre les sites Web vivants. Pratiquez, expérimentez avec des exemples, et bientôt cela deviendra naturel pour vous.
Vous pouvez apprendre Python et d'autres langages dans Codique - nous avons une plate-forme pratique pour l'apprentissage avec des tâches pratiques.
Et nous avons aussi un super chaîne Telegram avec une communauté amicale où vous pouvez poser des questions, partager des expériences et grandir avec des personnes partageant les mêmes idées.
Rejoignez-nous!