Fiche de révision : DOM et manipulation des éléments

📋 Plan du Cours

1. Structure du DOM et objets navigateur
2. Sélectionner les éléments du document
3. Lire et modifier le contenu HTML
4. Modifier les attributs et le style CSS
5. Créer et insérer des éléments
6. Insertion des nœuds dans le DOM
7. Gestion des événements JavaScript
8. Propagation et contrôle des événements
9. Bonnes pratiques DOM et événements
10. Objets du navigateur BOM

📖 1. Structure du DOM et objets navigateur

🔑 Notions clés & Définitions

• DOM : Interface de programmation pour les documents HTML et XML, construite comme un arbre hiérarchique d’objets représentant toute la page.

★ À maîtriser

• L’objet Window est un objet global représentant la fenêtre du navigateur, à partir duquel le JavaScript s’exécute.

• L’objet Document est un sous-objet de Window qui représente la page web et permet d’accéder aux éléments HTML et de les modifier.

Compléments

• Chaque nœud du DOM peut représenter un élément, un attribut ou un texte.

• L’objet Window est généralement implicite : alert('Hello world!') est strictement équivalent à window.alert('Hello world!').

• Dans l’arbre du DOM, Document pointe sur <html>, qui contient <head> et <body>, puis les éléments imbriqués dans l’ordre du HTML.

• Dans le BOM, Navigator décrit l’état et l’identité du navigateur utilisé et est associé à l’API Geolocation.

• Dans le BOM, History représente l’historique du navigateur, Location les informations de l’URL courante et Screen les propriétés de l’écran.

📖 2. Sélectionner les éléments du document

★ À maîtriser

📌 getElementById reçoit un identifiant et retourne un seul élément, tandis que getElementsByTagName reçoit un nom de balise et retourne les éléments correspondants dans l’ordre du document.

📌 querySelector reçoit un sélecteur CSS et retourne le premier élément correspondant, tandis que querySelectorAll retourne tous les éléments correspondants dans l’ordre de l’arbre du DOM.

Compléments

• getElementsByClassName reçoit un nom de classe et retourne les éléments correspondants dans leur ordre dans le document.

• Les sélecteurs CSS p, .exemple, p.exemple et #demo ciblent respectivement les paragraphes, la classe exemple, les paragraphes de cette classe et l’élément d’identifiant demo.

• Un navigateur crée une propriété globale de window pour chaque élément HTML ayant un attribut id unique, mais cette pratique est déconseillée car un id peut compromettre une variable de code.

💡 Astuce mémo

querySelector renvoie le premier correspondant ; querySelectorAll les renvoie tous.

📖 3. Lire et modifier le contenu HTML

📝 Points essentiels

📌 innerHTML et outerHTML lisent ou modifient le contenu HTML d’un élément, tandis qu’outerText, innerText et textContent concernent uniquement le texte sans interpréter les balises.

💡 Astuce mémo

innerHTML interprète les balises ; textContent ne garde que le texte.

📖 4. Modifier les attributs et le style CSS

★ À maîtriser

• Les attributs d’un élément peuvent être lus ou modifiés directement comme propriétés portant leur nom, par exemple href, src ou className.

📌 Lorsqu’une propriété CSS contient un tiret, il faut le supprimer en JavaScript et mettre une majuscule au mot qui suit, comme font-size qui devient fontSize.

Compléments

• En JavaScript, l’attribut HTML class se manipule comme la propriété className, car class est un mot réservé.

• Pour manipuler les classes CSS, classList.add() et classList.remove() sont souvent préférés à className.

• Les propriétés CSS et JavaScript correspondantes sont :

  • font-size / fontSize
  • background-color / backgroundColor
  • border-style / borderStyle
  • font-weight / fontWeight
  • text-align / textAlign
  • margin-top / marginTop

💡 Astuce mémo

Un tiret CSS disparaît et laisse une majuscule à la propriété JavaScript : font-size devient fontSize.

📖 5. Créer et insérer des éléments

★ À maîtriser

• La création et l’ajout d’un élément au DOM consistent à créer un nœud, à lui ajouter éventuellement du texte, puis à l’insérer.

📌 append() peut ajouter des chaînes de caractères et plusieurs nœuds, tandis qu’appendChild() n’accepte qu’un nœud à la fois et retourne l’objet ajouté.

Compléments

