Quiz JavaScript : Comprendre et manipuler le DOM

1. Quelle méthode permet de sélectionner uniquement le premier élément <h1> présent dans le document HTML ?

A.

document.getElementsByTagName("h1")

Cette méthode retourne une collection de tous les éléments <h1>, pas un seul élément.

B.

document.querySelector("h1")

La méthode querySelector retourne uniquement le premier élément correspondant au sélecteur.

C.

document.querySelectorAll("h1")

Cette méthode retourne tous les éléments correspondants, pas seulement le premier.

D.

document.select("h1")

Il n'existe pas de méthode select sur l'objet document.

2. Que retourne l’instruction suivante ?

document.querySelector("section > p.highlight");

A. Tous les paragraphes ayant la classe highlight dans la page.

La méthode querySelector retourne uniquement le premier élément correspondant, pas une liste.

B. Le premier élément de type section de la page.

L’instruction cible un élément p.highlight à l’intérieur d’un section, pas le section lui-même.

C. Tous les éléments p contenus dans une balise section.

querySelector ne retourne qu’un seul élément, et la sélection vise uniquement ceux ayant la classe highlight.

D. Le premier élément <p> ayant la classe highlight, directement enfant d’un <section>.

Le sélecteur section > p.highlight cible un paragraphe avec la classe highlight, enfant direct d’une balise section.

3. Quelle méthode permet de créer un paragraphe que l'on pourra ensuite insérer dans la page ?

A.

document.createElement("p")

createElement permet de créer un élément HTML (ici un paragraphe) qui peut ensuite être ajouté au DOM avec appendChild ou une méthode similaire.

B.

document.querySelector("p")

querySelector permet de sélectionner un élément existant dans le DOM, mais ne crée rien de nouveau.

C.

document.appendChild("p")

appendChild attend un nœud DOM valide. Ici, une chaîne de caractères est passée, ce qui provoque une erreur.

D.

document.body.innerText = "paragraphe"

innerText remplace le texte de l’élément, mais ne crée pas de nouveau paragraphe dans la structure HTML.

4. Que fait cet extrait de code ?

const container = document.querySelector("#conteneur");
const newParagraph = document.createElement("p");
container.prepend(newParagraph);

A. Il supprime le premier enfant de l'élément avec l'id "conteneur".

prepend n’enlève rien, il ajoute un élément.

B. Il ajoute un nouveau paragraphe à la fin de l'élément avec l'id "conteneur".

append ajoute à la fin, prepend au début.

C. Il remplace le contenu de l'élément avec l'id "conteneur".

prepend ajoute un enfant sans remplacer le contenu.

D. Il ajoute un nouveau paragraphe vide au début de l'élément avec l'id "conteneur".

prepend ajoute un élément comme premier enfant, ici un paragraphe sans contenu.

5. Laquelle de ces instructions ne permet pas de sélectionner l'élément ci-dessous ?

<div class="boite" id="element-cible"></div>

A.

document.getElementById("element-cible")

getElementById sélectionne bien l'élément par son id (sans # dans l’argument).

B.

document.querySelector("#element-cible")

querySelector accepte les sélecteurs CSS, donc "#element-cible" est valide et sélectionne l’élément.

C.

document.getElementsByTagName("#element-cible")

getElementsByTagName attend un nom de balise (comme "div"), pas un sélecteur CSS. Passer "#element-cible" renvoie une collection vide car aucune balise n’a ce nom.

D.

document.querySelector(".boite")

.boite est un sélecteur valide pour cibler une classe avec querySelector.

6. Que retourne l’expression document.lastElementChild dans un document HTML valide ?

A. L’élément HTML racine <html>.

Dans un document HTML, document a généralement un seul enfant élément : <html>. C’est donc à la fois le premier et le dernier enfant élément.

B. Le dernier élément enfant de <body>.

document.lastElementChild cible un enfant direct de document, pas de <body>.

C. Le dernier élément HTML fermé correctement dans la page.

Ce n’est pas une analyse syntaxique du code, mais une propriété DOM structurée. Elle retourne un nœud enfant, pas une "balise fermée".

D. Toujours null si le script est dans le <head>.

Même si le script est dans le <head>, document.lastElementChild retourne un résultat valide si le DOM est bien formé.

7. Lequel de ces extraits ne permet pas d’obtenir la balise <title> dans un document HTML ?

A.

document.head.querySelector("title")

document.head cible l’en-tête, et querySelector("title") permet bien de récupérer la balise <title>.

B.

document.title

document.title retourne le texte du titre, pas l’élément <title> lui-même. Ce n’est donc pas un moyen d’obtenir la balise.

C.

document.getElementsByTagName("title")[0]

Cette méthode retourne une collection de balises <title>, et l’index 0 permet d’accéder au premier (et généralement seul) élément.

D.

document.querySelector("head > title")

Ce sélecteur CSS valide cible directement la balise <title> placée dans <head>.

8. Que se passe-t-il lorsque deux appels à appendChild() sont effectués successivement avec le même élément?

const container = document.querySelector("#conteneur");
const p = document.createElement("p");
p.textContent = "Un seul paragraphe";
container.appendChild(p);
container.appendChild(p);

A. Les deux paragraphes sont ajoutés à la suite dans le conteneur.

Un même nœud DOM ne peut pas apparaître deux fois : il n'est pas dupliqué automatiquement.

B. Le second appel ajoute une copie du paragraphe à la fin du conteneur.

appendChild ne duplique pas les nœuds, il déplace le même élément.

C. Une erreur est levée car on tente d'ajouter deux fois le même élément.

Aucune erreur n'est générée : le nœud est déplacé sans duplication ni exception.

D. Le paragraphe est déplacé vers la fin du conteneur (il reste un seul élément visible).

Un nœud DOM ne peut exister qu’à un seul endroit. Le second appendChild déplace simplement le paragraphe à la fin, sans créer de doublon.

9. Quelle différence fonctionnelle y a-t-il entre append() et appendChild() lorsqu'on ajoute un élément au DOM?

A. append() peut ajouter plusieurs nœuds et des chaînes de caractères, alors que appendChild() n'ajoute qu'un seul nœud.

C’est la principale différence d’usage entre les deux méthodes.

B. appendChild() crée une copie de l’élément, alors que append() déplace l’élément.

Les deux méthodes déplacent l’élément sans créer de copie.

C. append() supprime l’élément initial du DOM, alors que appendChild() le duplique.

Aucune duplication n’a lieu, et aucun élément n’est supprimé, juste déplacé.

10. Que fait la propriété textContent lorsqu'elle est utilisée sur un élément HTML ?

const titre = document.querySelector("h1");
titre.textContent = "<em>Titre important</em>";

A. Elle insère le texte avec interprétation HTML, et le mot "Titre important" s’affiche en italique.

textContent ne traite pas le HTML, il insère le texte tel quel.

B. Elle ajoute un nouveau nœud enfant à l’élément <h1>.

textContent remplace le contenu textuel, il ne crée pas de nœud supplémentaire.

C. Elle remplace tout le contenu textuel de l’élément par une chaîne de texte brute.

textContent efface tout contenu existant et insère la chaîne comme texte brut, sans interprétation HTML.

D. Elle insère uniquement le mot "Titre" et ignore le reste du contenu.

Aucune partie du texte n’est ignorée : tout le contenu de la chaîne est inséré tel quel.