Manipuler les éléments de la page

Pour manipuler les éléments de la page, il faut avoir compris les bases du DOM, puis apprendre une série de fonctions qui permettent de sélectionner les éléments de la page.

Une page faite de noeuds
Le navigateur charge la page html, l’analyse pour construire sa structure (en corrigeant à la volée les erreurs de code) puis jette le document de base pour ne plus regarder que cette structure qui représente ce qu’il a compris du code qu’il a reçu. C’est ce qu’on appelle de DOM pour Document Object Model.
Le DOM est donc une structure arborescente faites de noeuds.

Un noeud est basiquement un tag. Chaque tag possède possiblement des attributs (un id, des classes, un href pour un lien, un src pour une image, etc.), un contenu (du texte) et des enfants, c’est à dire d’autres tags, qui sont eux-mêmes des noeuds. Et ainsi de suite.
On peut accéder à chacun de ces noeuds à travers javascript, et modifier librement et les attributs, et le contenu, et les enfants.

Sélectionner les éléments, comme en CSS

Pour modifier une page, on va sélectionner un ou plusieurs noeuds dans la page, et appliquer une série de transformations, comme par exemple modifier ses attributs, le déplacer dans la page, lui ajouter des noeuds, etc.

Les principaux outils pour ce faire sont querySelector().
Voici un exemple :

let titre = document.querySelector('h1');

Ce code permet de sélectionner dans la page le premier tag h1. Un seul, le premier, sera sélectionné et stocké dans la variable tuc. Il est possible à partir de là de manipuler cet élément.

Par exemple :

// changer le contenu de l'élément
titre.textContent = 'Hello world!';
// changer la couleur du fond
titre.style.backgroundColor = "red";
// ajouter une classe
titre.classList.add("actuel");

Pour sélectionner plusieurs éléments, on utilisera querySelectorAll().
Le résultat est une liste d’éléments, un peu plus difficile à manipuler, car il faut passer par une boucle pour atteindre les éléments un par un.

let liste = document.querySelectorAll('div');
// changer la couleur de fond de tous les éléments
liste.forEach(function (elem) {
   elem.style.backgroundColor = "red";
})