Questions d'entretien pour développeur Frontend Junior : Bases HTML, CSS et JavaScript

Introduction

Ce guide complet contient 32 questions d'entretien soigneusement sélectionnées, couvrant les principes fondamentaux du développement frontend : HTML, CSS et JavaScript. Ce sont les questions que les développeurs frontend juniors rencontrent réellement lors des entretiens de 2024-2025. Chaque question comprend une réponse approfondie, une évaluation de la rareté et une note de difficulté basées sur l'analyse de centaines d'entretiens réels provenant de grandes entreprises technologiques et de startups.

Il s'agit de la partie 1 de notre guide d'entretien complet. Pour les questions sur React, les outils de construction, l'optimisation des performances, le débogage, l'accessibilité, les tests et les compétences générales, consultez la partie 2 : React, outils et sujets avancés.

Fondamentaux HTML (7 Questions)

1. Que sont les éléments HTML sémantiques et pourquoi sont-ils importants ?

Réponse : Les éléments HTML sémantiques décrivent clairement leur signification et leur objectif aux navigateurs et aux développeurs. Les exemples incluent <header>, <nav>, <main>, <article>, <section>, <aside> et <footer>. Ils sont importants car ils améliorent l'accessibilité pour les lecteurs d'écran et les technologies d'assistance, améliorent le référencement en aidant les moteurs de recherche à comprendre la structure du contenu et rendent le code plus maintenable et lisible. Contrairement aux éléments génériques <div> et <span> qui ne fournissent aucun contexte, les éléments sémantiques communiquent le rôle et la signification du contenu.

Rareté : Courant Difficulté : Facile

2. Expliquez la différence entre les éléments en ligne, de bloc et en ligne-bloc

Réponse :

• Les éléments de bloc commencent sur une nouvelle ligne et occupent toute la largeur disponible (par exemple, <div>, <p>, <h1>). Vous pouvez définir les propriétés de largeur et de hauteur.
• Les éléments en ligne restent sur la même ligne et n'occupent que la largeur nécessaire (par exemple, <span>, <a>, <strong>). Vous ne pouvez pas définir la largeur ou la hauteur.
• Les éléments en ligne-bloc restent en ligne mais vous permettent de définir la largeur et la hauteur comme les éléments de bloc. Cela combine le flux en ligne avec les capacités de dimensionnement du bloc.

Rareté : Courant Difficulté : Facile

3. Que sont les éléments vides (auto-fermants) en HTML ?

Réponse : Les éléments vides sont des éléments HTML qui n'ont pas de balises de fermeture et ne peuvent pas contenir de contenu. Les exemples courants incluent : <img>, <br>, <hr>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed> et <source>. Ces éléments sont complets avec juste leur balise d'ouverture et leurs attributs. Par exemple, <img src="photo.jpg" alt="description"> n'a pas besoin d'une balise de fermeture </img>.

Rareté : Courant Difficulté : Facile

4. Comment rendre un site web accessible ? Quels attributs HTML améliorent l'accessibilité ?

Réponse : Pour rendre les sites web accessibles :

• Utilisez des éléments HTML sémantiques (<nav>, <main>, <header>, <footer>)
• Fournissez des attributs alt pour toutes les images décrivant leur contenu
• Maintenez une hiérarchie de titres appropriée (H1-H6) sans sauter de niveaux
• Étiquetez les entrées de formulaire avec des éléments <label> en utilisant l'attribut for
• Assurez l'accessibilité au clavier avec un ordre de tabulation approprié
• Utilisez les attributs ARIA lorsque le HTML sémantique n'est pas suffisant : aria-label, aria-describedby, aria-hidden, aria-live
• Ajoutez des attributs role pour les widgets complexes
• Assurez un contraste de couleurs suffisant (4,5:1 pour le texte normal)
• Rendez les éléments interactifs focalisables et fournissez des indicateurs de focus visibles

Rareté : Courant Difficulté : Moyenne

5. Expliquez la différence entre les méthodes GET et POST dans les formulaires

Réponse :

