DOM Flashcards
Qu’est-ce que le DOM et comment est-il créé ?
Le DOM (Document Object Model) est une représentation structurée hiérarchique des éléments HTML d’une page web. Lorsqu’un navigateur charge une page, il récupère le code HTML, l’analyse puis construit une structure arborescente en mémoire. Cette structure est composée de noeuds (objets) représentant chaque élément HTML, leurs attributs et leur contenu. Le DOM permet d’accéder et de manipuler dynamiquement le contenu, la structure et le style des éléments HTML de la page via JavaScript.
Expliquez les différentes méthodes pour sélectionner des éléments dans le DOM.
Il existe plusieurs méthodes pour sélectionner des éléments dans le DOM :
* getElementById(id) : sélectionne un seul élément par son attribut id unique
* getElementsByClassName(classe) : sélectionne plusieurs éléments partageant la même classe
* getElementsByTagName(balise) : sélectionne tous les éléments d’un type de balise spécifique
* querySelector(sélecteur) : sélectionne le premier élément correspondant à un sélecteur CSS
* querySelectorAll(sélecteur) : sélectionne tous les éléments correspondant à un sélecteur CSS
Le choix de la méthode dépend des besoins : sélection unique ou multiple, et le critère de sélection (id, classe, type d’élément ou sélecteur CSS complexe).
Comment ajouter et gérer des événements sur des éléments du DOM ?
Pour ajouter un écouteur d’événement à un élément du DOM, on utilise la méthode addEventListener() qui prend en paramètres le type d’événement à écouter et la fonction à exécuter lorsque l’événement se produit.
const bouton = document.querySelector(“button”);
bouton.addEventListener(“click”, function() {
console.log(“Bouton cliqué !”);
});
Un point important est qu’un écouteur est attaché à un seul élément. Pour ajouter un écouteur à plusieurs éléments (par exemple tous les éléments d’une liste), il faut boucler sur chaque élément :
const elements = document.querySelectorAll(“li”);
for (const element of elements) {
element.addEventListener(“click”, function() {
console.log(“Élément de liste cliqué !”); });}
Les types d’événements courants incluent : click, mouseover, mouseout, keydown, keyup, submit, change, etc.
Décrivez les différentes façons de modifier le contenu et l’apparence d’un élément HTML via le DOM.
Il existe plusieurs façons de modifier un élément HTML via le DOM :
1. Modification du contenu :
o element.innerHTML : modifie le contenu HTML d’un élément
o element.textContent : modifie uniquement le contenu textuel
2. Modification des attributs :
o element.setAttribute(“attribut”, “valeur”) : définit la valeur d’un attribut
o element.getAttribute(“attribut”) : récupère la valeur d’un attribut
o element.removeAttribute(“attribut”) : supprime un attribut
3. Modification des classes :
o element.classList.add(“classe”) : ajoute une classe
o element.classList.remove(“classe”) : supprime une classe
o
element.classList.toggle(“classe”) : bascule une classe (ajoute si absente, supprime si présente)
o element.classList.contains(“classe”) : vérifie si une classe existe
4. Manipulation du style :
o element.style.propriété = “valeur” : modifie directement une propriété CSS
5. Création et ajout d’éléments :
o document.createElement(“balise”) : crée un nouvel élément
o element.append(nouveauElement) : ajoute un élément à la fin
o element.prepend(nouveauElement) : ajoute un élément au début
o element.remove() : supprime un élément du DOM
Comment utiliseriez-vous les attributs data-* en HTML et comment y accéder avec JavaScript ?
Les attributs data-* permettent de stocker des informations personnalisées directement dans les éléments HTML sans affecter leur comportement natif. Ils sont particulièrement utiles pour associer des données à des éléments HTML qui seront utilisées par JavaScript.
En HTML, ils se définissent avec le préfixe “data-“ suivi d’un nom personnalisé :
Html <div id="produit" data-id="123" data-prix="29.99" data-categorie="electronique">Smartphone</div>
En JavaScript, on peut y accéder de deux façons :
1. Via la propriété dataset (recommandée) :
Javascript : const produit = document.getElementById(“produit”);
console.log(produit.dataset.id); // “123”
console.log(produit.dataset.prix); // “29.99”
console.log(produit.dataset.categorie); // “electronique”
2. Via getAttribute :
produit.getAttribute(“data-id”);
Pour modifier ces valeurs :
Javascript : produit.dataset.prix = “39.99”;
// ou
produit.setAttribute(“data-prix”, “39.99”);
Les attributs data-* sont utiles pour :
* tocker des données associées à des éléments sans recourir à des variables JavaScript globales
* Faciliter la communication entre HTML et JavaScript
* Améliorer la sémantique du code en maintenant la séparation des préoccupations
Quelle est la différence entre les méthodes innerHTML, textContent et innerText pour modifier le contenu d’un élément HTML ?
:nnerHTML : Permet de définir ou récupérer le contenu HTML d’un élément. Il interprète les balises HTML. Cela peut présenter des risques de sécurité (XSS) si on injecte du contenu non contrôlé.
* textContent : Permet de définir ou récupérer le contenu textuel d’un élément, y compris le texte des éléments cachés par CSS. Il n’interprète pas les balises HTML et les affiche telles quelles, ce qui le rend plus sûr pour l’affichage de contenu fourni par l’utilisateur.
* innerText : Similaire à textContent, mais tient compte du style CSS appliqué et ne renvoie que le texte visible à l’écran. Il est plus lent car il nécessite un calcul de mise en page.
Exemple :
html
<div>
<span>Caché</span>
<span>Visible</span>
</div>
Avec JavaScript :
javascript
const div = document.getElementById(“exemple”);
console.log(div.innerHTML); // “<span>Caché</span><span>Visible</span>”
console.log(div.textContent); // “CachéVisible” (inclut le texte caché)
console.log(div.innerText); // “Visible” (seulement le texte visible)
Comment créer dynamiquement des éléments HTML et les ajouter au DOM ?
Pour créer dynamiquement des éléments HTML et les ajouter au DOM, on procède généralement en trois étapes :
1. Création de l’élément avec document.createElement()
2. Configuration de l’élément (attributs, contenu, style)
3. Insertion dans le DOM avec des méthodes comme append(), prepend(), before(), after() ou replaceWith()
Exemple complet :
javascript
// 1. Création de l’élément
const nouvelElement = document.createElement(“div”);
// 2. Configuration de l’élément
nouvelElement.id = “monNouvelElement”;
nouvelElement.className = “conteneur”;
nouvelElement.textContent = “Contenu dynamique”;
nouvelElement.style.color = “blue”;
nouvelElement.setAttribute(“data-info”, “valeur personnalisée”);
// 3. Insertion dans le DOM
document.body.append(nouvelElement); // Ajoute à la fin du body
// Variantes d’insertion
const referenceElement = document.getElementById(“reference”);
referenceElement.before(nouvelElement); // Insère avant l’élément de référence
referenceElement.after(nouvelElement); // Insère après l’élément de référence
referenceElement.prepend(nouvelElement); // Insère au début des enfants de l’élément de référence
referenceElement.replaceWith(nouvelElement); // Remplace l’élément de référence
Pour créer une structure plus complexe :
// Création d’une liste avec des éléments
const liste = document.createElement(“ul”);
liste.className = “ma-liste”;
for (let i = 1; i <= 3; i++) {
const item = document.createElement(“li”);
item.textContent = Item ${i};
liste.append(item);}
document.body.append(liste);
Comment optimiser les manipulations du DOM pour de meilleures performances ?
Voici les principales techniques pour optimiser les manipulations du DOM :
1. Minimiser les manipulations directes du DOM :
o Regrouper les modifications pour réduire les reflows/repaints
o Utiliser un fragment de document (DocumentFragment) pour préparer plusieurs éléments avant de les ajouter au DOM
2. Privilégier les méthodes de sélection efficaces :
o Utiliser getElementById() qui est plus rapide que querySelector()
o Limiter la portée des sélecteurs (ne pas sélectionner depuis le document entier si possible)
o Mettre en cache les références aux éléments fréquemment utilisés
3. Utiliser la délégation d’événements :
o Attacher un seul écouteur d’événement à un parent plutôt qu’à chaque enfant
o Particulièrement utile pour les listes dynamiques ou les tableaux avec beaucoup d’éléments
4. Éviter les mises en page forcées (forced layout/reflow) :
o Éviter de lire des propriétés de mise en page (offsetWidth, offsetHeight) juste après avoir modifié le DOM
o Regrouper les lectures avant les écritures
5. Utiliser les classes CSS plutôt que de manipuler directement le style :
o Modifier element.classList plutôt que element.style
o Définir les styles dans CSS et les appliquer/retirer via JavaScript
6. Considérer l’utilisation de requestAnimationFrame pour les animations ou les mises à jour visuelles fréquentes
Exemple de code optimisé :
// Non optimisé : for (let i = 0; i < 1000; i++) {
const div = document.createElement(‘div’);
div.textContent = Item ${i};
document.body.appendChild(div); // Provoque un reflow à chaque itération}
// Optimisé avec DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const div = document.createElement(‘div’);
div.textContent = Item ${i};
fragment.appendChild(div);}
document.body.appendChild(fragment); // Un seul reflow à la fin
Comment gérer la propagation des événements dans le DOM ?
La propagation des événements dans le DOM se fait en trois phases :
1. Phase de capture : L’événement descend de l’élément racine jusqu’à l’élément cible
2. Phase de cible : L’événement atteint l’élément cible
3. Phase de bouillonnement (bubbling) : L’événement remonte de l’élément cible jusqu’à l’élément racine
Pour contrôler cette propagation, plusieurs méthodes sont disponibles:
* event.stopPropagation() : Arrête la propagation de l’événement aux autres éléments
* event.stopImmediatePropagation() : Arrête la propagation et empêche d’autres gestionnaires sur le même élément d’être exécutés
* event.preventDefault() : Empêche le comportement par défaut de l’événement (par exemple, empêcher un formulaire d’être soumis)
Pour définir si un écouteur doit être déclenché pendant la phase de capture ou de bouillonnement, on utilise le troisième paramètre de addEventListener :
javascript
// Écoute pendant la phase de bouillonnement (comportement par défaut)
element.addEventListener(‘click’, handler, false);
// Écoute pendant la phase de capture
element.addEventListener(‘click’, handler, true);
Délégation d’événements : Cette technique tire parti de la propagation des événements. On attache un seul écouteur d’événement à un parent commun plutôt qu’à chaque enfant :
javascript
// Au lieu d’attacher un écouteur à chaque <li>
document.querySelector(‘ul’).addEventListener(‘click’, function(event) { // Vérifier que l’élément cliqué est bien un <li>
if (event.target.tagName === ‘LI’) { console.log(‘Li cliqué :’, event.target.textContent); }});
Cela permet de :
* Réduire le nombre d’écouteurs d’événements
* Gérer automatiquement les éléments ajoutés dynamiquement
* Améliorer les performances, particulièrement pour les listes nombreuses
Comment la sécurité doit-elle être prise en compte lors de la manipulation du DOM ?
La manipulation du DOM peut exposer l’application à plusieurs risques de sécurité, notamment :
1. Attaques XSS (Cross-Site Scripting) : Principal risque lors de la manipulation du DOM.
o Éviter d’utiliser innerHTML avec des données non validées
o Préférer textContent ou innerText pour afficher du contenu fourni par l’utilisateur
o Si innerHTML est nécessaire, toujours assainir/échapper le contenu avec des fonctions dédiées
2. DOM-based XSS : Attaque XSS spécifique où le code malveillant est exécuté par le JavaScript de la page.
o Valider et assainir toutes les entrées, particulièrement celles provenant de l’URL (location.hash, query strings)
o Éviter d’exécuter dynamiquement du JavaScript (eval(), new Function(), setTimeout/setInterval avec des chaînes)
3. Protection lors de la création d’éléments :
// Dangereux si userInput contient du code malveillant
element.innerHTML = userInput;
// Plus sûr
element.textContent = userInput;
// Alternative pour créer des éléments de manière sécurisée
const div = document.createElement(‘div’);
div.textContent = userInput;
parentElement.appendChild(div);
4. Sécurisation des formulaires et des données :
o Valider les données côté client ET côté serveur
o Utiliser des attributs comme novalidate et implémenter une validation personnalisée
o Implémenter des tokens CSRF pour les formulaires
5. Content Security Policy (CSP) : Implémenter des en-têtes CSP pour limiter les sources de contenu et bloquer les scripts inline
6. Protection contre le clickjacking : Utiliser les en-têtes X-Frame-Options ou frame-ancestors dans CSP
7. Événements et délégation : Lors de l’utilisation de la délégation d’événements, valider soigneusement les éléments cibles avant d’effectuer des actions
8. Attributs data-* :Ne pas stocker d’informations sensibles dans les attributs data-* car ils sont visibles dans le code source
Ces pratiques de sécurité sont particulièrement importantes dans le contexte du développement web et web mobile pour garantir la protection des utilisateurs et des données.
