$course$/QCM de NSI/Première/JavaScript et DOM Bases de JavaScript pour interagir avec une page web :
intégration au HTML, syntaxe de base, manipulation du DOM
(Document Object Model), sélection et modification
d'éléments, exemples typiques.

]]> JavaScript et DOM — Q01 : Rôle de JavaScript À quoi sert principalement JavaScript dans
une page web ?

]]> Trois langages du Web côté navigateur : HTML
(structure), CSS (style), JavaScript
(comportement). JavaScript a aussi un
pendant côté serveur (Node.js).

]]> 1.0 0.0 0 true true abc À mettre en forme les éléments

]]> C'est le rôle de CSS.

]]> À envoyer des e-mails

]]> Erreur : pas son rôle (cela demande un
serveur).

]]> Rendre la page dynamique et interactive

]]> Bonne réponse : HTML structure, CSS
embellit, JavaScript fait vivre. Trois
piliers complémentaires du Web.

]]> À structurer tout le contenu de la page

]]> C'est le rôle de HTML.

]]> JavaScript et DOM — Q02 : Intégrer du JavaScript Comment inclure un fichier script.js dans
une page HTML ?

]]> Variantes : script externe (src), script
inline (<script>...</script>), module
(type="module"). Toujours préférer le
script externe pour la maintenance.

]]> 1.0 0.0 0 true true abc `

html

<link href="script.js">

]]> Erreur : <link> est pour les feuilles
de style.

]]> `

html

<script src="script.js"></script>

]]> Bonne réponse : balise <script> avec
src. Préférable de placer en bas du
<body> (ou avec defer dans <head>)
pour ne pas bloquer le rendu.

]]> `

html

<import "script.js">

]]> Erreur : balise inexistante en HTML.

]]> `

html

