Le DOM et les événements

Ce que tu vas apprendre

• Sélectionner un élément de la page et modifier son contenu et ses classes.
• Créer et ajouter de nouveaux éléments.
• Réagir à un clic ou à l'envoi d'un formulaire.

Le DOM

Quand le navigateur lit ton HTML, il construit un arbre d'objets : le DOM (Document Object Model). Chaque balise devient un objet que JavaScript peut lire et modifier.

Le point d'entrée est l'objet document. Prenons cette page :

<h1 id="titre">Mes recettes</h1>
<ul id="liste">
  <li class="recette">Crêpes</li>
</ul>
<button id="ajouter">Ajouter</button>
<script src="script.js" defer></script>

Sélectionner des éléments

querySelector prend un sélecteur CSS et renvoie le premier élément correspondant, ou null. querySelectorAll renvoie tous les éléments.

const titre = document.querySelector('#titre')
const liste = document.querySelector('#liste')
const recettes = document.querySelectorAll('.recette')

console.log(recettes.length)  // 1

Les sélecteurs sont ceux du CSS : #id, .classe, balise.

Modifier le contenu

La propriété textContent lit ou remplace le texte d'un élément.

titre.textContent = 'Mes recettes préférées'

Modifier l'apparence et les attributs

Pour changer le style, ajoute ou retire une classe CSS plutôt que d'écrire du style en JavaScript.

titre.classList.add('important')
titre.classList.remove('important')
titre.classList.toggle('important')   // ajoute si absente, retire sinon

Les attributs se manipulent avec setAttribute et getAttribute.

const lien = document.querySelector('a')
lien.setAttribute('href', '/recettes')

Créer des éléments

Trois étapes : créer, remplir, ajouter.

const li = document.createElement('li')
li.textContent = 'Ratatouille'
liste.append(li)

L'élément n'apparaît qu'une fois ajouté à la page avec append. Pour retirer un élément : li.remove().

Réagir à un événement

Un événement est un signal envoyé par le navigateur : un clic, une touche, l'envoi d'un formulaire. Tu l'écoutes avec addEventListener, qui prend le nom de l'événement et une fonction à exécuter.

const bouton = document.querySelector('#ajouter')

bouton.addEventListener('click', () => {
  const li = document.createElement('li')
  li.textContent = 'Nouvelle recette'
  liste.append(li)
})

Chaque clic sur le bouton ajoute une ligne à la liste.

L'objet événement

La fonction reçoit en paramètre un objet qui décrit l'événement. event.target est l'élément touché.

liste.addEventListener('click', (event) => {
  console.log(event.target.textContent)
})

Ici, un seul écouteur sur la liste réagit au clic sur n'importe quel <li>, même ajouté plus tard. On appelle ça la délégation d'événements.

Les formulaires

Par défaut, un formulaire envoyé recharge la page. event.preventDefault() annule ce comportement pour que tu traites les données toi-même.

<form id="formulaire">
  <input id="nom" type="text" placeholder="Nom de la recette">
  <button type="submit">Ajouter</button>
</form>

const formulaire = document.querySelector('#formulaire')

formulaire.addEventListener('submit', (event) => {
  event.preventDefault()
  const nom = document.querySelector('#nom').value.trim()
  if (nom === '') return
  console.log(nom)
})

value donne le texte saisi et trim() retire les espaces autour.

À retenir

• Le DOM est l'arbre d'objets que le navigateur construit à partir du HTML.
• querySelector et querySelectorAll sélectionnent avec un sélecteur CSS.
• textContent modifie le texte, classList gère les classes, createElement et append ajoutent des éléments.
• N'utilise pas innerHTML avec du texte venant d'un utilisateur.
• addEventListener('click', fonction) réagit à un événement.
• event.preventDefault() empêche l'envoi par défaut d'un formulaire.