• GET : Ajoute les données du formulaire à l'URL sous forme de paramètres de requête, rendant les données visibles dans le navigateur. A des limitations de longueur (~2000 caractères), peut être mis en cache et mis en signet, non sécurisé pour les données sensibles. Utilisé pour récupérer des données où la requête ne modifie pas l'état du serveur (recherches, filtres).
• POST : Envoie les données dans le corps de la requête, non visible dans l'URL. Pas de restrictions de longueur, ne peut pas être mis en cache par défaut, plus sécurisé pour les informations sensibles. Utilisé pour soumettre des données qui modifient l'état du serveur (formulaires de connexion, téléchargements de fichiers, création d'enregistrements).

Exemple : Les formulaires de recherche utilisent généralement GET afin que les résultats puissent être mis en signet, tandis que les formulaires de connexion utilisent POST pour masquer les informations d'identification.

Rareté : Courant Difficulté : Facile-Moyenne

6. Quel est le but de la balise <meta> ?

Réponse : La balise <meta> fournit des métadonnées sur le document HTML qui ne sont pas affichées sur la page, mais qui sont utilisées par les navigateurs, les moteurs de recherche et d'autres services web. Les utilisations courantes incluent :

• Encodage des caractères : <meta charset="UTF-8">
• Paramètres de la fenêtre d'affichage pour la conception responsive : <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Descriptions SEO : <meta name="description" content="Description de la page">
• Informations sur l'auteur : <meta name="author" content="Nom">
• Mots-clés (moins pertinents maintenant) : <meta name="keywords" content="motclé1, motclé2">

Rareté : Courant Difficulté : Facile

7. Quelle est la différence entre <script>, <script async> et <script defer> ?

Réponse :

• <script> régulier : Bloque l'analyse HTML pendant que le script est téléchargé et exécuté. Le rendu de la page s'arrête jusqu'à ce que le script soit terminé.
• <script async> : Télécharge le script en parallèle avec l'analyse HTML, mais s'exécute immédiatement lorsqu'il est prêt (bloquant potentiellement l'analyse). L'ordre d'exécution n'est pas garanti. Bon pour les scripts indépendants comme l'analyse.
• <script defer> : Télécharge en parallèle, mais s'exécute uniquement après la fin de l'analyse HTML, en conservant l'ordre des scripts. Idéal pour les scripts qui dépendent du DOM ou d'autres scripts.

Meilleure pratique : Placez <script defer> dans le <head> pour des performances optimales tout en assurant un ordre d'exécution approprié.

Rareté : Peu courant Difficulté : Moyenne

Fondamentaux CSS (10 Questions)

8. Expliquez le modèle de boîte CSS

Réponse : Le modèle de boîte CSS décrit comment les éléments sont rendus avec quatre composants (de l'intérieur vers l'extérieur) :

1. Contenu : Le contenu réel (texte, images)
2. Rembourrage (Padding) : Espace entre le contenu et la bordure (à l'intérieur)
3. Bordure (Border) : La bordure entourant le rembourrage
4. Marge (Margin) : Espace à l'extérieur de la bordure (entre les éléments)

La propriété box-sizing affecte les calculs :

• box-sizing: content-box (par défaut) : La largeur/hauteur s'applique uniquement au contenu ; le rembourrage et la bordure sont ajoutés
• box-sizing: border-box : La largeur/hauteur inclut le contenu + le rembourrage + la bordure (plus intuitif)

Exemple : Avec box-sizing: border-box, un élément avec width: 100px; padding: 10px; border: 2px; reste exactement à 100px de large.

Rareté : Courant Difficulté : Facile-Moyenne

9. Expliquez la spécificité CSS et comment elle fonctionne

Réponse : La spécificité CSS détermine quels styles sont appliqués lorsque plusieurs règles ciblent le même élément. La spécificité est calculée en comptant les sélecteurs :

• Styles en ligne : 1000 points
• IDs : 100 points chacun
• Classes, attributs, pseudo-classes : 10 points chacun
• Éléments, pseudo-éléments : 1 point chacun

Exemples :

• #nav .button = 110 (1 ID + 1 classe)
• .header .nav a = 21 (2 classes + 1 élément)
• div p = 2 (2 éléments)

Lorsque la spécificité est égale, la dernière règle gagne (cascade). !important écrase tout, mais doit être évité. Meilleure pratique : Utilisez des classes pour le style, évitez les IDs et !important.

Rareté : Courant Difficulté : Moyenne

10. Qu'est-ce que Flexbox et quand l'utiliseriez-vous ?

Réponse : Flexbox est un système de mise en page unidimensionnel permettant d'organiser les éléments le long d'un seul axe (ligne ou colonne).

Propriétés du parent (conteneur flex) :

• display: flex - active flexbox
• flex-direction - row, column, row-reverse, column-reverse
• justify-content - alignement le long de l'axe principal (center, space-between, space-around)
• align-items - alignement le long de l'axe transversal (center, flex-start, flex-end, stretch)
• flex-wrap - contrôle le retour à la ligne (nowrap, wrap)

Propriétés de l'enfant (élément flex) :

• flex-grow - combien l'élément grandit par rapport aux autres
• flex-shrink - combien l'élément rétrécit
• flex-basis - taille initiale avant de grandir/rétrécir
• align-self - remplace align-items pour un élément individuel

Utilisez Flexbox pour : Les barres de navigation, les mises en page de cartes, le centrage des éléments, la répartition uniforme de l'espace, l'alignement des éléments dans les conteneurs.

Rareté : Courant Difficulté : Moyenne

11. Qu'est-ce que CSS Grid et en quoi diffère-t-il de Flexbox ?

Réponse : CSS Grid est un système de mise en page bidimensionnel permettant de créer des mises en page complexes avec des lignes ET des colonnes simultanément.

Différences clés :

• Grid : Bidimensionnel (lignes + colonnes), idéal pour les mises en page de pages
• Flexbox : Unidimensionnel (axe unique), idéal pour les composants

Propriétés Grid :

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 colonnes */
  grid-template-rows: 100px auto 50px;
  grid-gap: 20px; /* ou gap */
}

