JavaScript - DOM Document: A Guide for Beginners
Bonjour, futurs programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du JavaScript et du Document Object Model (DOM). Ne vous inquiétez pas si ces termes semblent un peu effrayants - à la fin de ce tutoriel, vous serez en mesure de manipuler des pages web comme un pro !
Qu'est-ce que le Document DOM HTML ?
Imaginez que vous construisez une maison. Le plan de cette maison est comme votre document HTML, et la maison que vous voyez dans le navigateur est comme ce que vous avez devant vous. Et si vous vouliez changer la couleur d'un mur ou ajouter une nouvelle fenêtre après que la maison ait été construite ? C'est là que le DOM intervient !
Le DOM HTML (Document Object Model) est une interface de programmation pour les documents HTML. Il représente la structure d'un document sous forme d'une hiérarchie en arbre, où chaque nœud est un objet représentant une partie du document.
L'Objet Document
À la racine de cet arbre se trouve l'objet document. C'est comme la fondation de notre maison - tout le reste est construit dessus.
Commençons par un exemple simple :
<!DOCTYPE html>
<html>
<head>
<title>Ma Première Page DOM</title>
</head>
<body>
<h1>Bienvenue dans le DOM !</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>Dans cette structure HTML, document est en haut, suivi de html, puis de head et de body, et ainsi de suite.
Accéder à l'Objet Document DOM
Maintenant que nous comprenons ce qu'est le DOM, apprenons comment y accéder. En JavaScript, nous pouvons accéder easily à l'objet document en utilisant le mot-clé document.
Voici un exemple simple :
console.log(document);Si vous exécutez ceci dans la console de votre navigateur, vous verrez tout l'objet document. C'est comme avoir une vue d'oiseau de notre maison !
Propriétés de l'Objet Document
L'objet document a de nombreuses propriétés qui nous permettent d'accéder à différentes parties du document HTML. Explorons certaines de ces propriétés :
Propriété childElementCount
La propriété childElementCount renvoie le nombre d'éléments enfant qu'un élément a. Pour l'objet document, elle renvoie le nombre d'enfants directs de l'élément <html>.
console.log(document.childElementCount);Cela renvoie généralement 1, car l'élément <html> a généralement un seul enfant direct : l'élément <body>.
Propriété links
La propriété links renvoie une collection de tous les éléments <a> et <area> dans le document qui ont un attribut href.
console.log(document.links);C'est comme demander : "Combien de portes (liens) a notre maison ?"
Propriété title
La propriété title permet d'obtenir ou de définir le titre du document actuel.
console.log(document.title);
document.title = "Mon Nouveau Titre";C'est comme changer la plaque d'identité de votre maison !
Exemples Pratiques
Mettons nos connaissances en pratique avec quelques exemples du monde réel :
Exemple 1 : Changer le Titre de la Page
document.title = "Bienvenue sur " + document.title;
console.log("Le nouveau titre est : " + document.title);Ce script ajoute "Bienvenue sur " au début du titre actuel de votre page. C'est comme ajouter un salut amical à la plaque d'identité de votre maison !
Exemple 2 : Compter les Liens
let linkCount = document.links.length;
console.log("Cette page a " + linkCount + " liens.");Ce script compte combien de liens il y a sur votre page. C'est comme compter combien de chemins il y a pour quitter votre maison !
Exemple 3 : Modifier le Contenu de la Page
let newHeading = document.createElement("h2");
newHeading.textContent = "Ce titre a été ajouté par JavaScript !";
document.body.appendChild(newHeading);Ce script crée un nouvel élément <h2>, définit son contenu textuel, et l'ajoute à la fin du <body>. C'est comme ajouter une nouvelle pièce à votre maison avec JavaScript !
Méthodes Communes de l'Objet Document DOM
Voici un tableau de quelques méthodes courantes de l'objet document DOM :
| Méthode | Description |
|---|---|
document.getElementById(id) |
Renvoie l'élément avec l'ID spécifié |
document.getElementsByClassName(name) |
Renvoie une collection d'éléments avec le nom de classe spécifié |
document.getElementsByTagName(name) |
Renvoie une collection d'éléments avec le nom de balise spécifié |
document.createElement(name) |
Crée un nœud élément |
document.createTextNode(text) |
Crée un nœud texte |
document.querySelector(selector) |
Renvoie le premier élément qui correspond au sélecteur CSS |
document.querySelectorAll(selector) |
Renvoie tous les éléments qui correspondent au sélecteur CSS |
Conclusion
Félicitations ! Vous avez fait vos premiers pas dans le monde de la manipulation du DOM avec JavaScript. Souvenez-vous, le DOM est votre toolkit pour construire des pages web dynamiques et interactives. C'est comme avoir une baguette magique qui peut changer n'importe quelle partie de votre page web à volonté !
Alors que vous poursuivez votre voyage, vous découvrirez encore plus de façons passionnantes d'utiliser le DOM. Continuez à vous entraîner, restez curieux, et n'ayez pas peur d'expérimenter. Avant de vous en rendre compte, vous serez en train de construire des pages web qui dansent au rythme de votre JavaScript !
Bonne programmation, futurs magiciens du web !
Credits: Image by storyset