DevTools - ClicAndCode

Ajouter un écouteur d'événement

Facile

bouton.addEventListener('click', () => {
  console.log('Bouton cliqué!');
});

Créer et ajouter un élément

Intermédiaire

const nouvelElement = document.createElement('p');
nouvelElement.textContent = 'Nouveau paragraphe.';
document.body.appendChild(nouvelElement);

Empêcher le comportement par défaut

Avancé

lien.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Navigation empêchée.');
});

Gérer les classes CSS

Intermédiaire

element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('highlight');

Modifier le contenu HTML

Facile

element.innerHTML = '<strong>Texte important</strong>';

Modifier le style d'un élément

Facile

element.style.color = 'blue';
element.style.fontSize = '16px';

Obtenir l'objet événement

Intermédiaire

bouton.addEventListener('click', (event) => {
  console.log(event.target); // L'élément cliqué
});

Sélectionner plusieurs éléments

Facile

const tousLesBoutons = document.querySelectorAll('button');

Sélectionner un élément avec querySelector

Facile

const premierItem = document.querySelector('.list-item');

Sélectionner un élément par ID

Facile

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

📚 Cheatsheet