DOM & Browser

1 Sélectionner des éléments

// Un seul élément
document.getElementById('monId');            // par id
document.querySelector('.ma-classe');        // premier match CSS
document.querySelector('#id > .enfant');     // n'importe quel sélecteur CSS

// Plusieurs éléments (NodeList)
document.querySelectorAll('.item');          // tous les .item
document.querySelectorAll('li');             // toutes les <li>

const btn = document.querySelector('#monBouton');
btn.textContent = "Clic"; // TypeError si btn === null (élément absent)
// Toujours vérifier ou s'assurer que l'élément existe

2 Lire & modifier le contenu

const el = document.querySelector('#titre');

// Lire
el.textContent; // texte brut (sans HTML)
el.innerHTML;   // HTML complet

// Modifier
el.textContent = "Nouveau titre";         // texte seulement
el.innerHTML   = "<strong>Gras</strong>"; // peut injecter du HTML

// Attributs
el.getAttribute('href');
el.setAttribute('href', 'https://...');
el.removeAttribute('disabled');

// Ne jamais injecter du texte UTILISATEUR avec innerHTML
el.innerHTML = userInput; // XSS possible !
el.textContent = userInput; // ✅ sûr

3 Classes CSS

const el = document.querySelector('.carte');

el.classList.add('actif');          // ajoute
el.classList.remove('actif');       // supprime
el.classList.toggle('actif');       // ajoute si absent, supprime si présent
el.classList.contains('actif');     // true/false
el.classList.replace('old', 'new'); // remplace

4 Styles inline

el.style.color           = "red";
el.style.backgroundColor = "#161b22"; // camelCase !
el.style.display         = "none";    // cacher
el.style.display         = "block";   // montrer
el.style.display         = "";        // réinitialise au CSS de base

5 Événements

const btn = document.querySelector('#bouton');

// Méthode recommandée
btn.addEventListener('click', (event) => {
  console.log("Cliqué !", event.target);
});

// Événements courants
'click'            // clic souris
'input'            // changement dans un <input> (en temps réel)
'change'           // changement validé (select, checkbox)
'submit'           // soumission d'un formulaire
'keydown'          // touche appuyée
'mouseover'        // survol
'DOMContentLoaded' // page chargée (DOM prêt)

Empêcher le comportement par défaut :

form.addEventListener('submit', (e) => {
  e.preventDefault(); // empêche le rechargement de page
  // ton code...
});

6 Créer & insérer des éléments

// Créer
const li = document.createElement('li');
li.textContent = "Nouvel item";
li.classList.add('item');

// Insérer
document.querySelector('ul').appendChild(li);            // à la fin
el.insertAdjacentHTML('beforeend', '<p>Texte</p>');   // HTML direct

// Supprimer
li.remove();

7 localStorage

// Sauvegarder (toujours stringify les objets/tableaux)
localStorage.setItem('cle', JSON.stringify({ valeur: 42 }));

// Lire
const data = JSON.parse(localStorage.getItem('cle') || 'null');

// Supprimer
localStorage.removeItem('cle');
localStorage.clear(); // tout vider

localStorage.setItem('tab', [1, 2, 3]);               // stocke "1,2,3" (toString !)
localStorage.setItem('tab', JSON.stringify([1,2,3]));  // ✅ "[1,2,3]"

Résumé rapide