Manipuler les éléments DOM avec des méthodes JavaScript

Introduction

Dans ce laboratoire, les participants exploreront les puissantes techniques de manipulation d'éléments DOM à l'aide de méthodes JavaScript. Le tutoriel complet guide les apprenants dans la création d'une structure de document HTML, la sélection d'éléments par ID, la génération et l'ajout dynamiques de nouveaux éléments, la modification des styles à l'aide de sélecteurs de classes et la résolution de défis de génération d'éléments interactifs.

Les participants acquerront une expérience pratique des techniques essentielles de manipulation du DOM JavaScript, y compris des méthodes telles que document.getElementById(), les modifications de propriété .style, la création d'éléments avec document.createElement() et la gestion de contenu dynamique. En suivant des instructions étape par étape, les apprenants développeront des compétences pratiques dans la transformation du contenu et de l'interactivité de la page web à l'aide des méthodes clés du DOM JavaScript.

Configurer la structure du document HTML

Dans cette étape, vous allez apprendre à créer une structure de base de document HTML qui servira de base pour notre laboratoire de manipulation du DOM JavaScript. Nous allons configurer un fichier HTML simple avec les éléments essentiels avec lesquels nous allons interagir à l'aide de JavaScript.

Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé index.html en cliquant droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier".

Voici la structure HTML de base que vous allez créer :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Manipulation Lab</title>
  </head>
  <body>
    <div id="container">
      <h1 id="main-title">Welcome to DOM Manipulation</h1>
      <p class="description">
        This is a practice page for JavaScript DOM methods.
      </p>
      <div id="dynamic-content"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Analysons les composants clés :

<!DOCTYPE html> indique que ceci est un document HTML5
Nous avons inclus un id pour le conteneur principal et les éléments clés
Ajout d'une class au paragraphe
Création d'un div vide avec id="dynamic-content" pour une manipulation ultérieure
Liaison d'un fichier JavaScript externe script.js

Sortie exemple lorsque vous ouvrez ce fichier HTML dans un navigateur :

Welcome to DOM Manipulation
This is a practice page for JavaScript DOM methods.

Maintenant, créez le fichier JavaScript correspondant script.js dans le même répertoire :

// Initial JavaScript file for DOM manipulation
console.log("HTML document is ready for DOM manipulation");

Sélectionner des éléments par ID et modifier les styles

Dans cette étape, vous allez apprendre à sélectionner des éléments HTML par leur ID et à modifier leurs styles à l'aide de JavaScript. Ouvrez le fichier script.js dans l'IDE Web que vous avez créé dans l'étape précédente.

Nous allons utiliser la méthode document.getElementById() pour sélectionner des éléments et la propriété .style pour modifier leur apparence. Mettez à jour votre fichier script.js avec le code suivant :

// Select elements by ID
const mainTitle = document.getElementById("main-title");
const container = document.getElementById("container");

// Modify styles directly
mainTitle.style.color = "blue";
mainTitle.style.fontSize = "24px";
mainTitle.style.textAlign = "center";

// Modify container styles
container.style.backgroundColor = "#f0f0f0";
container.style.padding = "20px";
container.style.borderRadius = "10px";

Analysons ce que fait ce code :

document.getElementById() trouve un élément avec un ID spécifique
La propriété .style permet des modifications de style directes
Nous changeons la couleur, la taille de police et l'alignement du titre principal
Nous ajoutons une couleur d'arrière-plan, un rembourrage et un rayon de bordure au conteneur

Sortie exemple dans le navigateur :

Le titre principal sera bleu, centré et plus grand
Le conteneur aura un arrière-plan gris clair avec des coins arrondis

Pour voir les modifications, ouvrez le fichier index.html dans un navigateur ou utilisez l'aperçu du navigateur dans l'IDE Web.

Créer et ajouter dynamiquement de nouveaux éléments

Dans cette étape, vous allez apprendre à créer dynamiquement de nouveaux éléments HTML à l'aide de JavaScript et à les ajouter au document existant. Ouvrez le fichier script.js dans l'IDE Web et ajoutez le code suivant :

// Select the dynamic content container
const dynamicContent = document.getElementById("dynamic-content");

// Create new elements
const newParagraph = document.createElement("p");
const newButton = document.createElement("button");

// Set content and attributes
newParagraph.textContent = "This paragraph was created dynamically!";
newParagraph.style.color = "green";

newButton.textContent = "Click Me";
newButton.style.backgroundColor = "lightblue";
newButton.style.padding = "10px";

// Append elements to the dynamic content container
dynamicContent.appendChild(newParagraph);
dynamicContent.appendChild(newButton);

// Add an event listener to the button
newButton.addEventListener("click", () => {
  alert("Dynamic button was clicked!");
});

Analysons les principales méthodes :

document.createElement() crée un nouvel élément HTML
.textContent définit le texte d'un élément
.appendChild() ajoute le nouvel élément au DOM
.addEventListener() ajoute de l'interactivité à l'élément

Sortie exemple dans le navigateur :

Un paragraphe vert avec le texte "This paragraph was created dynamically!"
Un bouton bleu clair qui dit "Click Me"
Cliquez sur le bouton pour afficher une alerte