Quand utiliser :

• Grid : Mises en page générales, conceptions de type magazine, structures de grille complexes
• Flexbox : Barres de navigation, cartes, composants dans les cellules de la grille
• Les deux ensemble : Grid pour la macro mise en page, Flexbox pour les micro mises en page

Rareté : Courant Difficulté : Moyenne

12. Comment centrer un div horizontalement et verticalement ?

Réponse :

Approches modernes (préférées) :

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

Approches héritées :

/* Positionnement absolu */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Marge automatique (horizontal uniquement, nécessite une largeur) */
.child {
  margin: 0 auto;
  width: 300px;
}

Flexbox et Grid sont désormais les solutions standard, car elles sont plus propres et plus flexibles.

Rareté : Courant Difficulté : Facile-Moyenne

13. Expliquez le positionnement CSS : static, relative, absolute, fixed et sticky

Réponse :

• Static (par défaut) : Flux de document normal, pas de positionnement spécial
• Relative : Positionné par rapport à sa position normale à l'aide de top/right/bottom/left. L'espace d'origine dans le flux de document est conservé. Souvent utilisé comme contexte de positionnement pour les enfants absolus.
• Absolute : Supprimé du flux, positionné par rapport à l'ancêtre positionné le plus proche (ou à la fenêtre d'affichage si aucun). N'affecte pas les autres éléments.
• Fixed : Supprimé du flux, positionné par rapport à la fenêtre d'affichage. Reste en place lors du défilement.
• Sticky : Hybride de relative et fixed. Agit comme relative jusqu'au seuil de défilement, puis devient fixed. Utile pour les en-têtes collants qui commencent dans le flux.

Exemple : Une navigation qui devient fixe après le défilement utilise position: sticky; top: 0;

Rareté : Courant Difficulté : Moyenne

14. Quelle est la différence entre display: none, visibility: hidden et opacity: 0 ?

Réponse :

• display: none : Élément complètement supprimé du flux de document, ne prend pas de place, n'est pas accessible aux lecteurs d'écran, pas d'événements de pointeur
• visibility: hidden : Élément invisible mais conserve l'espace dans la mise en page, toujours dans le DOM, n'est pas accessible aux lecteurs d'écran, pas d'événements de pointeur
• opacity: 0 : Élément invisible mais conserve l'espace, toujours dans le DOM, TOUJOURS accessible aux lecteurs d'écran, REÇOIT TOUJOURS les événements de pointeur

Cas d'utilisation :

• display: none - basculer la visibilité (modales, menus déroulants)
• visibility: hidden - maintenir la mise en page tout en masquant
• opacity: 0 - animations de fondu, en gardant l'élément interactif

Rareté : Courant Difficulté : Facile-Moyenne

15. Que sont les pseudo-classes et les pseudo-éléments CSS ? Fournissez des exemples.

Réponse :

Pseudo-classes (un seul deux-points) - Sélectionner des éléments en fonction de l'état ou de la position :

