Manipulation du DOM avec JavaScript

Introduction

Bienvenue dans le laboratoire de manipulation du DOM JavaScript. Le Document Object Model (DOM) est une interface de programmation pour les documents web. Il représente la page afin que les programmes puissent modifier la structure, le style et le contenu du document. Lorsqu'une page web est chargée, le navigateur crée un DOM de la page, qui est une structure d'objets arborescente.

Dans ce laboratoire, vous apprendrez à utiliser JavaScript pour interagir avec le DOM. Vous pratiquerez la sélection d'éléments, la modification de leur contenu, la modification de leurs attributs, et la création et l'ajout dynamiques de nouveaux éléments à la page. Ce sont des compétences fondamentales pour créer des applications web interactives et dynamiques.

Une fois ce laboratoire terminé, vous serez capable de :

• Sélectionner un élément du DOM en utilisant son ID.
• Modifier le contenu d'un élément.
• Définir les attributs d'un élément.
• Créer un nouvel élément.
• Ajouter un nouvel élément au document.

Commençons !

Sélectionner un élément par ID avec getElementById

Dans cette étape, vous apprendrez à sélectionner un élément HTML en utilisant son ID unique. La méthode document.getElementById() est l'une des façons les plus courantes d'accéder à un élément spécifique dans le DOM.

Tout d'abord, localisez le fichier script.js dans l'explorateur de fichiers sur le côté gauche du WebIDE. Cliquez dessus pour l'ouvrir dans l'éditeur. Le script de configuration a déjà créé ce fichier pour vous.

Maintenant, ajoutez le code suivant à script.js. Ce code sélectionnera l'élément div avec l'ID main-content et le stockera dans une variable appelée contentDiv. Nous afficherons ensuite cet élément dans la console pour vérifier que nous l'avons correctement sélectionné.

const contentDiv = document.getElementById("main-content");

console.log(contentDiv);