Lorsque vous ouvrez le fichier index.html, vous verrez les nouveaux éléments créés ajoutés à la page.

Modifier des éléments à l'aide de sélecteurs de classes

Dans cette étape, vous allez apprendre à sélectionner et modifier des éléments à l'aide de sélecteurs de classes en JavaScript. Mettez à jour votre fichier index.html pour inclure plusieurs éléments avec la même classe :

<div id="container">
  <h1 id="main-title">Welcome to DOM Manipulation</h1>
  <p class="description">First description paragraph</p>
  <p class="description">Second description paragraph</p>
  <div id="dynamic-content"></div>
</div>

Maintenant, modifiez votre fichier script.js pour travailler avec les sélecteurs de classes :

// Select all elements with the 'description' class
const descriptionElements = document.getElementsByClassName("description");

// Loop through the elements and modify their styles
for (let element of descriptionElements) {
  element.style.fontStyle = "italic";
  element.style.color = "darkgreen";
  element.style.backgroundColor = "#f0f0f0";
  element.style.padding = "10px";
  element.style.margin = "5px 0";
}

// Alternative method using querySelector
const firstDescription = document.querySelector(".description");
firstDescription.textContent = "Modified first description using querySelector";

Principales méthodes démontrées :

document.getElementsByClassName() renvoie une collection d'éléments
document.querySelector() sélectionne le premier élément correspondant
Utilisation d'une boucle for...of pour itérer sur les éléments
Modification des styles de plusieurs éléments simultanément

Sortie exemple dans le navigateur :

Deux paragraphes avec du texte en italique et vert foncé
Arrière-plan gris clair pour les paragraphes de description
Texte de la première description modifié

Lorsque vous ouvrez le fichier index.html, vous verrez les paragraphes de description stylisés et modifiés.

Mettre en œuvre le défi de génération d'éléments interactifs

Dans cette dernière étape, vous allez créer un défi interactif qui permet aux utilisateurs de générer dynamiquement des éléments. Mettez à jour votre fichier index.html pour inclure une zone de saisie et un bouton :

<div id="container">
  <h2>Dynamic Element Generator</h2>
  <input type="text" id="elementInput" placeholder="Enter element text" />
  <select id="elementType">
    <option value="p">Paragraph</option>
    <option value="h3">Heading</option>
    <option value="div">Div</option>
  </select>
  <button id="generateButton">Generate Element</button>
  <div id="output-container"></div>
</div>

Maintenant, mettez à jour votre fichier script.js avec la logique de génération d'éléments interactifs :

// Select key elements
const elementInput = document.getElementById("elementInput");
const elementTypeSelect = document.getElementById("elementType");
const generateButton = document.getElementById("generateButton");
const outputContainer = document.getElementById("output-container");

// Element generation function
function generateElement() {
  // Get input values
  const text = elementInput.value;
  const type = elementTypeSelect.value;

  // Check if input is not empty
  if (text.trim() === "") {
    alert("Please enter some text");
    return;
  }

  // Create new element
  const newElement = document.createElement(type);
  newElement.textContent = text;

  // Style the new element
  newElement.style.margin = "10px 0";
  newElement.style.padding = "10px";
  newElement.style.backgroundColor = getRandomColor();

  // Add a remove button to each generated element
  const removeButton = document.createElement("button");
  removeButton.textContent = "Remove";
  removeButton.style.marginLeft = "10px";
  removeButton.addEventListener("click", () => {
    outputContainer.removeChild(newElement);
  });

  // Append element and remove button
  newElement.appendChild(removeButton);
  outputContainer.appendChild(newElement);

  // Clear input
  elementInput.value = "";
}

// Helper function to generate random color
function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Add event listener to generate button
generateButton.addEventListener("click", generateElement);

Caractéristiques clés de ce défi interactif :

Création dynamique d'éléments basée sur l'entrée de l'utilisateur
Possibilité de choisir le type d'élément
Couleur d'arrière-plan aléatoire pour chaque élément
Option pour supprimer des éléments individuels
Validation de l'entrée

Interaction exemple :

Entrez "Hello World" dans la zone de saisie
Sélectionnez le type d'élément (par exemple, Paragraph)
Cliquez sur "Generate Element"
Un nouveau paragraphe apparaît avec une couleur d'arrière-plan aléatoire
Cliquez sur "Remove" pour supprimer l'élément

Résumé

Dans ce laboratoire, les participants apprennent les techniques fondamentales de manipulation du DOM en JavaScript grâce à une approche structurée et pratique. Le laboratoire commence par l'établissement d'une structure de base de document HTML avec un positionnement stratégique d'éléments, y compris des IDs et des classes uniques qui facilitent l'interaction JavaScript. Les participants créent un fichier HTML initial et le fichier JavaScript correspondant, posant les bases pour la manipulation dynamique de pages web.

Le laboratoire guide progressivement les apprenants à travers les méthodes essentielles du DOM, notamment la sélection d'éléments par ID, la modification dynamique de styles, la création et l'ajout de nouveaux éléments, et la mise en œuvre de la génération d'éléments interactifs. En résolvant ces défis pratiques, les participants deviennent compétents pour accéder directement et transformer les éléments de la page web à l'aide de JavaScript, développant des compétences essentielles pour créer des applications web réactives et interactives.