a:hover { color: blue; }          /* survol de la souris */
input:focus { border: 2px solid blue; }  /* focus clavier */
li:nth-child(odd) { background: #eee; }  /* éléments de liste impairs */
button:disabled { opacity: 0.5; }  /* état désactivé */

Autres exemples : :active, :checked, :first-child, :last-child, :nth-of-type()

Pseudo-éléments (double deux-points) - Styliser des parties spécifiques ou insérer du contenu :

p::first-line { font-weight: bold; }  /* première ligne du paragraphe */
p::first-letter { font-size: 2em; }   /* lettrine */
.icon::before { content: "→"; }        /* insérer du contenu */
input::placeholder { color: gray; }    /* texte de l'espace réservé */

Les pseudo-éléments sont parfaits pour les éléments décoratifs sans ajouter de HTML.

Rareté : Courant Difficulté : Moyenne

16. Comment créez-vous des mises en page responsives ? Expliquez les media queries.

Réponse : Les mises en page responsives s'adaptent à différentes tailles d'écran en utilisant :

Media Queries :

/* Approche mobile first (recommandée) */
.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container { width: 750px; }  /* Tablette */
}

@media screen and (min-width: 1024px) {
  .container { width: 960px; }  /* Bureau */
}

Points de rupture courants :

• 320px : Petit mobile
• 768px : Tablette
• 1024px : Bureau
• 1440px : Grand bureau

Autres techniques responsives :

• Mises en page fluides (pourcentages, unités vw/vh)
• Flexbox et Grid flexibles
• Images responsives (max-width: 100%, attribut srcset)
• Requêtes min-width (mobile-first) vs max-width (desktop-first)

Rareté : Courant Difficulté : Moyenne

17. Qu'est-ce que z-index et comment ça marche ?

Réponse : z-index contrôle l'ordre d'empilement des éléments positionnés (relative, absolute, fixed, sticky) le long de l'axe z (avant vers arrière).

Points clés :

• Fonctionne uniquement sur les éléments positionnés (pas static)
• Les valeurs plus élevées apparaissent devant
• Peut utiliser des valeurs négatives
• La valeur par défaut est auto (effectivement 0)
• Crée un "contexte d'empilement" qui affecte la façon dont les enfants s'empilent

Piège courant :

.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; }

L'enfant avec z-index 9999 ne peut pas apparaître au-dessus d'un autre élément avec z-index 2 qui se trouve en dehors du contexte d'empilement du parent.

Rareté : Courant Difficulté : Moyenne

Fondamentaux JavaScript (15 Questions)

18. Expliquez la différence entre var, let et const

Réponse :

