Apprends Manipulation du DOM

Qu'est-ce que le DOM ?

Le Document Object Model (DOM) est une interface de programmation qui représente une page HTML sous forme d'arbre d'objets. Quand un navigateur charge un document HTML, il analyse le balisage et construit cette structure arborescente en mémoire. Chaque élément HTML, attribut et morceau de texte devient un nœud dans l'arbre.

html

document
  └── html
      ├── head
      │   └── title
      │       └── "My Page"
      └── body
          ├── h1
          │   └── "Hello World"
          └── p
              └── "Welcome to my site."

JavaScript peut lire et modifier chaque partie de cet arbre — changer du texte, mettre à jour des styles, ajouter de nouveaux éléments, supprimer des éléments existants et répondre aux interactions de l'utilisateur.

Le point d'entrée vers le DOM est l'objet document. Il représente la page HTML entière et fournit des méthodes pour trouver et manipuler des éléments :

javascript

console.log(document.title);       // The page title
console.log(document.body);        // The <body> element
console.log(document.documentElement); // The <html> element

Comprendre le DOM est essentiel pour rendre les pages web interactives. Chaque fois que tu cliques sur un bouton, que tu soumets un formulaire, ou que tu vois du contenu se mettre à jour dynamiquement sur un site web, le DOM est manipulé par JavaScript.

Sélectionner des éléments

Avant de pouvoir modifier un élément, tu dois le sélectionner. Le DOM fournit plusieurs méthodes pour cela :

getElementById() — sélectionne un seul élément par son attribut id :

javascript

const header = document.getElementById('main-title');

Retourne l'élément ou null si aucun élément avec cet id n'existe.

querySelector() — sélectionne le premier élément qui correspond à un sélecteur CSS :

javascript

const firstButton = document.querySelector('button');
const submitBtn = document.querySelector('#submit-btn');
const highlight = document.querySelector('.highlight');
const navLink = document.querySelector('nav a.active');

C'est la méthode de sélection la plus polyvalente car elle accepte n'importe quel sélecteur CSS valide — IDs, classes, types d'éléments, sélecteurs d'attributs, combinateurs, et plus encore.

querySelectorAll() — sélectionne tous les éléments qui correspondent à un sélecteur CSS :

javascript

const allButtons = document.querySelectorAll('button');
const items = document.querySelectorAll('.list-item');

Cela retourne une NodeList, qui est similaire à un tableau mais n'est pas un vrai tableau. Tu peux la parcourir avec forEach ou for...of, et accéder aux éléments par index :

javascript

allButtons.forEach(btn => console.log(btn.textContent));
console.log(allButtons[0]); // first button
console.log(allButtons.length); // number of matches

Il existe aussi des méthodes plus anciennes comme getElementsByClassName() et getElementsByTagName() qui retournent des collections vivantes — elles se mettent automatiquement à jour quand le DOM change. Cependant, querySelector et querySelectorAll sont généralement préférées pour leur flexibilité.

javascript

// These return live HTMLCollections:
const divs = document.getElementsByTagName('div');
const highlights = document.getElementsByClassName('highlight');

Modifier des éléments

Une fois que tu as sélectionné un élément, tu peux modifier son contenu, ses styles et ses attributs.

Changer le contenu textuel :

textContent — obtient ou définit le texte brut. Sécurisé — il n'analyse pas le HTML :
javascript
```
const heading = document.querySelector('h1');
heading.textContent = 'New Heading';
```
innerHTML — obtient ou définit le contenu HTML, y compris les balises :
javascript
```
const container = document.querySelector('#output');
container.innerHTML = '<strong>Bold</strong> text';
```
Avertissement de sécurité : N'utilise jamais innerHTML avec des données fournies par l'utilisateur. Cela peut créer des vulnérabilités de Cross-Site Scripting (XSS) car le navigateur exécutera toutes les balises <script> ou gestionnaires d'événements dans la chaîne de caractères. Utilise textContent pour les données utilisateur.

Changer les styles :

La propriété style te donne accès aux styles inline d'un élément. Les noms de propriétés CSS sont écrits en camelCase :

javascript

const box = document.querySelector('.box');
box.style.backgroundColor = 'blue';
box.style.fontSize = '20px';
box.style.border = '2px solid black';

Travailler avec les classes CSS est généralement mieux que les styles inline :

javascript

const element = document.querySelector('.card');
element.classList.add('active');       // Add a class
element.classList.remove('hidden');    // Remove a class
element.classList.toggle('expanded');  // Add if missing, remove if present
element.classList.contains('active');  // Check if class exists → true/false

Définir et obtenir des attributs :

javascript

const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');

console.log(link.getAttribute('href')); // 'https://example.com'

Créer et supprimer des éléments

JavaScript peut créer des éléments entièrement nouveaux et les ajouter à la page, ou supprimer des éléments existants.

Créer des éléments :

javascript

const newParagraph = document.createElement('p');
newParagraph.textContent = 'This paragraph was created by JavaScript.';
newParagraph.classList.add('dynamic');

À ce stade, l'élément existe en mémoire mais n'est pas encore sur la page. Tu dois l'insérer dans le DOM.

Ajouter des éléments à la page :

appendChild() — ajoute un élément enfant à la fin d'un parent :

javascript

const container = document.getElementById('content');
container.appendChild(newParagraph);

append() — comme appendChild, mais peut aussi accepter des chaînes de caractères et plusieurs arguments :
javascript
```
container.append(newParagraph, 'Some text', anotherElement);
```

insertBefore() — insère avant un élément enfant spécifique :

javascript

const reference = document.querySelector('#content p:first-child');
container.insertBefore(newParagraph, reference);

insertAdjacentHTML() — insère du HTML à une position spécifique par rapport à l'élément :

javascript

container.insertAdjacentHTML('beforeend', '<p>New content</p>');
// Positions: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'

Supprimer des éléments :

javascript

const toRemove = document.querySelector('.old-content');
toRemove.remove(); // Removes the element from the DOM

Astuce de performance : Quand tu ajoutes beaucoup d'éléments à la fois, utilise un DocumentFragment pour regrouper les modifications. Cela évite de déclencher un re-rendu de la page pour chaque élément :

javascript

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = 'Item ' + i;
  fragment.appendChild(li);
}
document.getElementById('big-list').appendChild(fragment);
// Only one re-render instead of 100!

Manipulation du DOM en action

html

<div id="app">
  <h2>Dynamic Content</h2>
  <ul id="list"></ul>
</div>

<script>
  const items = ['Learn HTML', 'Learn CSS', 'Learn JavaScript'];
  const list = document.getElementById('list');

  // Create and append list items
  items.forEach(function(text) {
    const li = document.createElement('li');
    li.textContent = text;
    li.style.padding = '4px 0';
    list.appendChild(li);
  });

  // Add a new item
  const newItem = document.createElement('li');
  newItem.textContent = 'Build a project!';
  newItem.style.fontWeight = 'bold';
  newItem.style.color = 'green';
  list.appendChild(newItem);

  // Modify the heading
  const heading = document.querySelector('#app h2');
  heading.style.color = 'navy';
  heading.textContent = 'My Learning Path';
</script>

Quelle méthode sélectionne le premier élément correspondant à un sélecteur CSS ?

Manipulation du DOM

Qu'est-ce que le DOM ?

Sélectionner des éléments

Modifier des éléments

Créer et supprimer des éléments

Manipulation du DOM en action

Prêt à pratiquer ?