Entretien Vanilla JS Débutant — DOM et Événements

Q: Quelle méthode retourne le PREMIER élément correspondant à un sélecteur CSS ?

Bonne réponse : document.querySelector(). querySelector() retourne le premier élément correspondant au sélecteur CSS. querySelectorAll() retourne tous les éléments correspondants sous forme de NodeList.

Q: Comment ajouter un écouteur d'événement sur un élément ?

Bonne réponse : element.addEventListener("click", fn). addEventListener(type, callback) est la méthode standard pour attacher un gestionnaire d'événement. Elle permet aussi d'ajouter plusieurs écouteurs sur le même élément.

Q: Quelle est la différence principale entre var et let ?

Bonne réponse : let a une portée de bloc, var a une portée de fonction. let a une portée de bloc (block scope) — elle n'existe que dans le bloc {} où elle est déclarée. var a une portée de fonction (function scope) et est remontée (hoisting) en haut de la fonction.

Q: Comment obtenir la valeur saisie dans un champ input ?

Bonne réponse : input.value. La propriété .value retourne la valeur actuelle d'un élément input, select ou textarea. C'est la propriété DOM standard pour lire ou modifier le contenu d'un champ de formulaire.

Q: Que fait classList.toggle("active") ?

Bonne réponse : Ajoute si absente, supprime si présente. classList.toggle("active") fonctionne comme un interrupteur : si la classe est absente elle l'ajoute, si elle est présente elle la supprime. Très utile pour les menus hamburger ou les accordéons.

Q: Quelle méthode sélectionne TOUS les éléments correspondant à un sélecteur CSS ?

Bonne réponse : document.querySelectorAll(). querySelectorAll() retourne une NodeList statique de tous les éléments correspondant au sélecteur. Il faut ensuite itérer dessus avec forEach() ou un for...of.

Q: Comment créer un nouvel élément HTML avec JavaScript ?

Bonne réponse : document.createElement("div"). document.createElement("tagName") crée un nouvel élément HTML en mémoire. L'élément n'est pas encore inséré dans le DOM — il faut ensuite utiliser appendChild() ou insertBefore().

Q: Que retourne typeof null en JavaScript ?

Bonne réponse : "object". typeof null retourne "object" — c'est un bug historique de JavaScript (présent depuis 1995) qui n'a jamais été corrigé pour des raisons de compatibilité. Pour vérifier si une valeur est null, utilisez val === null.

Q: Comment ajouter un élément enfant à un parent dans le DOM ?

Bonne réponse : parent.appendChild(child). appendChild(node) ajoute un nœud à la fin de la liste des enfants d'un élément parent. Si le nœud existe déjà dans le DOM, il est déplacé vers la nouvelle position.

Q: Quelle méthode convertit une chaîne JSON en objet JavaScript ?

Bonne réponse : JSON.parse(). JSON.parse(string) convertit une chaîne JSON valide en un objet JavaScript. L'opération inverse (objet → chaîne) s'effectue avec JSON.stringify().

Vanilla-Js Javascript-Natif Quiz-Vanilla-Js-Debutant Manipulation-Dom Evenements-Js Classlist Settimeout Questions-Entretien-Vanilla-Js Qcm-Vanilla-Js Apprendre-Javascript-Natif Javascript Front-End Es6 No-Framework

Débutant 🔀 Mixte 20 questions ⏱ 15 min

📝

Entretien Vanilla JS Débutant — DOM et Événements

20 questions Vanilla JS niveau débutant : sélecteurs DOM, manipulation d'éléments, événements, classList, setTimeout et méthodes de base. Idéal pour valider les fondamentaux du JavaScript natif avant un entretien.

20 questions ⏱ ~15 min Niveau Débutant

Publié/Développé par Mezgani Said

