Comprendre le DOM et savoir le manipuler en JavaScript, c’est franchir une étape décisive vers le développement web interactif.
Cette page d’entraînement se concentre sur les mécanismes qui permettent de sélectionner des éléments, de modifier leur contenu, de gérer leurs classes CSS et de réagir aux actions de l’utilisateur.
Ces compétences sont essentielles en cours, en examens et en projets, car elles servent à construire des interfaces dynamiques : menus, formulaires, boutons, listes, contenus générés à la volée.
Vous travaillerez également les méthodes modernes basées sur les sélecteurs CSS, la création et la suppression d’éléments, ainsi que la gestion des événements comme le clic.
L’objectif est de vous donner une lecture claire de la structure d’une page, de vous apprendre à agir sur elle avec précision, et de développer des réflexes solides pour écrire un JavaScript propre, efficace et facile à maintenir.
Comprendre le DOM et savoir le manipuler en JavaScript, c’est franchir une étape décisive vers le développement web interactif.
Cette page d’entraînement se concentre sur les mécanismes qui permettent de sélectionner des éléments, de modifier leur contenu, de gérer leurs classes CSS et de réagir aux actions de l’utilisateur.
Ces compétences sont essentielles en cours, en examens et en projets, car elles servent à construire des interfaces dynamiques : menus, formulaires, boutons, listes, contenus générés à la volée.
Vous travaillerez également les méthodes modernes basées sur les sélecteurs CSS, la création et la suppression d’éléments, ainsi que la gestion des événements comme le clic.
L’objectif est de vous donner une lecture claire de la structure d’une page, de vous apprendre à agir sur elle avec précision, et de développer des réflexes solides pour écrire un JavaScript propre, efficace et facile à maintenir.
QCM
1
Corrigé
Que signifie l'acronyme DOM ?
A. Data Object Management
B. Document Object Model
C. Digital Ordinance Module
D. Direct Object Mode
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le Document Object Model est une interface de programmation qui représente la structure d'un document HTML ou XML sous forme d'arbre.
QCM
2
Corrigé
Quelle méthode permet de sélectionner un élément HTML via son attribut 'id' unique ?
A. querySelector()
B. getElementsByClassName()
C. getElementById()
D. getElementByTagName()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
getElementById est la méthode la plus rapide et la plus spécifique pour cibler un élément unique possédant un ID donné.
QCM
3
Corrigé
Comment modifier le contenu textuel d'un élément tout en ignorant les balises HTML qu'il pourrait contenir ?
A. element.innerHTML
B. element.value
C. element.content
D. element.textContent
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
textContent permet de récupérer ou modifier uniquement le texte brut, contrairement à innerHTML qui interprète le code HTML.
QCM
4
Corrigé
Quelle méthode est la plus polyvalente car elle utilise les sélecteurs CSS pour trouver le premier élément correspondant ?
A. querySelector()
B. querySelectorAll()
C. findById()
D. getElementByStyle()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
querySelector permet de sélectionner des éléments en utilisant la même syntaxe que le CSS (.classe, #id, balise).
QCM
5
Corrigé
Comment changer la couleur de fond d'un élément en rouge via la propriété 'style' ?
A. element.style.background-color = 'red'
B. element.style.backgroundColor = 'red'
C. element.style.color = 'red'
D. element.background = 'red'
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
En JavaScript, les propriétés CSS composées s'écrivent en camelCase (backgroundColor) car le tiret n'est pas autorisé.
QCM
6
Corrigé
Quelle méthode renvoie une liste de TOUS les éléments correspondant à un sélecteur CSS ?
A. getElementByClassName()
B. querySelector()
C. querySelectorAll()
D. getElements()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
querySelectorAll renvoie une NodeList contenant tous les éléments qui correspondent au sélecteur fourni.
QCM
7
Corrigé
Quel objet global représente la page web chargée dans le navigateur ?
A. window
B. browser
C. page
D. document
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L'objet 'document' est le point d'entrée du DOM, permettant d'accéder à n'importe quel élément de la page.
QCM
8
Corrigé
Comment ajouter une nouvelle classe CSS à un élément sans écraser les classes existantes ?
A. element.classList.add('maClasse')
B. element.className = 'maClasse'
C. element.style.class = 'maClasse'
D. element.setAttribute('class', 'maClasse')
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
classList.add permet d'ajouter une classe proprement sans modifier les autres classes déjà présentes sur l'élément.
QCM
9
Corrigé
Quelle méthode permet de créer un nouvel élément HTML (ex: une balise <div>) avant de l'insérer ?
A. document.newElement('div')
B. document.createElement('div')
C. document.appendChild('div')
D. document.build('div')
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
createElement crée l'élément en mémoire ; il faudra ensuite l'ajouter au document avec une méthode comme appendChild.
QCM
10
Corrigé
Comment supprimer un élément du DOM ?
A. element.delete()
B. element.remove()
C. element.hide()
D. element.clear()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La méthode remove() supprime l'élément sur lequel elle est appelée directement de l'arborescence du DOM.
QCM
11
Corrigé
Si vous utilisez getElementsByTagName('p'), que recevez-vous ?
A. Un objet unique représentant le premier paragraphe
B. Une chaîne de caractères contenant le texte des paragraphes
C. Une collection (HTMLCollection) de tous les paragraphes
D. Rien, cette méthode n'existe pas
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Les méthodes commençant par 'getElements' (au pluriel) renvoient toujours une collection d'éléments.
QCM
12
Corrigé
Comment modifier la valeur d'un attribut existant, comme le 'src' d'une image ?
A. element.changeAttribute('src', 'img.jpg')
B. element.src = 'img.jpg'
C. element.setAttribute('src', 'img.jpg')
D. Les réponses 2 et 3 sont correctes
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
On peut modifier un attribut soit directement via sa propriété, soit via la méthode générique setAttribute.
QCM
13
Corrigé
Quel est le parent direct de l'élément <body> dans le DOM ?
A. <html>
B. document
C. <head>
D. window
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Dans la hiérarchie HTML, la balise 'html' contient directement les balises 'head' et 'body'.
QCM
14
Corrigé
Comment sélectionner un élément qui a la classe 'menu' ?
A. document.querySelector('menu')
B. document.querySelector('.menu')
C. document.querySelector('#menu')
D. document.getElementById('.menu')
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Pour querySelector, on utilise le point (.) pour désigner une classe, exactement comme en CSS.
QCM
15
Corrigé
Comment ajouter un élément enfant à l'intérieur d'un élément parent existant ?
A. parent.insert(enfant)
B. parent.add(enfant)
C. parent.appendChild(enfant)
D. parent.attach(enfant)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
appendChild ajoute l'élément passé en argument à la fin de la liste des enfants du parent.
QCM
16
Corrigé
Quelle propriété permet de récupérer le contenu HTML situé à l'intérieur d'un élément ?
A. innerHTML
B. outerHTML
C. HTMLContent
D. innerText
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
innerHTML renvoie ou définit le code HTML contenu entre les balises ouvrantes et fermantes de l'élément.
QCM
17
Corrigé
Quelle propriété permet d'accéder à l'élément parent d'un nœud ?
A. parentElement
B. upElement
C. rootElement
D. superElement
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
parentElement (ou parentNode) permet de remonter d'un niveau dans l'arbre du DOM.
QCM
18
Corrigé
Que fait l'instruction element.classList.toggle('active') ?
A. Elle supprime toujours la classe 'active'
B. Elle ajoute la classe 'active' seulement si elle n'existe pas, sinon elle la retire
C. Elle renomme toutes les classes en 'active'
D. Elle vérifie simplement si la classe existe sans rien faire
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Toggle agit comme un interrupteur : il ajoute la classe si elle est absente et la retire si elle est déjà présente.
QCM
19
Corrigé
Comment obtenir la valeur d'un champ de saisie <input> ?
A. input.textContent
B. input.innerHTML
C. input.value
D. input.getText()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Pour les éléments de formulaire (input, select, textarea), on utilise la propriété .value.
QCM
20
Corrigé
Quel événement est déclenché lorsque l'on clique sur un bouton ?
A. hover
B. submit
C. press
D. click
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L'événement 'click' est l'interaction standard capturée par JavaScript pour réagir à un clic souris ou tactile.
QCM
21
Corrigé
Comment lier une fonction à un événement 'click' sur un élément ?
A. element.addEvent('click', maFonction)
B. element.addEventListener('click', maFonction)
C. element.listen('click')
D. element.onClick = maFonction()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
addEventListener est la méthode recommandée car elle permet d'attacher plusieurs écouteurs au même événement.
QCM
22
Corrigé
Quelle est la structure de données utilisée pour représenter le DOM ?
A. Une pile (Stack)
B. Un tableau linéaire
C. Un arbre (Tree)
D. Une file (Queue)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le DOM est un arbre hiérarchique où chaque balise est un nœud ayant des parents et des enfants.
QCM
23
Corrigé
Comment empêcher un lien de rediriger l'utilisateur lors d'un clic ?
A. event.stop()
B. event.cancel()
C. event.preventDefault()
D. event.halt()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
preventDefault() annule le comportement par défaut d'un événement, comme la redirection d'un lien ou l'envoi d'un formulaire.
QCM
24
Corrigé
Que signifie la méthode querySelector('#logo') ?
A. Sélectionner tous les éléments avec l'ID 'logo'
B. Sélectionner le premier élément avec la classe 'logo'
C. Sélectionner la balise HTML nommée <logo>
D. Sélectionner l'élément unique possédant l'ID 'logo'
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Le symbole '#' est utilisé pour cibler un identifiant unique (ID) dans les sélecteurs CSS et querySelector.
QCM
25
Corrigé
Quelle propriété permet d'obtenir le premier enfant d'un élément ?
A. firstElementChild
B. child(0)
C. getFirst()
D. firstChildElement
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
firstElementChild renvoie le premier nœud de type 'élément', ignorant les nœuds de texte vides.
QCM
26
Corrigé
Quelle méthode permet de savoir si un élément possède une classe spécifique ?
A. element.hasClass('maClasse')
B. element.classList.contains('maClasse')
C. element.classList.check('maClasse')
D. element.isClass('maClasse')
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La méthode contains() renvoie un booléen (true/false) indiquant la présence de la classe.
QCM
27
Corrigé
Comment changer le texte d'un bouton ayant l'id 'btn' ?
A. document.getElementById('btn').value = 'OK'
B. document.getElementById('btn').textContent = 'OK'
C. document.getElementById('btn').text = 'OK'
D. Les réponses 1 et 2 peuvent fonctionner selon le type de bouton
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
On utilise .value pour une balise <input type='button'> et .textContent pour une balise <button>.
QCM
28
Corrigé
Comment modifier plusieurs styles CSS d'un coup de manière plus propre ?
A. Modifier element.style pour chaque propriété
B. Changer la classe de l'élément avec classList
C. Utiliser la méthode element.setStyles()
D. Réécrire tout le fichier CSS avec JS
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Il est préférable de définir les styles dans le CSS et de simplement basculer des classes en JavaScript.
QCM
29
Corrigé
Que renvoie document.getElementsByClassName('test') ?
A. Le premier élément avec la classe 'test'
B. Un tableau (Array) standard JavaScript
C. Une HTMLCollection (itérable mais pas un Array)
D. Le nom de la classe sous forme de texte
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
C'est une collection 'vivante' d'éléments, que l'on peut parcourir avec une boucle.
QCM
30
Corrigé
Pourquoi placer le script JavaScript juste avant la fermeture de </body> ?
A. Parce que c'est une règle esthétique
B. Pour que le script s'exécute avant que la page soit visible
C. Pour s'assurer que le DOM est complètement chargé avant d'y accéder
D. Pour réduire la taille du fichier HTML
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Si le script est exécuté avant que le HTML ne soit lu, les éléments sélectionnés risquent d'être 'null'.
Mots & Définitions
Consultez les définitions des termes importants.
Le DOM est une représentation de la page web que le navigateur construit à partir du HTML. Il organise les éléments sous forme de structure manipulable en JavaScript. Grâce à lui, on peut modifier dynamiquement le contenu, les styles et la structure d’une page.
Document Object Model est le nom complet du DOM. Il décrit la manière dont le navigateur transforme le document HTML en objets accessibles en JavaScript. C’est le “pont” qui relie le code JS aux éléments visibles sur la page.
L’objet document représente la page web et donne accès aux méthodes de sélection et de création d’éléments. C’est le point d’entrée principal pour interagir avec le DOM. On l’utilise pour trouver un élément, modifier son contenu ou en ajouter de nouveaux.
Un sélecteur CSS est une règle permettant de cibler un ou plusieurs éléments selon leur balise, leur classe, leur id ou d’autres attributs. En JavaScript, ces sélecteurs servent aussi à rechercher des éléments dans le DOM. Cela rend la sélection très flexible et expressive.
getElementById() sélectionne un élément grâce à son identifiant unique. C’est une méthode rapide et simple pour cibler un élément précis. Elle renvoie un seul élément, ou null si l’id n’existe pas.
querySelector() permet de récupérer le premier élément correspondant à un sélecteur CSS. Elle est très polyvalente, car elle fonctionne avec les mêmes règles que le CSS. C’est une méthode courante dans le JavaScript moderne.
querySelectorAll() renvoie tous les éléments qui correspondent à un sélecteur CSS. Le résultat est une liste (NodeList) que l’on peut parcourir pour appliquer des actions à plusieurs éléments. C’est utile pour traiter des groupes, comme des boutons ou des liens.
textContent modifie ou lit le texte d’un élément en ignorant tout balisage HTML. Il est donc plus sûr et plus prévisible quand on veut afficher du texte brut. C’est aussi un bon réflexe pour limiter les risques liés à l’injection de code.
innerHTML permet d’accéder au contenu HTML à l’intérieur d’un élément. On peut l’utiliser pour insérer ou lire des balises et du texte. Il faut toutefois l’employer avec prudence lorsqu’on manipule des données venant de l’utilisateur.
classList est une interface pratique pour gérer les classes CSS d’un élément. Elle permet d’ajouter, retirer, basculer ou vérifier une classe sans écraser les autres. C’est la méthode la plus propre pour piloter l’apparence via des classes.
toggle() ajoute une classe si elle n’existe pas, ou la retire si elle est déjà présente. C’est très pratique pour activer/désactiver un état visuel, comme un menu ouvert ou un bouton actif. Cette logique simplifie beaucoup les scripts d’interface.
createElement() sert à créer un nouvel élément HTML en JavaScript avant de l’insérer dans la page. Cela permet de construire une interface dynamiquement, sans écrire le HTML à l’avance. L’élément créé doit ensuite être ajouté au DOM pour devenir visible.
appendChild() ajoute un élément enfant à l’intérieur d’un élément parent. On l’utilise souvent après createElement() pour insérer une nouvelle balise dans la page. C’est une opération de base pour construire ou enrichir le contenu dynamiquement.
remove() supprime un élément du DOM, ce qui le retire de l’affichage et de la structure de la page. C’est utile pour fermer une alerte, enlever un item ou nettoyer une interface. Une fois supprimé, l’élément n’est plus accessible via le DOM, sauf s’il est recréé.
addEventListener() associe une fonction à un événement, comme un clic ou une saisie clavier. Cela permet de rendre une page interactive en déclenchant du code au bon moment. C’est la méthode standard et la plus flexible pour gérer les événements.
À propos de ce QCM
Les notions évaluées ici reposent sur une idée centrale : une page web n’est pas figée, elle peut être pilotée par JavaScript grâce au DOM.
Le navigateur transforme le HTML en une structure organisée, comparable à un arbre, où chaque balise devient un nœud.
Comprendre cette structure aide à se repérer : savoir où se trouvent les éléments, qui est le parent, qui sont les enfants, et comment naviguer proprement d’un nœud à l’autre.
La première compétence travaillée est la sélection d’éléments.
Certaines méthodes ciblent directement un identifiant unique, tandis que d’autres s’appuient sur des sélecteurs CSS, ce qui rend la recherche plus flexible.
Cette maîtrise est indispensable pour mettre à jour un texte, lire la valeur d’un champ input, ou appliquer une action à un groupe d’éléments.
Vient ensuite la modification du contenu : il faut savoir faire la différence entre afficher du texte brut et injecter du contenu HTML, car cela n’a pas les mêmes effets, ni les mêmes implications de sécurité.
La gestion du style et des classes constitue un autre pilier.
Modifier une propriété style fonctionne, mais devient vite lourd si l’on touche plusieurs règles.
Une approche plus propre consiste à piloter l’apparence via des classes CSS, en les ajoutant, retirant ou basculant selon l’état de l’interface.
Cette logique est très utilisée pour les états “actif/inactif”, l’ouverture d’un menu ou la mise en évidence d’un élément.
Enfin, l’interactivité repose sur les événements.
Associer une fonction à un clic, empêcher un comportement par défaut, ou déclencher une action au bon moment fait partie des bases du JavaScript côté navigateur.
On apprend aussi à créer et insérer de nouveaux éléments dans la page, puis à les supprimer si nécessaire.
Ce sont des compétences directement réutilisables dans des projets concrets, car elles relient la structure HTML, le style CSS et la logique JavaScript dans un ensemble cohérent.
Conclusion
Ces QCM vous entraînent sur les fondamentaux de la manipulation du DOM : sélectionner des éléments, modifier du texte, gérer les classes, créer et supprimer des nœuds, puis rendre la page interactive grâce aux événements.
En consolidant ces bases, vous gagnez en aisance pour développer des interfaces dynamiques et comprendre le comportement réel d’une page dans le navigateur.
Pour progresser, le plus efficace est de pratiquer immédiatement : cibler un élément, changer son contenu, ajouter une classe au clic, puis créer un nouvel élément inséré dans une liste.
Avec cette régularité, votre JavaScript devient plus sûr, plus lisible et plus professionnel.
