Sélectionner et modifier

Dans un navigateur, la page HTML devient un arbre d'objets : le DOM (Document Object Model). JavaScript y accède par document.

Dans ce chapitre, chaque exercice fournit une page HTML ; ton code s'exécute comme un script placé en bas de cette page. Les branches HTML et CSS en donnent les bases.

Trouver un élément

const titre = document.querySelector("#titre");       // par id
const note = document.querySelector(".note");         // le premier de la classe
const liens = document.querySelectorAll("nav a");     // TOUS, dans une liste

Le sélecteur est exactement celui de CSS. querySelector renvoie null si rien ne correspond : la ligne suivante échoue alors avec « cannot read property ... of null ».

Modifier

titre.textContent = "Nouveau titre";   // le texte
note.classList.add("important");       // ajoute une classe
note.classList.remove("cachee");
note.classList.toggle("ouverte");      // ajoute ou retire
lien.setAttribute("href", "/aide");    // un attribut
bloc.style.display = "none";           // un style en ligne

className = "..." existe aussi, mais remplace toutes les classes de l'élément ; classList n'en touche qu'une.

Changer une classe plutôt que le style en ligne garde l'apparence dans le CSS, et le comportement dans le JavaScript : chacun son rôle.

Lire

titre.textContent;         // le texte
note.classList.contains("important");
champ.value;               // ce qui est saisi dans un champ