Développeur web full‑stack et formateur spécialisé en Angular, TypeScript et Node.js, il partage sur AngularForAll des ressources complètes pour les développeurs : tutoriels pratiques, guides pas‑à‑pas, outils gratuits, exercices, QCM techniques et retours d’expérience issus de projets réels (SaaS, micro‑frontends, architectures modulaires, applications d’entreprise).
Le site couvre l’ensemble de l’écosystème web : front‑end, intégration HTML/CSS, Composants réutilisables, SEO, back‑end, cloud, IA, CLI, productivité, bien‑être, outils web et métiers du digital.
Un espace pensé pour générer, apprendre, progresser et développer des projets modernes avec des bonnes pratiques professionnelles.

Banque de révision : les 31 questions corrigées

Voici l'intégralité des 31 questions de « Entretien Vanilla JS Débutant — DOM et Événements », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.

document.getElementById()
document.querySelector() (bonne réponse)
document.querySelectorAll()
document.getElementByClass()

Explication : querySelector() retourne le premier élément correspondant au sélecteur CSS. querySelectorAll() retourne tous les éléments correspondants sous forme de NodeList.

query = "chercher" + Selector = "sélecteur CSS"

element.on("click", fn)
element.addEvent("click", fn)
element.addEventListener("click", fn) (bonne réponse)
element.listen("click", fn)

Explication : addEventListener(type, callback) est la méthode standard pour attacher un gestionnaire d'événement. Elle permet aussi d'ajouter plusieurs écouteurs sur le même élément.

add + Event + Listener = addEventListenerListener

var est const, let est modifiable
let a une portée de bloc, var a une portée de fonction (bonne réponse)
var est plus rapide que let
Il n'y a aucune différence

Explication : let a une portée de bloc (block scope) — elle n'existe que dans le bloc {} où elle est déclarée. var a une portée de fonction (function scope) et est remontée (hoisting) en haut de la fonction.

let = limité au bloc, var = visible dans la fonction entière

input.value (bonne réponse)
input.text
input.content
input.data

Explication : La propriété .value retourne la valeur actuelle d'un élément input, select ou textarea. C'est la propriété DOM standard pour lire ou modifier le contenu d'un champ de formulaire.

input.value = la valeur du champ

Ajoute toujours la classe active
Supprime toujours la classe active
Ajoute si absente, supprime si présente (bonne réponse)
Vérifie si la classe est présente

Explication : classList.toggle("active") fonctionne comme un interrupteur : si la classe est absente elle l'ajoute, si elle est présente elle la supprime. Très utile pour les menus hamburger ou les accordéons.

toggle = bascule (comme un interrupteur on/off)

document.querySelector()
document.querySelectorAll() (bonne réponse)
document.getElements()
document.selectAll()

Explication : querySelectorAll() retourne une NodeList statique de tous les éléments correspondant au sélecteur. Il faut ensuite itérer dessus avec forEach() ou un for...of.

querySelectorAll → All = tous les éléments

document.newElement("div")
document.createElement("div") (bonne réponse)
document.buildElement("div")
new HTMLElement("div")

Explication : document.createElement("tagName") crée un nouvel élément HTML en mémoire. L'élément n'est pas encore inséré dans le DOM — il faut ensuite utiliser appendChild() ou insertBefore().

create = créer, Element = élément HTML

"null"
"undefined"
"object" (bonne réponse)
"boolean"

Explication : typeof null retourne "object" — c'est un bug historique de JavaScript (présent depuis 1995) qui n'a jamais été corrigé pour des raisons de compatibilité. Pour vérifier si une valeur est null, utilisez val === null.

Bug célèbre de JS : typeof null === "object" (pas corrigeable)

parent.addChild(child)
parent.appendChild(child) (bonne réponse)
parent.insertChild(child)
parent.push(child)

Explication : appendChild(node) ajoute un nœud à la fin de la liste des enfants d'un élément parent. Si le nœud existe déjà dans le DOM, il est déplacé vers la nouvelle position.

append = ajouter à la fin, Child = enfant

JSON.toString()
JSON.parse() (bonne réponse)
JSON.decode()
JSON.convert()

Explication : JSON.parse(string) convertit une chaîne JSON valide en un objet JavaScript. L'opération inverse (objet → chaîne) s'effectue avec JSON.stringify().

parse = analyser/interpréter la chaîne JSON

event.stop()
event.prevent()
event.preventDefault() (bonne réponse)
event.cancel()

