QCM : DOM et manipulation des éléments (20 questions)

Explication

Le DOM est une interface de programmation qui représente toute la page sous la forme d’un arbre hiérarchique d’objets. Le code source brut, la liste plate et l’interface graphique ne décrivent pas cette structure.

Explication

Window représente globalement la fenêtre du navigateur et constitue le contexte à partir duquel JavaScript s’exécute. Document représente la page, tandis que History concerne l’historique et Screen les propriétés de l’écran.

Explication

Document est un sous-objet de Window qui représente la page web et permet d’accéder à ses éléments HTML et de les modifier. Window désigne la fenêtre, History l’historique, et un élément HTML particulier n’est pas l’objet qui donne cet accès général à la page.

Explication

getElementsByTagName reçoit un nom de balise et renvoie les éléments correspondants dans l’ordre du document. getElementById cherche un identifiant, querySelector renvoie le premier résultat CSS, et getElementsByClassName cherche une classe.

Explication

querySelectorAll accepte un sélecteur CSS et renvoie tous les éléments correspondants dans l’ordre de l’arbre du DOM. querySelector ne renvoie que le premier résultat, getElementsByClassName attend un nom de classe, et getElementById attend un identifiant.

Explication

innerHTML permet de lire le contenu HTML interne, balises comprises, tandis que textContent et innerText renvoient du texte sans interpréter les balises. outerHTML concerne le balisage de l’élément dans son ensemble, et non seulement son contenu interne.

Explication

L’attribut d’un élément peut être lu ou modifié directement par la propriété portant son nom : href définit la destination d’un lien. textContent concerne le texte, src la source d’une ressource comme une image, et className les classes CSS.

Explication

La création et l’ajout consistent à créer un nœud, à lui ajouter éventuellement du texte, puis à l’insérer. Insérer avant d’ajouter le texte inverse les étapes, et créer un élément ne l’ajoute pas à l’arbre du DOM.

Explication

prepend() ajoute au début de l’élément, tandis qu’append() ajoute à sa fin. Inverser leurs effets ou employer une seule méthode pour les deux textes ne les place pas aux extrémités voulues.

Explication

afterend place le contenu juste après l’élément, à l’extérieur de celui-ci. beforeend le place après son dernier enfant, tandis que beforebegin et afterbegin désignent respectivement l’extérieur avant l’élément et son début intérieur.

Explication

`addEventListener` reçoit le type d’événement puis la fonction callback à exécuter. `onclick` confond une propriété avec la méthode demandée, l’inversion des arguments ne respecte pas leur ordre, et l’option sans callback omet la fonction à exécuter.

Explication

`target` désigne l’élément où l’événement s’est produit, tandis que `currentTarget` désigne celui auquel le gestionnaire est attaché. L’inversion confond origine et gestionnaire, et les deux autres réponses supposent à tort que les deux propriétés désignent le même élément.

Explication

La capture descend de Window jusqu’à l’élément cible, puis le bouillonnement remonte de la cible jusqu’à Window. L’inversion échange les phases, tandis que les autres réponses inversent leur point de départ ou leur trajet.

Explication

Par défaut, `addEventListener` écoute la phase de bouillonnement, pendant laquelle l’événement remonte de l’enfant vers ses parents. La capture est l’autre phase, et les deux autres formulations décrivent à tort une propagation vers les descendants ou une redirection depuis la cible.

Explication

`stopPropagation()` arrête la propagation de l’événement dans l’arbre DOM. `preventDefault()` empêche l’action par défaut du navigateur, `removeEventListener()` retire un écouteur et `remove()` retire un élément.

Explication

`removeEventListener()` doit recevoir la même référence de fonction que celle transmise à `addEventListener`, afin d’identifier l’écouteur à retirer. Une nouvelle fonction a une référence différente, tandis que le type d’événement et l’élément cible ne remplacent pas cette référence.

Explication

Pour insérer du texte simple, textContent évite d’interpréter le contenu comme du HTML et réduit ainsi le risque de faille XSS. innerHTML interprète le balisage, querySelector sélectionne un élément et onclick associe un gestionnaire d’événement.

Explication

removeEventListener() doit recevoir la référence à la même fonction que celle attachée ; une fonction nommée conservée permet de la fournir. Une fonction anonyme non référencée ne peut pas être désignée ainsi, tandis qu'onclick et textContent ne fournissent pas cette référence.

Explication

Le BOM regroupe les objets exposés par Window qui représentent le navigateur, tandis que le DOM représente le document de la page. screen concerne les dimensions de l’écran et les éléments HTML appartiennent au document.

Explication

location représente l’URL courante et location.href peut recevoir une nouvelle adresse pour rediriger la page. navigator.language donne une information sur la langue, history.forward() avance dans l’historique et screen.width indique une dimension de l’écran.