Manipuler le Web en JavaScript
Le DOM (Document Object Model) te permet de modifier le HTML avec JavaScript. Fetch permet de charger des données sans recharger la page ! 🚀
L'arbre DOM, côté rendu
Clique sur un nœud de l'arbre : l'élément correspondant s'illumine dans la page rendue.
document.querySelector('h1')
…
🌳 Le DOM
Sélectionner des Éléments
// Méthodes de sélection
document.getElementById('mon-id')
document.querySelector('.ma-classe')
document.querySelectorAll('div.card')
// Exemple
const title = document.querySelector('h1');
title.textContent = 'Nouveau titre';
title.style.color = 'red';Créer & Modifier
// Créer un élément
const div = document.createElement('div');
div.className = 'card bg-blue-500 p-4';
div.textContent = 'Hello !';
// Ajouter au DOM
document.body.appendChild(div);
// Supprimer
div.remove();Events (Événements)
button.addEventListener('click', (event) => {
console.log('Cliqué !');
event.preventDefault(); // Annuler comportement par défaut
});
// Events courants: click, submit, keypress, mouseover...🌐 Fetch API - AJAX Moderne
Charger des Données
// GET request
fetch('https://api.example.com/users')
.then(response => response.json())
.then(data => {
console.log(data);
// Afficher les users
})
.catch(error => {
console.error('Erreur:', error);
});
// Avec async/await (plus moderne)
async function getUsers() {
try {
const response = await fetch('/api/users');
const users = await response.json();
return users;
} catch (error) {
console.error('Erreur:', error);
}
}POST avec JSON
fetch('/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Alice',
email: 'alice@example.com'
})
})
.then(res => res.json())
.then(data => console.log('Créé:', data));⚠️ Gestion d'Erreurs
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => {
console.error('Oops:', error);
// Afficher message d'erreur à l'utilisateur
});Le voyage d'un fetch()
Avance étape par étape : requête, Promise, réponse JSON… jusqu'à la mise à jour du DOM.
…
🎮 Quiz DOM & Fetch
🔄
Prêt à tester tes connaissances ?
8 questions sur le DOM et Fetch API