Explication : event.preventDefault() annule l'action par défaut associée à l'événement. Par exemple, sur un formulaire cela empêche le rechargement de la page, sur un lien cela empêche la navigation.

prevent = empêcher, Default = comportement par défaut

Exécute fn toutes les 1000ms
Exécute fn une seule fois après 1000ms (bonne réponse)
Attend 1000 secondes puis arrête
Répète fn 1000 fois

Explication : setTimeout(fn, ms) exécute la fonction fn une seule fois après le délai spécifié en millisecondes. Pour une répétition, utilisez setInterval(fn, ms) à la place.

setTimeout = une seule fois | setInterval = répétition

array.size()
array.count
array.length (bonne réponse)
array.len()

Explication : array.length est une propriété (pas une méthode) qui retourne le nombre d'éléments dans un tableau. Elle est aussi utilisable sur les chaînes de caractères pour compter les lettres.

length est une propriété, pas une méthode — pas de parenthèses ()

array.push(item) (bonne réponse)
array.append(item)
array.add(item)
array.insert(item)

Explication : push() ajoute un ou plusieurs éléments à la fin du tableau et retourne la nouvelle longueur. L'opération inverse (suppression à la fin) est pop(). Pour le début : unshift() ajoute, shift() supprime.

push → fin | pop → retire de la fin | unshift → début | shift → retire du début

element.css.color = "red"
element.style.color = "red" (bonne réponse)
element.setStyle("color", "red")
element.css("color", "red")

Explication : element.style.propertyName donne accès aux styles CSS inline d'un élément. Les propriétés CSS avec tirets s'écrivent en camelCase : background-color devient backgroundColor.

element.style.color — les tirets CSS deviennent camelCase en JS

Retourne uniquement le texte sans balises
Permet de lire/écrire le contenu HTML d'un élément (bonne réponse)
Insère un élément après l'élément courant
Supprime définitivement le contenu

Explication : innerHTML permet de lire ou d'écrire le contenu HTML brut d'un élément, balises comprises. Attention : injecter du HTML non sanitisé expose à des failles XSS. Préférer textContent pour du texte simple.

innerHTML = HTML avec balises | textContent = texte brut (plus sécurisé)

array.has(val)
array.contains(val)
array.includes(val) (bonne réponse)
array.exists(val)

Explication : array.includes(value) retourne true si la valeur est présente dans le tableau, false sinon. La comparaison utilise SameValueZero (similaire à ===). Fonctionne aussi sur les chaînes de caractères.

includes → "est-ce que le tableau inclut cette valeur ?"

array.removeLast()
array.pop() (bonne réponse)
array.shift()
array.delete()

Explication : pop() supprime le dernier élément du tableau et le retourne. Le tableau est modifié en place (mutation). shift() fait la même chose mais sur le premier élément.

pop = retire de la fin (comme une pile LIFO) | shift = retire du début

for...in
for...of (bonne réponse)
foreach (sans méthode)
while avec index

Explication : for...of est la syntaxe moderne pour itérer sur les valeurs d'un tableau. for...in itère sur les clés/index et est déconseillé pour les tableaux car il peut inclure les propriétés héritées.

for...of = valeurs du tableau | for...in = clés d'objet (pas pour les tableaux)

Ajoute la classe active si absente
true si l'élément possède la classe active, false sinon (bonne réponse)
Supprime la classe active
Le nombre de classes de l'élément

Explication : classList.contains("className") vérifie si l'élément possède la classe spécifiée et retourne un booléen. Utile pour conditionner une action selon l'état d'un élément.

contains = "contient-il cette classe ?" → true/false

element.attribute("src")
element.getAttribute("src") (bonne réponse)
element.getAttr("src")
element.attr("src")

Explication : getAttribute("attrName") retourne la valeur de l'attribut spécifié. Pour modifier un attribut : setAttribute("name", "value"). Pour supprimer : removeAttribute("name").

get/set/removeAttribute — le trio standard pour les attributs HTML

array.combine(sep)
array.toString(sep)
array.join(sep) (bonne réponse)
array.merge(sep)