• var : Portée de fonction, hissé et initialisé avec undefined, peut être redéclaré, largement obsolète dans le code moderne
• let : Portée de bloc, hissé mais dans la zone morte temporaire (TDZ) jusqu'à la déclaration, ne peut pas être redéclaré dans la même portée
• const : Portée de bloc, hissé mais dans TDZ, doit être initialisé lors de la déclaration, ne peut pas être réaffecté (mais le contenu de l'objet/tableau peut être muté)

Meilleures pratiques :

• Utilisez const par défaut
• Utilisez let lorsque vous avez besoin de réaffecter
• N'utilisez jamais var dans JavaScript moderne

Exemple :

const name = "Alice";     // Ne peut pas être réaffecté
let count = 0;            // Peut être réaffecté
count = 1;                // OK
name = "Bob";             // Erreur!

const user = { age: 25 };
user.age = 26;            // OK - mutation de la propriété de l'objet
user = {};                // Erreur - réaffectation

Rareté : Courant Difficulté : Facile

19. Que sont les fermetures (closures) et fournissez un exemple pratique ?

Réponse : Une fermeture est lorsqu'une fonction interne a accès aux variables de la portée de sa fonction externe (englobante), même après que la fonction externe est revenue. La fonction interne "se ferme sur" ces variables.

Exemple :

function createCounter() {
  let count = 0;  // Variable privée
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

La fonction interne maintient l'accès à count même si createCounter a fini de s'exécuter. Cela permet la confidentialité des données - count ne peut pas être consulté directement de l'extérieur.

Cas d'utilisation : Confidentialité des données, fabriques de fonctions, rappels, modèles de modules, gestionnaires d'événements

Rareté : Courant Difficulté : Moyenne

20. Expliquez == vs === en JavaScript

Réponse :

• == (égalité lâche) : Effectue une conversion de type avant la comparaison, convertit les types pour qu'ils correspondent
• === (égalité stricte) : Vérifie à la fois la valeur ET le type, pas de conversion de type

Exemples :

5 == '5'       // true (chaîne convertie en nombre)
5 === '5'      // false (types différents)

null == undefined   // true (cas spécial)
null === undefined  // false (types différents)

0 == false     // true (les deux convertis)
0 === false    // false (nombre vs booléen)

Meilleure pratique : Utilisez toujours === et !== pour éviter les bogues inattendus dus à la conversion de type.

Rareté : Courant Difficulté : Facile

21. Qu'est-ce que le hoisting en JavaScript ?

Réponse : Le hoisting est le comportement de JavaScript consistant à déplacer les déclarations de variables et de fonctions vers le haut de leur portée pendant la phase de compilation, avant l'exécution du code.

Différents comportements de hoisting :

console.log(x);  // undefined (hissé, initialisé)
var x = 5;

console.log(y);  // ReferenceError (hissé mais dans TDZ)
let y = 5;

sayHello();      // "Hello!" (fonction entièrement hissée)
function sayHello() {
  console.log("Hello!");
}

sayHi();         // TypeError (pas une fonction)
var sayHi = function() {
  console.log("Hi!");
};

Points clés :

• Les déclarations var sont hissées et initialisées avec undefined
• let/const sont hissées mais restent non initialisées (Temporal Dead Zone)
• Les déclarations de fonctions sont entièrement hissées (y compris l'implémentation)
• Les expressions de fonctions ne sont pas entièrement hissées

Rareté : Courant Difficulté : Moyenne

22. Expliquez le mot-clé this et comment il diffère dans les fonctions fléchées

Réponse : this fait référence au contexte dans lequel une fonction est exécutée. Sa valeur dépend de la façon dont la fonction est appelée.

Fonctions régulières :

const obj = {
  name: "John",
  greet: function() {
    console.log(this.name);  // "John"
  }
};
obj.greet();  // this = obj

const greet = obj.greet;
greet();  // this = undefined (mode strict) ou window

Fonctions fléchées :

const obj = {
  name: "John",
  greet: () => {
    console.log(this.name);  // undefined
  }
};
obj.greet();  // this = portée lexicale (contexte englobant)

Différences clés :

• Fonctions régulières : this déterminé par le site d'appel
• Fonctions fléchées : this hérité lexicalement de la portée englobante
• Les fonctions fléchées n'ont pas leur propre this, arguments ou super

Cas d'utilisation : Les fonctions fléchées sont idéales pour les rappels où vous souhaitez conserver le this externe :

class Timer {
  start() {
    setTimeout(() => {
      console.log(this);  // Instance de Timer (lexicale)
    }, 1000);
  }
}

Rareté : Courant Difficulté : Moyenne-Difficile

23. Que sont les littéraux de gabarit (template literals) et quels sont leurs avantages ?

Réponse : Les littéraux de gabarit sont des littéraux de chaîne utilisant des backticks (`) qui prennent en charge l'interpolation de chaînes et les chaînes multilignes.

Fonctionnalités :

const name = "Alice";
const age = 25;

// Interpolation de chaîne
const message = `Hello, my name is ${name} and I'm ${age} years old.`;

// Chaînes multilignes
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// Évaluation d'expression
const price = `Total: $${(quantity * unitPrice).toFixed(2)}`;

Avantages :

• Syntaxe plus propre que la concaténation de chaînes
• Pas besoin de \n pour les sauts de ligne
• Peut intégrer n'importe quelle expression JavaScript avec ${}
• Mieux pour la génération HTML/CSS

Rareté : Courant Difficulté : Facile

24. Expliquez les Promesses et leurs trois états

Réponse : Une Promesse représente l'achèvement (ou l'échec) éventuel d'une opération asynchrone et sa valeur résultante.

Trois états :

1. Pending : État initial, opération non terminée
2. Fulfilled : Opération terminée avec succès
3. Rejected : Opération échouée

Exemple :

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve({ data: "User info" });
    } else {
      reject(new Error("Failed to fetch"));
    }
  }, 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Done"));

Avantages par rapport aux rappels :

• Évite l'enfer des rappels
• Chaînable avec .then()
• Meilleure gestion des erreurs avec .catch()
• Peut utiliser Promise.all() pour les opérations parallèles

Rareté : Courant Difficulté : Moyenne

25. Qu'est-ce que async/await et comment améliore-t-il la lisibilité du code ?

Réponse : async/await est un sucre syntaxique construit sur les Promesses qui rend le code asynchrone plus semblable à du code synchrone.

Exemple :

// Avec les Promesses (plus difficile à lire)
function fetchUserData() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => {
      return fetch(`/api/posts/${data.id}`);
    })
    .then(response => response.json())
    .catch(error => console.error(error));
}