<js src="script.js"></js>

]]> Erreur : balise inexistante.

]]> JavaScript et DOM — Q03 : Déclaration de variable Quel mot-clé moderne déclare une variable
modifiable en JavaScript ?

]]> Trois mots-clés : var (ancien, à éviter),
let (modifiable), const (constante,
non réassignable). Privilégier const par
défaut, let quand on doit modifier.

]]> 1.0 0.0 0 true true abc var

]]> Possible mais désuet (portée
déroutante). Préférer let.

]]> Let

]]> Erreur de casse : les mots-clés
JavaScript s'écrivent tout en
minuscules. Let x = 5; provoque une
SyntaxError.

]]> let

]]> Bonne réponse : let x = 5; déclare une
variable de portée bloc, modifiable.
Standard depuis ES6 (2015).

]]> int

]]> Erreur : JS n'est pas typé statiquement.

]]> JavaScript et DOM — Q04 : Afficher dans la console Comment afficher un message dans la console
du navigateur en JavaScript ?

]]> Variantes : console.warn, console.error,
console.table (pour les objets/tableaux),
console.dir (pour les éléments DOM).

]]> 1.0 0.0 0 true true abc console.log("Hello")

]]> Bonne réponse : console.log est le
standard. Visible dans l'onglet
« Console » des outils développeur (F12).

]]> Console.log("Hello")

]]> Erreur de casse : JavaScript distingue
majuscules et minuscules. L'objet
s'appelle console, tout en minuscules ;
Console n'est pas défini
(ReferenceError).

]]> console.log "Hello"

]]> Parenthèses oubliées : en JavaScript,
l'appel d'une fonction exige des
parenthèses autour des arguments. Sans
elles, SyntaxError.

]]> log("Hello")

]]> Préfixe oublié : log seul n'est pas
défini (ReferenceError). C'est une
méthode de l'objet console, il faut
donc écrire console.log.

]]> JavaScript et DOM — Q05 : DOM Que signifie DOM ?

]]> Le DOM est la « porte d'entrée » de
JavaScript vers la page. Chaque élément HTML
devient un objet manipulable.

]]> 1.0 0.0 0 true true abc Dynamic Output Module

]]> Aucune spécification ne
porte ce nom. Le DOM est
la représentation arborescente
d'un document HTML, exposée
aux scripts pour permettre
la modification dynamique
de la page.

]]> Display Order Manager

]]> Cette dénomination est
inventée. Le sigle DOM
renvoie au Document
Object Model, normalisé
par le W3C dans le cadre
de la modélisation des
documents HTML.

]]> Document Object Model

]]> Bonne réponse : représentation
arborescente de la page HTML, accessible
et modifiable depuis JavaScript via des
objets et des méthodes.

]]> Domain Object Method

]]> Cette appellation n'est
pas standard. Le sigle
DOM, défini par le W3C,
signifie Document Object
Model : il décrit la
structure d'un document
HTML sous forme d'arbre
d'objets.

]]> JavaScript et DOM — Q06 : Sélection par id Comment récupérer en JavaScript l'élément ayant
id="titre" ?

]]> Alternative moderne et flexible :
document.querySelector("#titre") (accepte
tout sélecteur CSS).

]]> 1.0 0.0 0 true true abc getElementById(titre)

]]> Erreur : il manque document. et les
guillemets autour de la chaîne.

]]> document.find("#titre")

]]> Erreur : pas en JavaScript natif (oui en
jQuery).

]]> document.getId("titre")

]]> Erreur : méthode inexistante.

]]> document.getElementById("titre")

]]> Bonne réponse : méthode classique. Renvoie
l'objet DOM correspondant ou null si
l'id n'existe pas.

]]> JavaScript et DOM — Q07 : Modifier le texte Comment changer le texte d'un élément el
sélectionné par DOM ?

]]> textContent (texte pur) vs innerHTML
(HTML brut). Préférer textContent quand on
affiche du contenu utilisateur (sécurité).

]]> 1.0 0.0 0 true true abc el.value = "..."

]]> Erreur : value concerne les champs de
formulaire (<input>, <select>).

]]> el.text = "..."

]]> Erreur : propriété inexistante.

]]> el.textContent = "..."

]]> Bonne réponse : textContent modifie le
contenu textuel. Pour insérer du HTML
(avec balises), utiliser innerHTML
(mais attention aux failles XSS).

]]> el.changeText("...")

]]> Erreur : méthode inexistante.

]]> JavaScript et DOM — Q08 : DOM comme arbre Quelle structure de données est utilisée pour
modéliser le DOM ?

]]> Vocabulaire : nœud parent, nœud enfant,
frère, racine, feuille. Chaque élément du
DOM est un nœud, qui peut être de type
« élément », « texte », « attribut », etc.

]]> 1.0 0.0 0 true true abc Un graphe orienté avec plusieurs cycles

]]> Erreur : un arbre n'a pas de cycles.

]]> Un arbre dont la racine est <html>

]]> Bonne réponse : structure hiérarchique
reflétant l'imbrication des balises HTML.
Chaque élément a un parent et peut avoir
des enfants.

]]> Une liste plate

]]> Erreur : trop limité.

]]> Un dictionnaire

]]> Erreur : pas la structure adaptée.

]]> JavaScript et DOM — Q09 : Réagir à un clic Comment exécuter une fonction f quand on
clique sur un bouton btn ?

]]> addEventListener est la méthode standard.
Premier paramètre = type d'événement
("click", "input", "submit"...),
second = fonction à exécuter.

]]> 1.0 0.0 0 true true abc btn.addEventListener("onclick", f)

]]> Erreur : le nom de l'événement est
"click", sans le préfixe on. Aucun
événement nommé "onclick" n'existe : la
fonction n'est jamais appelée, et aucun
message d'erreur ne le signale.

]]> btn.addEventListener("click", f())

]]> Erreur : f() appelle la fonction tout
de suite et transmet son résultat (souvent
undefined) à addEventListener. Il faut
passer la fonction elle-même, f, sans
parenthèses.

]]> btn.addEventListener("click", f)

]]> Bonne réponse : méthode moderne et
recommandée. Permet d'ajouter plusieurs
écouteurs sans s'écraser mutuellement.

]]> btn.onclick("click", f)

]]> Erreur : onclick est une propriété à
laquelle on affecte une fonction
(btn.onclick = f), pas une méthode à
appeler avec le nom de l'événement.

]]> JavaScript et DOM — Q10 : Trace simple Que fait ce code ?
`

javascript

let x = 5;

x = x + 3;

console.log(x);

]]> Attention au piège de l'addition vs
concaténation : 5 + "3" = "53" en JS
(coercition de type). C'est une source
classique de bugs.

]]> 1.0 0.0 0 true true abc Erreur

]]> Erreur : code valide.

]]> Affiche 53 (concaténation)

]]> Erreur : 3 est un nombre, pas une chaîne,
donc addition arithmétique.

]]> Affiche 5

]]> Erreur : on additionne 3.

]]> Affiche 8

]]> Bonne réponse : x devient 5 + 3 = 8, puis
on l'affiche.

]]> JavaScript et DOM — Q11 : querySelector Que renvoie
document.querySelector(".bouton") ?

]]> querySelector(sel) = premier élément ;
querySelectorAll(sel) = NodeList. Plus
flexibles que getElementById /
getElementsByClassName.

]]> 1.0 0.0 0 true true abc Le bouton cliqué le plus récemment

]]> La méthode querySelector
interroge la structure du
document, pas son historique
d'interaction. Le suivi de
l'élément actif passe par
document.activeElement ou
des gestionnaires d'évènements.

]]> Une chaîne contenant le HTML du bouton

]]> Erreur : renvoie l'objet DOM, pas une
chaîne.

]]> Le premier élément de classe « bouton »

]]> Bonne réponse : querySelector accepte
un sélecteur CSS (classe, id,
combinaisons...) et renvoie le premier
élément correspondant.

]]> Tous les éléments ayant la classe « bouton »

]]> Erreur : c'est querySelectorAll qui
renvoie tous les éléments.

]]> JavaScript et DOM — Q12 : textContent vs innerHTML Quelle est la différence entre textContent et
innerHTML ?

]]> Sécurité : si le contenu vient de
l'utilisateur, toujours utiliser
textContent pour éviter les attaques XSS
(injection de scripts).

]]> 1.0 0.0 0 true true abc Aucune, les deux propriétés sont interchangeables

]]> Erreur : la différence est importante,
notamment pour la sécurité.

]]> textContent = texte brut, innerHTML = HTML

]]> Bonne réponse : el.textContent =
"<b>x</b>" affiche littéralement
<b>x</b> ; el.innerHTML = "<b>x</b>"
affiche x en gras.

]]> La propriété textContent n'existe pas en JavaScript

]]> Erreur : c'est une propriété standard du
DOM, disponible sur tout élément.

]]> innerHTML est systématiquement plus rapide

]]> Erreur : tendance inverse, et la sécurité
prime.

]]> JavaScript et DOM — Q13 : Conditions Quelle syntaxe est valide en JavaScript pour
une condition ?

]]> Syntaxe similaire à C/Java. Astuce : les
points-virgules sont techniquement
facultatifs (insertion automatique), mais
recommandés pour éviter les pièges.

]]> 1.0 0.0 0 true true abc `