• createElement() crée un nouvel élément, mais ne l’ajoute pas automatiquement à l’arbre du DOM.

• forEach parcourt les éléments sélectionnés et fournit à chaque tour l’élément courant et sa position dans la liste, commençant à 0.

• append() n’a pas de valeur de retour, tandis qu’appendChild() retourne l’objet ajouté.

• prepend() et append() insèrent respectivement un nœud ou du texte avant le premier enfant ou après le dernier enfant d’un nœud.

💡 Astuce mémo

Créer le nœud, le préparer, puis l’insérer dans le DOM.

📖 6. Insertion des nœuds dans le DOM

★ À maîtriser

• append() ajoute un nœud ou du texte à la fin d’un élément, tandis que prepend() l’ajoute au début.

• Les quatre positions de insertAdjacent...() sont :

  • « beforebegin » avant l’élément
  • « afterbegin » au début de l’élément
  • « beforeend » à la fin de l’élément
  • « afterend » après l’élément

Compléments

• insertBefore(nouveau, référence) insère le nouveau nœud juste avant l’enfant de référence.

• insertAdjacentElement(), insertAdjacentHTML() et insertAdjacentText() insèrent respectivement un élément, du HTML ou du texte à une position définie relativement à l’élément.

• removeChild() s’appelle sur le parent et retourne le nœud supprimé, tandis que remove() s’appelle directement sur l’élément à supprimer.

📖 7. Gestion des événements JavaScript

🔑 Notions clés & Définitions

• addEventListener : Méthode qui attache un écouteur en recevant le type d’événement et une fonction callback à exécuter.

★ À maîtriser

• event.target désigne l’élément où l’événement s’est produit, tandis que event.currentTarget désigne l’élément auquel le gestionnaire est attaché.

Compléments

• Les principaux événements souris sont :
  • click (clic simple)
  • dblclick (double-clic)
  • mouseover (entrée de la souris)
  • mouseout (sortie de la souris)
  • mousemove (déplacement)
  • mousedown (pression d’un bouton)
  • mouseup (relâchement)
  • contextmenu (clic droit)

📌 Un gestionnaire d’événement peut être attaché par un attribut HTML onclick, par la propriété .onclick ou avec addEventListener, cette dernière méthode étant recommandée.

• event.type contient sous forme de chaîne le type de l’événement, par exemple click, load ou error.

📖 8. Propagation et contrôle des événements

★ À maîtriser

• Un événement traverse le DOM en deux phases : la capture descend de Window jusqu’à la cible, puis le bouillonnement remonte de la cible jusqu’à Window.

• Par défaut, addEventListener écoute la phase de bouillonnement, si bien qu’un événement sur un enfant déclenche aussi les écouteurs attachés à ses parents.

• stopPropagation() arrête la propagation de l’événement dans l’arbre DOM.

• removeEventListener() exige la même référence de fonction que celle transmise à addEventListener pour retirer l’écouteur.

Compléments

• L’option { capture: true } passée comme dernier paramètre à addEventListener permet d’écouter la phase de capture.

• preventDefault() empêche le comportement par défaut du navigateur associé à l’événement.

💡 Astuce mémo

stopPropagation arrête le trajet de l’événement ; preventDefault bloque l’action par défaut du navigateur.

📖 9. Bonnes pratiques DOM et événements

★ À maîtriser

📌 Pour du texte simple, textContent est préférable à innerHTML, particulièrement lorsque le texte provient d’un utilisateur, en raison du risque de faille XSS.

Compléments

📌 Il est recommandé d’utiliser addEventListener plutôt que l’attribut HTML onclick, car cela sépare le comportement du HTML et autorise plusieurs écouteurs sur un même élément.

📌 Une fonction nommée est préférable lorsqu’un écouteur doit être retiré avec removeEventListener(), car il faut conserver la référence à la fonction attachée.

📖 10. Objets du navigateur BOM

🔑 Notions clés & Définitions

• BOM : Ensemble des objets exposés par Window qui représentent le navigateur lui-même, et non uniquement la page.

📝 Points essentiels

• navigator fournit des informations sur le navigateur, notamment son nom, sa version et sa langue.

• location représente l’URL courante et permet de rediriger la page avec location.href.

• history permet de naviguer dans l’historique avec back() et forward().

• Window fournit notamment les méthodes suivantes :

  • alert()
  • confirm()
  • prompt()
  • setTimeout()
  • setInterval()