// Avec async/await (plus propre)
async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    
    const postsResponse = await fetch(`/api/posts/${user.id}`);
    const posts = await postsResponse.json();
    
    return posts;
  } catch (error) {
    console.error(error);
  }
}

Points clés :

• La fonction async renvoie toujours une Promesse
• await met en pause l'exécution jusqu'à ce que la Promesse soit résolue
• Utilisez try/catch pour la gestion des erreurs
• Rend les opérations séquentielles plus claires
• Gestion des erreurs plus naturelle que .catch()

Rareté : Courant Difficulté : Moyenne

26. Expliquez la boucle d'événements (Event Loop) et comment JavaScript gère les opérations asynchrones

Réponse : JavaScript est monothread mais gère les opérations asynchrones grâce au mécanisme de la boucle d'événements.

Composants :

1. Pile d'appels (Call Stack) : Exécute le code synchrone (LIFO)
2. API Web : Gèrent les opérations asynchrones (setTimeout, fetch, événements DOM)
3. File d'attente de rappels (Callback Queue/Task Queue) : Contient les rappels des API Web
4. File d'attente de microtâches : Contient les rappels de Promesses (priorité plus élevée)
5. Boucle d'événements : Déplace les tâches des files d'attente vers la pile d'appels lorsque la pile est vide

Ordre d'exécution :

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Output: 1, 4, 3, 2
// Explanation:
// - Sync code (1, 4) runs first
// - Microtasks (Promise) run before macrotasks
// - Macrotasks (setTimeout) run last

Ordre d'exécution : Pile d'appels → File d'attente de microtâches → File d'attente de rappels (Macrotâches)

Rareté : Courant Difficulté : Difficile

27. Comment sélectionnez-vous et manipulez-vous les éléments DOM ?

Réponse :

Méthodes de sélection :

// Moderne (préféré)
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');
const firstItem = document.querySelector('.list-item');

// Hérité (toujours valide)
const elem = document.getElementById('myId');
const elems = document.getElementsByClassName('myClass');
const tags = document.getElementsByTagName('div');

Manipulation :

// Contenu
element.textContent = 'Nouveau texte';
element.innerHTML = '<span>Contenu HTML</span>';

// Style
element.style.color = 'blue';
element.style.backgroundColor = '#eee';

// Classes
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('active');

// Attributs
element.setAttribute('data-id', '123');
element.getAttribute('data-id');

// Création d'éléments
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello';
document.body.appendChild(newDiv);

Rareté : Courant Difficulté : Facile

28. Expliquez la délégation d'événements et pourquoi elle est utile

Réponse : La délégation d'événements consiste à attacher un seul écouteur d'événements à un élément parent au lieu de plusieurs écouteurs à des éléments enfants, en tirant parti du bouillonnement d'événements.

Sans délégation (inefficace) :

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

Avec délégation (efficace) :

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

Avantages :

• Meilleures performances : Un seul écouteur vs plusieurs
• Fonctionne avec les éléments dynamiques : Gère automatiquement les éléments ajoutés ultérieurement
• Moins d'utilisation de la mémoire : Moins d'écouteurs d'événements
• Code plus propre : Gestion centralisée des événements

Cas d'utilisation : Listes où les éléments peuvent être ajoutés/supprimés dynamiquement (listes de tâches, paniers d'achat, sections de commentaires)

Rareté : Courant Difficulté : Moyenne

29. Qu'est-ce que le bouillonnement d'événements (event bubbling) ? Comment arrêtez-vous la propagation ?

Réponse : Le bouillonnement d'événements se produit lorsqu'un événement déclenché sur un élément enfant "remonte" à travers ses ancêtres jusqu'à la racine du document.

Trois phases :

1. Phase de capture : L'événement descend de la fenêtre vers la cible
2. Phase cible : L'événement atteint l'élément cible
3. Phase de bouillonnement : L'événement remonte de la cible à la fenêtre (par défaut)

Exemple :

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', (e) => {