javascript

if (x > 0) {

    console.log("positif");

}

]]> Bonne réponse : parenthèses autour de la
condition, accolades pour le bloc, points-
virgules en fin d'instruction.

]]> `

javascript

if x > 0 {

    console.log("positif");

}

]]> Parenthèses du if oubliées : en
JavaScript, la condition doit être
entre parenthèses, if (x > 0). Sans
elles, SyntaxError.

]]> `

javascript

if x > 0:

    console.log("positif")

]]> Réflexe Python : deux-points et bloc
indenté. En JavaScript, la condition va
entre parenthèses et le bloc entre
accolades.

]]> `

javascript

if (x > 0):

    console.log("positif");

]]> Deux-points en trop : malgré les
parenthèses correctes, le : après la
condition n'existe pas en JavaScript
(SyntaxError). Le bloc s'écrit entre
accolades.

]]> JavaScript et DOM — Q14 : Boucle for Quelle syntaxe for JavaScript itère 5 fois ?

]]> Variantes modernes : for...of (itérer sur
les valeurs d'un tableau), for...in
(itérer sur les clés d'un objet),
forEach (méthode des tableaux).

]]> 1.0 0.0 0 true true abc `

javascript

for (let i = 0; i <= 5; i++) { ... }

]]> Erreur de borne : avec <=, la variable
i prend les valeurs 0, 1, 2, 3, 4 et 5,
soit six itérations. Piège classique
du « un de trop ».

]]> `

javascript

for (let i = 0, i < 5, i++) { ... }

]]> Erreur : les trois parties du for sont
séparées par des points-virgules, pas
par des virgules. Ici, SyntaxError.

]]> `