Après avoir ajouté le code, enregistrez le fichier script.js. Pour voir le résultat, cliquez sur l'onglet "Web 8080" en haut de l'interface. Vous ne verrez aucun changement visuel sur la page elle-même, mais vous pourrez voir la sortie de console.log. Pour ce faire, ouvrez les outils de développement du navigateur (vous pouvez généralement le faire en faisant un clic droit sur la page et en sélectionnant "Inspecter", puis en naviguant vers l'onglet "Console"). Vous devriez voir l'élément div HTML affiché dans la console.

Modifier le contenu texte avec innerHTML

Dans cette étape, vous allez modifier le contenu de l'élément que vous avez sélectionné. La propriété innerHTML vous permet d'obtenir ou de définir le contenu HTML à l'intérieur d'un élément. C'est un moyen puissant de changer dynamiquement ce qui est affiché sur votre page web.

Continuez à éditer le fichier script.js. Sous le code que vous avez écrit à l'étape précédente, ajoutez la ligne suivante. Cela changera le texte à l'intérieur du div que nous avons sélectionné.

const contentDiv = document.getElementById("main-content");

// This line is new
contentDiv.innerHTML = "The content has been changed by JavaScript!";

console.log(contentDiv);

Assurez-vous d'enregistrer le fichier script.js. Maintenant, revenez à l'onglet "Web 8080" et actualisez la page. Vous devriez voir que le texte à l'intérieur de la boîte a changé de "This is the original content." à "The content has been changed by JavaScript!".

Définir un attribut avec la méthode setAttribute

Dans cette étape, vous apprendrez à modifier les attributs d'un élément, tels que le href d'un lien ou le src d'une image. La méthode setAttribute() est utilisée à cette fin. Elle prend deux arguments : le nom de l'attribut à définir et la valeur à attribuer à cet attribut.

Notre fichier index.html contient un lien (<a> tag) avec l'ID labex-link. Changeons son attribut href pour qu'il pointe vers le site web de LabEx.

Ajoutez le code suivant à votre fichier script.js.

// Select the link element
const link = document.getElementById("labex-link");

// Set its href attribute
link.setAttribute("href", "https://labex.io");

Votre fichier script.js complet devrait maintenant ressembler à ceci :

const contentDiv = document.getElementById("main-content");
contentDiv.innerHTML = "The content has been changed by JavaScript!";
console.log(contentDiv);

// Select the link element
const link = document.getElementById("labex-link");

// Set its href attribute
link.setAttribute("href", "https://labex.io");

Enregistrez le fichier, basculez vers l'onglet "Web 8080" et actualisez. Maintenant, si vous survolez le lien "LabEx", vous devriez voir dans la barre d'état de votre navigateur qu'il pointe vers https://labex.io. Cliquer dessus tentera de naviguer vers cette page.

Créer un nouvel élément avec createElement

Dans cette étape, vous allez créer un tout nouvel élément HTML à partir de zéro en utilisant JavaScript. C'est un élément essentiel de la construction d'interfaces dynamiques, où vous pourriez avoir besoin d'ajouter de nouveaux éléments à une liste, d'afficher de nouveaux messages, etc. La méthode document.createElement() est utilisée pour créer un élément spécifié par un nom de balise (tag name).

Créons un nouvel élément de paragraphe (<p>). Ajoutez le code suivant à la fin de votre fichier script.js.

// Create a new paragraph element
const newParagraph = document.createElement("p");

// Set its content
newParagraph.innerHTML = "This is a new paragraph created with JavaScript.";

// Add a class for styling
newParagraph.className = "new-element";

À ce stade, l'élément a été créé dans la mémoire du navigateur, mais il n'est pas encore visible sur la page. Nous avons créé l'élément, défini son contenu à l'aide de innerHTML, et lui avons attribué une classe CSS afin qu'il soit stylisé conformément à notre fichier style.css. Dans l'étape suivante, vous apprendrez comment ajouter ce nouvel élément au document.

Ajouter un élément enfant avec appendChild

Dans cette dernière étape, vous allez ajouter l'élément que vous avez créé à l'étape précédente à la page web. La méthode appendChild() ajoute un nœud (un élément) comme dernier enfant d'un élément parent.

Tout d'abord, nous devons sélectionner l'élément parent où nous voulons placer notre nouveau paragraphe. Notre index.html contient un div avec l'ID container à cet effet. Ensuite, nous utiliserons appendChild() pour y ajouter notre newParagraph.

Ajoutez le code suivant à la fin de script.js.

// Get the container element
const container = document.getElementById("container");

// Append the new paragraph to the container
container.appendChild(newParagraph);

Votre fichier script.js complet devrait maintenant contenir tout le code des étapes précédentes. Enregistrez le fichier et actualisez l'onglet "Web 8080". Vous devriez maintenant voir le nouveau paragraphe stylisé apparaître sous le lien sur votre page.

Félicitations ! Vous avez réussi à manipuler le DOM pour modifier du contenu, définir un attribut, et créer et afficher dynamiquement un nouvel élément.

Résumé

Dans ce laboratoire, vous avez appris les techniques fondamentales de manipulation du Document Object Model (DOM) avec JavaScript. Ces compétences sont essentielles pour créer des pages web dynamiques et interactives.

Vous avez pratiqué avec succès :

• La sélection d'éléments du DOM à l'aide de document.getElementById().
• La modification du contenu d'un élément à l'aide de la propriété innerHTML.
• La modification des attributs d'un élément avec la méthode setAttribute().
• La création de nouveaux éléments HTML en mémoire avec document.createElement().
• L'ajout d'éléments nouvellement créés à la page web à l'aide de appendChild().

En combinant ces méthodes, vous pouvez construire des interfaces utilisateur complexes qui répondent aux actions de l'utilisateur et affichent des données dynamiquement. Bravo pour avoir terminé ce laboratoire !