Guide : Document Object Model (DOM) en JavaScript

1
1. Introduction au DOM

 Définition : Le DOM (Document Object Model) est une interface de programmation

pour les documents HTML et XML, qui représente la structure du document sous
forme de hiérarchie d'objets. Chaque élément du document devient un objet que
JavaScript peut manipuler.
 Importance : Le DOM permet aux développeurs de manipuler dynamiquement le
contenu, la structure, et le style d'une page Web.

2. Structure du DOM

 Document : L’objet principal du DOM (document), qui représente la page HTML

complète.
 Nœuds : Chaque élément HTML, texte ou attribut est représenté comme un nœud.
o Nœuds d'élément : balises HTML comme <div>, <p>, <h1>.
o Nœuds de texte : contenu textuel d'un élément.
o Nœuds d'attribut : attributs associés aux éléments (par ex. class, id).

3. Sélecteurs DOM

 Accéder aux éléments avec JavaScript :

o document.getElementById("id") : sélection par identifiant unique.
o document.getElementsByClassName("classe") : sélection par nom de
classe.
o document.getElementsByTagName("balise") : sélection par nom de balise.
o document.querySelector("sélecteur") : sélection par le premier élément
correspondant au sélecteur CSS.
o document.querySelectorAll("sélecteur") : sélection de tous les
éléments correspondant au sélecteur CSS.

4. Manipulation du DOM

 Modification du contenu :

Javascript code

const titre = document.getElementById("titre");

titre.textContent = "Nouveau Titre";

 Modification du style :

Javascript code
const paragraphe = document.querySelector("p");
paragraphe.style.color = "blue";

 Ajout et suppression d’éléments :

Javascript code
const newDiv = document.createElement("div");

2
 newDiv.textContent = "Nouvel élément";
document.body.appendChild(newDiv);

const oldElement = document.getElementById("oldElement");

oldElement.remove();

5. Événements DOM

 Les événements permettent d’interagir avec les utilisateurs. Exemple d’événements

courants :
o click : déclenché lorsqu'un élément est cliqué.
o mouseover : déclenché lorsque la souris passe sur un élément.
o input : déclenché lors de la saisie dans un champ de formulaire.

Exemple d'ajout d'un événement :

javascript code

const bouton = document.getElementById("bouton");

bouton.addEventListener("click", function() {
alert("Bouton cliqué !");
});

6. Traversée du DOM

 Se déplacer entre les éléments dans le DOM :

o parentNode : pour accéder au parent d'un nœud.
o childNodes : pour accéder aux enfants d'un nœud.
o nextSibling et previousSibling : pour naviguer entre les nœuds frères.

Avec ces sections et exemples, vous avez de quoi démarrer un bon document Word couvrant
les bases du DOM en JavaScript. Si vous avez besoin d’aide pour des parties spécifiques,
n’hésitez pas à demander !

3
Details en java script DOM

4
DOM en JavaScript, détaillé et prêt à être structuré dans un document Word pour un cours
ou une référence approfondie.

Cours Complet : Document Object Model (DOM) en JavaScript

1. Introduction au DOM

1.1 Définition du DOM

Le Document Object Model (DOM) est une interface de programmation pour les documents
HTML et XML. Le DOM représente la structure d’un document sous forme d’arbre
hiérarchique où chaque élément HTML, attribut et contenu texte est un nœud. Avec
JavaScript, on peut manipuler ces nœuds pour modifier dynamiquement la structure, le style,
et le contenu d’une page Web.

1.2 Pourquoi le DOM est-il important ?

Le DOM permet aux développeurs de créer des interactions riches et dynamiques en temps
réel. Il sert de pont entre le code HTML statique et les interactions utilisateur, permettant de
changer la page sans avoir à la recharger entièrement.

2. Structure du DOM

Le DOM organise les documents en une hiérarchie de nœuds, ce qui permet de manipuler
chaque élément individuellement. La structure basique du DOM est la suivante :

1. Document : Le nœud racine qui représente tout le document HTML.

2. Élément : Représente chaque balise HTML (<div>, <p>, <ul>, etc.).
3. Attribut : Représente les attributs de balises HTML (id, class, etc.).
4. Texte : Représente le texte contenu dans les éléments.