javascript

for (let i = 0; i > 5; i++) { ... }

]]> Erreur : la condition i > 5 est fausse
dès le départ (i vaut 0), donc le corps
de la boucle ne s'exécute jamais (zéro
itération, pas cinq).

]]> `

javascript

for (let i = 0; i < 5; i++) { ... }

]]> Bonne réponse : trois parties dans le
for : initialisation, condition,
incrément (séparées par ;).

]]> JavaScript et DOM — Q15 : Définir une fonction Quelle est la syntaxe valide d'une fonction JS ?

]]> Syntaxe moderne (« arrow function ») :
const carre = x => x * x;. Plus concise
mais subtilités sur this.

]]> 1.0 0.0 0 true true abc `

javascript

carre(x) { return x * x; }

]]> Mot-clé function oublié : sans lui, ce
code est une SyntaxError (le return se
retrouve hors de toute fonction).

]]> `

javascript

Function carre(x) { return x * x; }

]]> Erreur de casse : le mot-clé s'écrit
function, tout en minuscules.
Function avec majuscule désigne un
constructeur, pas le mot-clé, d'où
SyntaxError ici.

]]> `

javascript

const carre = x -> x * x;

]]> Mauvaise flèche : les fonctions fléchées
s'écrivent avec => et non ->. Avec
->, SyntaxError.

]]> `

javascript

function carre(x) { return x * x; }

]]> Bonne réponse : mot-clé function,
accolades pour le bloc, return pour la
valeur.

]]> JavaScript et DOM — Q16 : Modifier un attribut Comment changer l'attribut src d'une image ?

]]> Pour les attributs standards (src, href,
alt, id...), on accède directement par
la propriété. Pour les attributs
personnalisés ou spéciaux : setAttribute/
getAttribute.

]]> 1.0 0.0 0 true true abc img.attribute("src", "...")

]]> Erreur : méthode inexistante.

]]> img.changeSrc("...")

]]> Erreur : méthode inexistante.

]]> img.src = "nouvelle.jpg"

]]> Bonne réponse : on peut accéder aux
attributs comme à des propriétés JS.
Forme alternative :
img.setAttribute("src", "nouvelle.jpg").

]]> img.attr.src = "..."

]]> Erreur : .attr n'existe pas.

]]> JavaScript et DOM — Q17 : Créer un élément Comment créer dynamiquement un nouveau
paragraphe <p> et l'ajouter au <body> ?

]]> Variantes pour ajouter : appendChild (à la
fin), prepend (au début), insertBefore
(à un endroit précis).

]]> 1.0 0.0 0 true true abc `

javascript

const p = document.createElement("p");

p.textContent = "Hello";

]]> Erreur : l'élément est créé mais jamais
inséré dans le document. Sans
document.body.appendChild(p), rien ne
s'affiche.

]]> `

javascript

const p = document.createElement("p");

p.textContent = "Hello";

document.body.appendChild("p");

]]> Erreur : appendChild attend un nœud,
pas une chaîne : "p" provoque une
TypeError. Il faut lui passer l'élément
créé, p.

]]> `

javascript

const p = "<p>Hello</p>";