Explication : join(separator) joint tous les éléments du tableau en une chaîne avec le séparateur spécifié. Ex: ["a","b","c"].join("-") retourne "a-b-c". Sans argument, utilise la virgule par défaut.

join = relier les éléments avec un séparateur

stopInterval(id)
clearInterval(id) (bonne réponse)
cancelInterval(id)
interval.stop()

Explication : clearInterval(id) arrête un intervalle. setInterval retourne un identifiant numérique qu'il faut stocker : const id = setInterval(fn, ms). Pour les timeouts : clearTimeout(id).

clear + Interval = clearInterval | clear + Timeout = clearTimeout

Empêche le comportement par défaut du navigateur
Empêche la propagation de l'événement vers les éléments parents (bonne réponse)
Arrête tous les écouteurs d'événements de la page
Supprime l'élément du DOM

Explication : stopPropagation() arrête la "remontée" (bubbling) de l'événement dans l'arbre DOM. Sans elle, un click sur un enfant se propage aussi aux parents. À distinguer de preventDefault() qui empêche l'action par défaut.

stop + Propagation = stoppe la remontée | preventDefault = stoppe l'action

"6" (concaténation)
6 (addition)
"33" (concaténation) (bonne réponse)
NaN (erreur)

Explication : En JavaScript, l'opérateur + avec une chaîne et un nombre effectue une concaténation, pas une addition. "3" + 3 donne "33". Pour forcer l'addition : Number("3") + 3 = 6.

Si un opérande est une chaîne, + fait de la concaténation

element.delete()
element.remove() (bonne réponse)
document.delete(element)
element.destroy()

Explication : element.remove() supprime l'élément lui-même du DOM. C'est la méthode moderne (ES5+). L'ancienne méthode était parentNode.removeChild(element) qui nécessitait d'accéder au parent.

element.remove() = suppression directe | ancienne méthode : parent.removeChild(el)

null
undefined
Une NodeList vide (length = 0) (bonne réponse)
false

Explication : querySelectorAll() retourne toujours une NodeList, même vide. C'est différent de querySelector() qui retourne null si rien n'est trouvé. Vérifier avec nodeList.length > 0 avant d'itérer.

querySelectorAll → NodeList vide | querySelector → null si rien trouvé

img.src = "nouvelle-url.jpg"
img.setAttribute("src", "nouvelle-url.jpg")
Les deux sont correctes (bonne réponse)
img.set("src", "nouvelle-url.jpg")

Explication : Les deux syntaxes fonctionnent. img.src est une propriété IDL (reflet de l'attribut HTML) qui accepte une URL relative ou absolue. setAttribute() modifie directement l'attribut HTML. En pratique, on préfère img.src pour sa clarté.

img.src et setAttribute("src", ...) sont équivalentes pour les images

Un langage de programmation côté serveur
Une représentation en arbre du HTML permettant à JavaScript de le manipuler (bonne réponse)
Un framework JavaScript pour le rendu
Un serveur web intégré au navigateur

Explication : Le DOM est une interface de programmation qui représente le document HTML/XML sous forme d'arbre de nœuds. JavaScript peut lire et modifier cet arbre pour changer dynamiquement le contenu, la structure et le style de la page.

DOM = arbre de nœuds = interface entre HTML et JavaScript

String(num)
num.toString()
Les deux sont correctes (bonne réponse)
num.toStr()

Explication : String(num) et num.toString() convertissent toutes les deux un nombre en chaîne. String() est une fonction globale qui fonctionne même avec null/undefined. toString() peut prendre une base en argument : num.toString(16) pour l'hexadécimal.

String(num) ou num.toString() — toString(16) pour l'hexadécimal

element.addClass("ma-classe")
element.classList.add("ma-classe") (bonne réponse)
element.className.push("ma-classe")
element.style.class = "ma-classe"

Explication : classList.add("className") ajoute une classe sans toucher aux autres. On peut ajouter plusieurs classes : classList.add("a", "b", "c"). Pour supprimer : classList.remove(). Pour vérifier : classList.contains().

classList.add/remove/toggle/contains — les 4 méthodes essentielles