Chaque élément peut avoir des enfants (d'autres éléments) et peut aussi avoir un parent
(l'élément dans lequel il est contenu).

3. Sélecteurs DOM en JavaScript

Les sélecteurs permettent de cibler des éléments spécifiques dans le DOM. Voici les
principales méthodes :

5
3.1 getElementById

Sélectionne un élément par son id unique.

javascript
const titre = document.getElementById("main-title");

3.2 getElementsByClassName

Sélectionne tous les éléments ayant une classe spécifique, retournant une collection
d’éléments.

javascript
const items = document.getElementsByClassName("list-item");

3.3 getElementsByTagName

Sélectionne tous les éléments d’un type de balise spécifique.

javascript
const paragraphes = document.getElementsByTagName("p");

3.4 querySelector

Sélectionne le premier élément correspondant à un sélecteur CSS.

javascript
const premierItem = document.querySelector(".list-item");

3.5 querySelectorAll

Sélectionne tous les éléments correspondant à un sélecteur CSS, retournant une NodeList.

javascript
const tousLesItems = document.querySelectorAll(".list-item");

4. Manipulation du DOM

4.1 Modification du Texte et HTML

Pour changer le contenu texte ou HTML d'un élément :

javascript
const titre = document.getElementById("titre");
titre.textContent = "Nouveau Titre"; // Modifie le texte uniquement
titre.innerHTML = "<em>Nouveau Titre</em>"; // Modifie le HTML

4.2 Modification des Styles

On peut accéder aux styles directement en utilisant style.

6
javascript
titre.style.color = "blue";
titre.style.fontSize = "20px";

4.3 Ajout et Suppression d’Éléments

Pour ajouter de nouveaux éléments :

javascript
const nouveauDiv = document.createElement("div");
nouveauDiv.textContent = "Un nouvel élément !";
document.body.appendChild(nouveauDiv);

Pour supprimer un élément :

javascript
const ancienElement = document.getElementById("oldElement");
ancienElement.remove();

5. Gestion des Événements

5.1 Introduction aux événements

Un événement est une action déclenchée par l’utilisateur ou par le navigateur (ex : clic,
survol, frappe de touche).

5.2 Principaux types d’événements

 Mouse Events : click, dblclick, mouseover, mouseout, mousemove.

 Keyboard Events : keydown, keyup, keypress.
 Form Events : submit, focus, blur, change.
 Window Events : load, resize, scroll.

5.3 Attachement d’un événement avec addEventListener

La méthode addEventListener est la méthode recommandée pour ajouter des écouteurs

d'événements.

javascript
const bouton = document.getElementById("bouton");
bouton.addEventListener("click", function() {
alert("Bouton cliqué !");
});

5.4 Utilisation de l’objet event

L’objet event contient des informations sur l’événement.

javascript
document.getElementById("champ").addEventListener("focus", (event) => {
console.log("L'élément a été focus : ", event.target);
});

7
5.5 Prévenir le Comportement Par Défaut

Certaines actions comme le clic sur un lien ou la soumission d’un formulaire ont un
comportement par défaut que l’on peut empêcher.

javascript
const lien = document.querySelector("a");
lien.addEventListener("click", function(event) {
event.preventDefault();
alert("Lien désactivé !");
});

6. Traversée du DOM

La traversée du DOM permet de naviguer dans la structure hiérarchique.

6.1 Propriétés de traversée de base

 parentNode : Accède au parent.

 childNodes : Accède à tous les enfants.
 firstChild / lastChild : Accède au premier ou dernier enfant.
 nextSibling / previousSibling : Accède aux frères suivants ou précédents.

Exemple de navigation :

javascript
const element = document.querySelector(".element");
console.log(element.parentNode); // Affiche le parent
console.log(element.firstChild); // Affiche le premier enfant

7. Exemples Pratiques

7.1 Créer un compteur de clics

Un exemple pratique d'application d'événements :

html
<button id="compteur">Cliquez-moi</button>
<p id="resultat">Clics : 0</p>

<script>
let count = 0;
document.getElementById("compteur").addEventListener("click", function()
{
count++;
document.getElementById("resultat").textContent = "Clics : " + count;
});
</script>

7.2 Affichage conditionnel d’un message

8
Html code

<input type="text" id="email" placeholder="Entrez votre email">

<p id="message" style="display: none; color: red;">Adresse email
incorrecte</p>

<script>
const emailInput = document.getElementById("email");
emailInput.addEventListener("blur", function() {
const message = document.getElementById("message");
if (!emailInput.value.includes("@")) {
message.style.display = "block";
} else {
message.style.display = "none";
}
});
</script>

8. Bonnes Pratiques avec le DOM

1. Minimiser les manipulations : Les manipulations fréquentes du DOM peuvent ralentir la

page. Groupez les modifications pour réduire l'impact.
2. Utiliser addEventListener : Privilégiez cette méthode pour les événements pour éviter
d'écraser les autres écouteurs.
3. Délégation d’événements : Pour les éléments dynamiques, attachez un événement à un
élément parent plutôt qu’à chaque élément enfant.

Avec cette structure, vous disposez d’un cours complet et détaillé sur le DOM en JavaScript.
Ce contenu peut être facilement structuré dans un fichier Word, avec chaque section illustrée
par des exemples de code et des explications pour une meilleure compréhension.