document.body.innerHTML = p;

]]> Erreur : affecter innerHTML remplace
tout le contenu de <body> par ce fragment.
On n'ajoute pas, on écrase (et injecter du
HTML brut est risqué).

]]> `

javascript

const p = document.createElement("p");

p.textContent = "Hello";

document.body.appendChild(p);

]]> Bonne réponse : trois étapes, à savoir
créer, remplir, ajouter au DOM.

]]> JavaScript et DOM — Q18 : == vs === Quelle est la différence entre == et === en
JavaScript ?

]]> Règle d'or : toujours utiliser === sauf
cas très précis. Idem pour l'inégalité :
!== plutôt que !=.

]]> 1.0 0.0 0 true true abc Aucune

]]> Erreur : différence importante !

]]> == convertit le type, === non

]]> Bonne réponse : préférer === pour
éviter les surprises de coercition.
Source de bugs subtils en JS.

]]> == n'existe pas en JS moderne

]]> Erreur : il existe, mais à éviter.

]]> === est totalement obsolète

]]> Erreur : c'est la version recommandée.

]]> JavaScript et DOM — Q19 : Tableau JavaScript Quelle est la notation littérale recommandée
pour déclarer un tableau de trois éléments en JS ?

]]> Tableaux JS : indexés à partir de 0,
hétérogènes (peuvent contenir n'importe quel
type). Très polyvalents.

]]> 1.0 0.0 0 true true abc let t = [1, 2, 3];

]]> Bonne réponse : crochets, virgules.
Accès : t[0] (= 1). Méthodes :
t.push, t.pop, t.length...

]]> Array(1, 2, 3)

]]> Forme valide mais on préfère la
notation littérale [1, 2, 3].

]]> let t = {1, 2, 3};

]]> Erreur : {} désigne un objet en JS,
avec syntaxe {cle: valeur}.

]]> let t = (1, 2, 3);

]]> Ce code est valide mais ne crée pas de
tableau : les parenthèses appliquent
l'opérateur virgule, qui évalue chaque
expression et ne garde que la dernière.
Ici t vaut le nombre 3.

]]> JavaScript et DOM — Q20 : Événement et données Comment savoir sur quel élément un
événement a eu lieu dans le gestionnaire ?

]]> L'objet event est passé automatiquement
au callback. Propriétés utiles :
event.target (qui a déclenché),
event.type (type d'événement),
event.preventDefault() (annuler le
comportement par défaut).

]]> 1.0 0.0 0 true true abc En relançant le code

]]> Relancer le script ne
fournit aucune information
supplémentaire. C'est l'objet
event, automatiquement
transmis au gestionnaire,
qui contient toutes les
données utiles.

]]> Impossible

]]> Erreur : il existe une variable
d'événement.

]]> Avec une simple variable globale partagée

]]> Pratique fragile, à éviter.

]]> Via event.target (passé au callback)

]]> Bonne réponse :
btn.addEventListener("click", (e) =>
console.log(e.target)); affiche
l'élément qui a déclenché l'événement.

]]> JavaScript et DOM — Q21 : Débogage Pour déboguer un script JavaScript dans le
navigateur, quel outil utiliser ?

]]> Astuces : debugger; pour mettre un point
d'arrêt en code ; console.table(arr) pour
visualiser un tableau ; console.dir(elem)
pour explorer un nœud DOM.

]]> 1.0 0.0 0 true true abc Un environnement de développement comme Visual Studio

]]> IDE pour développer, pas pour déboguer
dans le navigateur, là où le script
s'exécute.

]]> Un éditeur de texte comme Notepad

]]> Un éditeur permet d'écrire le code, pas
de l'exécuter pas à pas ni d'inspecter
la page.

]]> Un simple script Python d'analyse

]]> Python est un langage
autonome, exécuté côté
serveur ou en local. Le
débogage d'un script
JavaScript se fait dans
le navigateur, là où le
code s'exécute réellement.

]]> Les outils développeur du navigateur

]]> Bonne réponse : accessibles avec F12.
Chrome DevTools, Firefox DevTools, Safari
Web Inspector. Tous gratuits et puissants.
Apprendre à les utiliser est essentiel.

]]> JavaScript et DOM — Q22 : DOM pas encore prêt Mon script, placé dans <head> sans defer,
fait document.getElementById("menu") mais
renvoie null. L'élément id="menu" existe
bien dans le HTML, sans faute de frappe.
Pourquoi ?

]]> Trois solutions : (1) placer le <script> à
la fin de <body>, (2) <script defer>
dans <head>, (3) document.addEventListener
("DOMContentLoaded", ...).

]]> 1.0 0.0 0 true true abc L'élément n'existe pas dans la page

]]> Erreur : l'énoncé précise que l'élément
existe et que l'id est correct. La
cause est le moment d'exécution.

]]> JavaScript ne peut pas lire le DOM

]]> Erreur : c'est exactement son rôle.

]]> Le script s'exécute avant le parsing du DOM

]]> Bonne réponse : si <script> est dans
<head> sans defer, il s'exécute avant
le <body>. Solutions : placer le
script en bas du <body>, utiliser
defer, ou encapsuler dans un
écouteur DOMContentLoaded.

]]> Le navigateur est buggé

]]> Très improbable.

]]> JavaScript et DOM — Q23 : Coercition de type Que renvoie "5" + 3 en JavaScript ?

]]> Comparaison : "5" - 3 = 2 (le - force
la conversion en nombre). Imprévisible :
toujours convertir explicitement avec
Number(s) ou parseInt(s).

]]> 1.0 0.0 0 true true abc "53"

]]> Bonne réponse : avec +, si l'un des
opérandes est une chaîne, l'autre est
converti en chaîne et on concatène.
Comportement spécifique à JS, source
fréquente de bugs.

]]> Erreur de type

]]> Erreur : JS coercite silencieusement.

]]> 5

]]> Erreur : 5 ignorerait le 3.

]]> 8

]]> Erreur : pas d'addition arithmétique car
un opérande est une chaîne.

]]> JavaScript et DOM — Q24 : Sécurité innerHTML Pourquoi el.innerHTML = userInput; est-il
dangereux ?

]]> Règle d'or : ne jamais insérer de contenu
utilisateur via innerHTML. Préférer
textContent, ou un nettoyage avec une
bibliothèque (DOMPurify).

]]> 1.0 0.0 0 true true abc Parce que l'affectation ralentit l'affichage de la page

]]> Erreur : pas d'impact significatif sur la
performance ; le danger est ailleurs.

]]> Un utilisateur peut injecter du code (faille XSS)

]]> Bonne réponse : si userInput contient
par exemple <img src=x onerror="...">,
le code du gestionnaire s'exécute dans le
navigateur (les <script> insérés via
innerHTML ne s'exécutent pas, mais les
gestionnaires d'événements, si). Solution :
utiliser textContent (qui échappe) ou
assainir l'entrée.

]]> Parce que innerHTML serait totalement obsolète

]]> Erreur : pas obsolète.

]]> Aucun risque réel, le navigateur filtre le contenu

]]> Erreur : le navigateur n'assainit pas
innerHTML ; XSS est l'une des
vulnérabilités les plus exploitées.

]]> JavaScript et DOM — Q25 : Synthèse Parmi les affirmations suivantes sur JavaScript
et le DOM, laquelle est fausse ?

]]> Mnémonique : « toujours triple égal » en
JS, sauf cas très exceptionnels documentés.

]]> 1.0 0.0 0 true true abc addEventListener permet d'ajouter plusieurs gestionnaires d'événements à un élément

]]> Vrai : avantage majeur sur onclick =.

]]> document.getElementById(id) renvoie le premier élément ou null

]]> Vrai : comportement standard.

]]> == et === sont synonymes en JavaScript

]]> Faux (donc bonne réponse) : == fait
une comparaison avec coercition (donc
parfois surprenante : 0 == false,
"" == 0...) ; === est une
comparaison stricte, sans conversion
de type.

]]> Le DOM est une représentation arborescente de la page HTML

]]> Vrai : structure clé du Web.

]]> JavaScript et DOM — Q26 : const et mutation Le code suivant est-il permis en JavaScript ?

`javascript const t = [1]; t.push(2);`

]]> const garantit que le nom pointe toujours vers
le même objet ; il ne garantit pas que cet objet
reste inchangé. Recommandation moderne : const
par défaut, let seulement quand la variable doit
être réaffectée, jamais var.

]]> 1.0 0.0 0 true true abc Oui : const interdit la réaffectation de t, pas la modification du tableau

]]> Bonne réponse : const fige le lien entre
le nom t et le tableau, pas le tableau
lui-même. Après le push, t vaut [1, 2].
En revanche, t = [9]; lèverait une
TypeError (réaffectation interdite).

]]> Non : une TypeError est levée, car t est déclaré constant

]]> Erreur classique : croire que const rend la
valeur immuable. La TypeError ne survient
que pour une réaffectation (t = ...),
pas pour une mutation comme push.

]]> Non : il faudrait déclarer t avec let pour pouvoir le modifier

]]> Erreur : let n'est nécessaire que pour
réaffecter la variable. Muter le tableau
(ajouter, retirer, modifier des éléments) est
permis même avec const.

]]> Oui, mais t vaut toujours [1] : le push est ignoré en silence

]]> Erreur : rien n'est ignoré, const ne protège
pas le contenu du tableau. Le push s'exécute
normalement et t vaut [1, 2]. Pour geler
le contenu, il faudrait Object.freeze(t).

]]> JavaScript et DOM — Q27 : Modifier les classes d'un élément Pour ajouter la classe actif à un élément el
sélectionné via querySelector, quelle instruction
utiliser en JavaScript moderne ?

]]> Avantages de classList : on n'écrase pas les
autres classes, le code est lisible, et
toggle("actif") est un raccourci pratique pour
ajouter ou retirer la classe selon son état
courant. C'est l'API à privilégier pour basculer
entre des états visuels.

]]> 1.0 0.0 0 true true abc el.style.actif = true

]]> Erreur : la propriété style permet de
modifier les styles inline, pas la liste
des classes. Il n'existe pas de style
actif.

]]> el.addClass("actif")

]]> Erreur : addClass n'est pas une méthode
native du DOM. C'est une fonction de jQuery,
librairie qui n'est pas disponible par défaut
dans le navigateur.

]]> el.classList.add("actif")

]]> Bonne réponse : la propriété classList
fournit une API dédiée à la gestion des
classes : add, remove, toggle,
contains. C'est la méthode recommandée
aujourd'hui.

]]> el.class = "actif"

]]> Erreur : la propriété DOM s'appelle
className, pas class (qui est un mot
réservé en JavaScript). Et l'assigner écrase
toutes les classes existantes au lieu d'en
ajouter une.

]]> JavaScript et DOM — Q28 : getElementById vs querySelector Pour un même identifiant présent dans la page, que
renvoient les deux appels document.getElementById("titre")
et document.querySelector("#titre") ?

]]> Bonne pratique : utiliser getElementById quand
on cible précisément un identifiant ;
querySelector lorsqu'on a besoin d'un sélecteur
complexe (par exemple nav > a.actif:first-child).
Pour récupérer plusieurs éléments,
querySelectorAll renvoie une NodeList
itérable.

]]> 1.0 0.0 0 true true abc Une liste d'éléments pour le premier, un seul élément pour le second

]]> Erreur : getElementById renvoie un seul
élément (ou null). C'est getElementsByClassName
ou querySelectorAll qui renvoient une
collection.

]]> null pour le second, car querySelector ne fonctionne que sur les pages chargées par AJAX

]]> Erreur : querySelector fonctionne sur tout
élément du DOM, quel que soit son mode de
chargement, et accepte le sélecteur #titre.

]]> Le même élément, dans les deux cas

]]> Bonne réponse : pour un identifiant donné, les
deux méthodes renvoient le même élément.
getElementById est plus rapide et plus
ancienne ; querySelector accepte tout
sélecteur CSS, ce qui la rend plus polyvalente
mais légèrement plus lente.

]]> Un élément pour le second seulement, le premier ne ciblant que les classes

]]> Erreur : getElementById cible bien un
identifiant (pas une classe), et renvoie donc
ici l'élément. querySelector, lui, accepte
tout sélecteur CSS, dont les classes
(.maClasse).

]]>