Maison >interface Web >js tutoriel >Manipulation du DOM en JavaScript
Date : 14 décembre 2024
Bienvenue au jour 7 de votre parcours d'apprentissage JavaScript ! Le sujet d'aujourd'hui se concentre sur la Manipulation DOM, l'un des aspects les plus passionnants de JavaScript. Avec la manipulation DOM, vous pouvez mettre à jour, ajouter ou supprimer dynamiquement des éléments d'une page Web, la rendant interactive et conviviale. À la fin de la leçon d’aujourd’hui, vous créerez également un projet simple de To-Do List pour mettre vos connaissances en pratique.
Le Document Object Model (DOM) est une interface de programmation pour les documents Web. Il représente la structure d'un document HTML sous la forme d'une arborescence d'objets, vous permettant d'accéder et de manipuler des éléments par programme à l'aide de JavaScript.
Voici un exemple de la façon dont le DOM représente le HTML :
<html> <body> <h1>Welcome</h1> <p>This is a paragraph.</p> </body> </html>
L'arborescence DOM pour ce qui précède ressemblerait à ceci :
Document └── html └── body ├── h1 └── p
Vous pouvez accéder aux éléments du DOM en utilisant plusieurs méthodes :
let title = document.getElementById("title"); console.log(title); // Logs the element with ID "title"
let items = document.getElementsByClassName("item"); console.log(items); // Logs all elements with class "item"
let firstItem = document.querySelector(".item"); // First element with class "item" let allItems = document.querySelectorAll(".item"); // All elements with class "item"
Vous pouvez mettre à jour le texte ou le HTML à l'intérieur d'un élément en utilisant :
let title = document.getElementById("title"); title.innerText = "Updated Title"; // Changes visible text title.innerHTML = "<strong>Updated Title</strong>"; // Adds HTML formatting
Vous pouvez modifier directement les styles CSS d'un élément.
let title = document.getElementById("title"); title.style.color = "blue"; title.style.fontSize = "24px";
let box = document.getElementById("box"); box.classList.add("highlight"); // Adds a class box.classList.remove("highlight"); // Removes a class
Les événements vous permettent de rendre vos pages Web interactives. Voici quelques types d’événements courants et comment les gérer.
Dans votre HTML :
<button onclick="alert('Button Clicked!')">Click Me</button>
Cette approche est préférée car elle sépare JavaScript du HTML.
let button = document.getElementById("btn"); button.addEventListener("click", function () { alert("Button Clicked!"); });
Exemple :
<html> <body> <h1>Welcome</h1> <p>This is a paragraph.</p> </body> </html>
Combinons ce que vous avez appris dans une simple application To-Do List.
Document └── html └── body ├── h1 └── p
Demain, le Jour 8, nous explorerons la Gestion des erreurs et débogage, en apprenant à gérer les problèmes inattendus dans votre code JavaScript. À bientôt alors !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!