03. Manipulation DOM

1. Le DOM (Document Object Model)

Le DOM est l’arbre généalogique de votre page HTML.

• window : la fenêtre globale du navigateur
• document : la page web actuelle

Le DOM est une API. C’est un modèle de la page web (React utilise “plusieurs” DOM mis en cache, ils ne sont pas exactement pareils mais ils peuvent communiquer et s’échanger des valeurs)

https://developer.mozilla.org/fr/docs/Glossary/DOM https://legacy.reactjs.org/docs/faq-internals.html

---

Pour modifier un élément, vous devez d’abord le sélectionner (querySelector), puis modifier ses propriétés (textContent).

HTML de référence :

<p id="result">Waiting...</p>

Exemple de sélection et modification:

 
> const resultEl = document.querySelector('p#result')
 
> resultEl.textContent = 'Analyzing...'
 

Note: Nous utilisons .textContent et non .innerText pour une balise standard comme <p>.

---

2. Événements (Events)

Pour rendre la page interactive (clic, survol, clavier), on utilise des écouteurs d’événements (event listeners).

element.addEventListener("click", function () { // Action })

Exemple pour sélection un bouton, et ajouter un évènement “click” et au click on change le texte :

Reference HTML:

 
<button id="btn-validate">Validate</button>
 

 
const validateBtn = document.querySelector('button#btn-validate')
 
validateBtn.addEventListener('click', function () {
 
resultEl.textContent = 'Button clicked!'
 
 
})
 

---

3. Manipulations enfants parents

Manipulation Parent / Enfant en JavaScript (DOM)

Quand une page HTML est chargée, elle devient une arborescence (comme un arbre généalogique).
Chaque élément peut avoir :

• un parent
• des enfants
• des frères (siblings)

Comprendre la structure

Exemple HTML

<div id="container">
  <p>Bonjour</p>
  <button>Clique</button>
</div>
 

Structure DOM

div (parent) ├── p (enfant) └── button (enfant)

• div = parent
• p et button = enfants
• p et button = frères

Aller vers le parent

const button = document.querySelector("button");
console.log(button.parentElement);
 

→ parentElement permet de remonter d’un niveau dans le DOM.

Aller vers les enfants

const container = document.querySelector("#container");
 
console.log(container.children);
 

Méthodes utiles :

• children → tous les enfants HTML
• firstElementChild → premier enfant
• lastElementChild → dernier enfant

console.log(container.firstElementChild); // <p>
console.log(container.lastElementChild);  // <button>

Aller vers les frères (siblings)

const p = document.querySelector("p");
 
console.log(p.nextElementSibling);     // <button>
console.log(p.previousElementSibling); // null (car premier)

• nextElementSibling → frère suivant
• previousElementSibling → frère précédent

Exemple concret

Modifier le parent quand on clique sur un bouton :

const button = document.querySelector("button");
 
button.addEventListener("click", function() {
  this.parentElement.style.backgroundColor = "lightblue";
});
 

• On part de l’enfant (button)
• On remonte au parent
• On modifie le parent

Astuce pour comprendre

Pense toujours en mode arbre :

Parent ├── Enfant 1 ├── Enfant 2 └── Enfant 3

En JavaScript, tu peux naviguer :

• 🔼 Vers le haut (parent)

• 🔽 Vers le bas (enfants)

• ↔️ Sur le côté (frères)

---

• MDN Web Docs – Manipuler le DOM

• MDN Web Docs – Fetch API

• JSONPlaceholder — pour tester des fausses APIs