Scribd
Importer
238 vues3 pages

Cours Sur Le DOM en JavaScript

Transféré par

Alain yimtchia
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
238 vues3 pages

Cours Sur Le DOM en JavaScript

Transféré par

Alain yimtchia
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 3

Cours sur le DOM en JavaScript avec exercices

d'application
Qu'est-ce que le DOM ?

Le DOM (Document Object Model) est une interface de programmation qui permet
aux scripts JavaScript d'accéder et de modifier le contenu, la structure et la
présentation d'une page Web. Le DOM représente la page Web sous forme d'un
arbre d'objets, chaque objet représentant un élément HTML.

Accéder aux éléments du DOM

Pour accéder aux éléments du DOM, vous pouvez utiliser plusieurs méthodes :

 getElementById: Cette méthode permet d'accéder à un élément par son ID.


 getElementsByClassName: Cette méthode permet d'accéder à une liste d'éléments
par leur classe.
 getElementsByTagName: Cette méthode permet d'accéder à une liste d'éléments
par leur nom de balise.
 querySelector: Cette méthode permet d'accéder à un élément en utilisant un
sélecteur CSS.

Modifier le contenu du DOM

Vous pouvez modifier le contenu d'un élément du DOM en utilisant la propriété


textContent.

JavaScript
const element = document.getElementById("mon-element");
element.textContent = "Nouveau contenu";
Utilisez ce code avec précaution. En savoir plus
content_copy

Modifier la structure du DOM

Vous pouvez modifier la structure du DOM en utilisant les méthodes appendChild et


removeChild.

JavaScript
const element = document.getElementById("mon-element");
const nouvelElement = document.createElement("div");
nouvelElement.textContent = "Nouveau contenu";

element.appendChild(nouvelElement); // Ajoute le nouvel élément à la fin de


l'élément parent
// Pour supprimer un élément
element.removeChild(nouvelElement);
Utilisez ce code avec précaution. En savoir plus
content_copy

Modifier la présentation du DOM

Vous pouvez modifier la présentation du DOM en utilisant les propriétés CSS.

JavaScript
const element = document.getElementById("mon-element");
element.style.color = "red";
element.style.fontSize = "20px";
Utilisez ce code avec précaution. En savoir plus
content_copy

Exercices d'application

1. Créez une page Web avec un bouton. Lorsque l'utilisateur clique sur le bouton, une
alerte s'affiche avec le texte "Bonjour !".
HTML
<button id="mon-bouton">Cliquez ici</button>
Utilisez ce code avec précaution. En savoir plus
content_copy
JavaScript
const bouton = document.getElementById("mon-bouton");

bouton.addEventListener("click", () => {
alert("Bonjour !");
});
Utilisez ce code avec précaution. En savoir plus
content_copy

2. Créez une page Web avec une liste de noms. Lorsque l'utilisateur clique sur un nom,
la couleur du nom change en rouge.
HTML
<ul>
<li>Nom 1</li>
<li>Nom 2</li>
<li>Nom 3</li>
</ul>
Utilisez ce code avec précaution. En savoir plus
content_copy
JavaScript
const noms = document.querySelectorAll("li");

noms.forEach((nom) => {
nom.addEventListener("click", () => {
nom.style.color = "red";
});
});
Utilisez ce code avec précaution. En savoir plus
content_copy

3. Créez une page Web avec un formulaire. Lorsque l'utilisateur soumet le formulaire,
les valeurs des champs de saisie sont affichées dans une alerte.
HTML
<form>
<input type="text" name="nom" placeholder="Votre nom">
<input type="text" name="email" placeholder="Votre email">
<button type="submit">Envoyer</button>
</form>
Utilisez ce code avec précaution. En savoir plus
content_copy
JavaScript
const form = document.querySelector("form");

form.addEventListener("submit", (event) => {


event.preventDefault();

const nom = event.target.elements.nom.value;


const email = event.target.elements.email.value;

alert(`Nom: ${nom}\nEmail: ${email}`);


});
Utilisez ce code avec précaution. En savoir plus
content_copy

Conclusion

Le DOM est un outil essentiel pour les développeurs JavaScript qui permet d'interagir
avec les pages Web. N'hésitez pas à pratiquer avec les exercices d'application pour
vous familiariser avec le DOM.

Vous aimerez peut-être aussi