Le modèle d'objet de document (DOM)

DOM signifie Document Object Model, une représentation d'un document HTML en nœuds et objets. Les navigateurs exposent une API que vous pouvez utiliser pour interagir avec le DOM. Voici comment fonctionnent les frameworks JavaScript modernes - ils utilisent l'API DOM pour indiquer au navigateur ce qu'il doit afficher sur la page

Le DOM est la représentation interne du navigateur d'une page Web. Lorsque le navigateur récupère votre code HTML sur votre serveur, l'analyseur analyse la structure de votre code et en crée un modèle. Sur la base de ce modèle, le navigateur affiche ensuite la page à l'écran.

Les navigateurs exposent une API que vous pouvez utiliser pour interagir avec le DOM. C'est ainsi que fonctionnent les frameworks JavaScript modernes: ils utilisent l'API DOM pour indiquer au navigateur ce qu'il doit afficher sur la page.

Dans les applications à page unique, le DOM change en permanence pour refléter ce qui apparaît à l'écran, et en tant que développeur, vous pouvez l'inspecter en utilisant leOutils de développement de navigateur.

Le DOM est indépendant du langage et la norme de facto pour accéder au DOM consiste à utiliserJavaScript, car c'est la seule langue que les navigateurs peuvent exécuter.

Le DOM est normalisé par WHATWG dans leSpécifications DOM Living Standard.

Avec JavaScript, vous pouvez interagir avec le DOM pour:

inspecter la structure de la page
accéder aux métadonnées et aux en-têtes de la page
modifier le style CSS
attacher ou supprimer des écouteurs d'événements
modifier n'importe quel nœud de la page
changer n'importe quel attribut de nœud

.. et beaucoup plus.

Les 2 principaux objets fournis par l'API DOM avec lesquels vous interagirez le plus sontdocumentetwindow.

L'objet Window

Lewindowobject représente la fenêtre qui contient le document DOM.

window.documentpointe vers ledocumentobjet chargé dans la fenêtre.

Les propriétés et méthodes de cet objet peuvent être appelées sans référencewindowexplicitement, car il représente l'objet global. Donc, la propriété précédentewindow.documentest généralement appelé justedocument.

Propriétés

Voici une liste de propriétés utiles que vous référencerez probablement beaucoup:

consolepointe vers la console de débogage du navigateur. Utile pour imprimer les messages d'erreur ou la journalisation, en utilisantconsole.log,console.erroret d'autres outils (voir leNavigateur DevToolsarticle)
documentcomme déjà dit, pointe vers ledocumentobjet, clé des interactions DOM que vous allez effectuer
historydonne accès auAPI historique
locationdonne accès auInterface de localisation, à partir de laquelle vous pouvez déterminer l'URL, le protocole, le hachage et d'autres informations utiles.
localStorageest une référence à laAPI de stockage Webobjet localStorage
sessionStorageest une référence à l'objet sessionStorage de l'API Web Storage

Méthodes

Lewindowobject expose également des méthodes utiles:

alert(): que vous pouvez utiliser pour afficher des boîtes de dialogue d'alerte
postMessage(): utilisé par leAPI de messagerie de canal
requestAnimationFrame(): utilisé pour réaliser des animations d'une manière à la fois performante et facile pour le processeur
setInterval(): appelle une fonction toutes les n millisecondes, jusqu'à ce que l'intervalle soit effacé avecclearInterval()
clearInterval(): efface un intervalle créé avecsetInterval()
setTimeout(): exécute une fonction après 'n' millisecondes
setImmediate(): exécuter une fonction dès que le navigateur est prêt
addEventListener(): ajouter un écouteur d'événement au document
removeEventListener(): supprimer un écouteur d'événement du document

Voir la référence complète de toutes les propriétés et méthodes duwindowobjet àhttps://developer.mozilla.org/en-US/docs/Web/API/Window

L'objet Document

Ledocumentobject représente l'arborescence DOM chargée dans une fenêtre.

Voici une représentation d'une partie du DOM pointant vers les balises head et body:

DOM, the body and head tags

Voici une représentation d'une partie du DOM montrant la balise head, contenant une balise title avec sa valeur:

DOM, the head tag with the title

Voici une représentation d'une partie du DOM montrant la balise body, contenant un lien, avec une valeur et l'attribut href avec sa valeur:

DOM, the body tag with a link

L'objet Document est accessible depuiswindow.document, et depuiswindowest l'objet global, vous pouvez utiliser le raccourcidocumentobjet directement depuis la console du navigateur, ou dans votre code JavaScript.

Cet objet Document a une tonne de propriétés et de méthodes. LeAPI des sélecteursles méthodes sont celles que vous utiliserez probablement le plus:

document.getElementById()
document.querySelector()
document.querySelectorAll()
document.getElementsByTagName()
document.getElementsByClassName()

Vous pouvez obtenir le titre du document en utilisantdocument.titleet l'URL utilisantdocument.URL. Le référent est disponible dansdocument.referrer, le domaine endocument.domain.

Dudocumentobjet, vous pouvez obtenir le corps et la têteNœuds d'élément:

document.documentElement: le nœud Document
document.body: lebodyNœud d'élément
document.head: leheadNœud d'élément

The DOM nodes

Vous pouvez également obtenir une liste de tous les nœuds d'élément d'un type particulier, comme unHTMLCollectionde tous les liens utilisantdocument.links, toutes les images utilisantdocument.images, tous les formulaires utilisantdocument.forms.

Le documentbiscuitssont accessibles dansdocument.cookie. La dernière date de modification endocument.lastModified.

Vous pouvez faire beaucoup plus, même obtenirvieille écoleet remplissez vos scripts avecdocument.write(), une méthode qui était beaucoup utilisée aux débuts de JavaScript pour interagir avec les pages.

Voir la référence complète de toutes les propriétés et méthodes dudocumentobjet àhttps://developer.mozilla.org/en-US/docs/Web/API/Document

Types de nœuds

Il existe différents types de nœuds, dont certains que vous avez déjà vus dans les images d'exemple ci-dessus. Les principaux que vous rencontrerez sont:

Document: le document Node, le début de l'arborescence
Élément: une balise HTML
Attr: un attribut d'une balise
Texte: le contenu textuel d'un élément ou d'un nœud Attr
Commenter: un commentaire HTML
Type de document: leDoctypedéclaration

Traverser le DOM

Le DOM est un arbre d'éléments, avec le nœud Document à la racine, qui pointe vers lehtmlNœud d'élément, qui à son tour pointe vers ses nœuds d'élément enfantheadetbody, etc.

À partir de chacun de ces éléments, vous pouvez naviguer dans la structure DOM et vous déplacer vers différents nœuds.

Obtenir le parent

Chaque élément ajuste unparent.

Pour l'obtenir, vous pouvez utiliserNode.parentNodeouNode.parentElement(où Node signifie un nœud dans le DOM).

Ils sont presque les mêmes, sauf lorsqu'ils sont exécutés sur lehtmlélément:parentNoderenvoie le parent du nœud spécifié dans l'arborescence DOM, tandis queparentElementrenvoie l'élément parent du nœud DOM, ou null si le nœud n'a pas de parent ou si son parent n'est pas un élément DOM.

Les gens utilisent généralementparentNode.

Obtenir les enfants

Pour vérifier si un nœud a des nœuds enfants, utilisezNode.hasChildNodes()qui renvoie une valeur booléenne.

Pour accéder à tous les nœuds d'élément enfants d'un nœud, utilisezNode.childNodes.

Le DOM expose également unNode.childrenméthode. Cependant, il n'inclut pas seulement les nœuds d'élément, mais également l'espace blanc entre les éléments en tant que nœuds de texte. Ce n'est pas quelque chose que vous voulez généralement.

Get the children of a node

Pour obtenir le premier nœud d'élément enfant, utilisezNode.firstElementChild. Pour obtenir le dernier nœud d'élément enfant, utilisezNode.lastElementChild:

To get the first or last child Element Node

Le DOM expose égalementNode.firstChildetNode.lastChild, à la différence qu'ils ne «filtrent» pas l'arborescence pour les nœuds Elément uniquement. Ils afficheront également des nœuds de texte vides qui indiquent un espace blanc.

En bref, pour parcourir les enfants, utilisez les nœuds d'élément

Node.childNodes
Node.firstElementChild
Node.lastElementChild

Obtenir les frères et sœurs

En plus d'obtenir le parent et les enfants, puisque le DOM est un arbre, vous pouvez également obtenir les frères et sœurs de n'importe quel nœud d'élément.

Vous pouvez le faire en utilisant

Node.previousElementSibling
Node.nextElementSibling

Le DOM expose égalementpreviousSiblingetnextSibling, mais comme leurs homologues décrits ci-dessus, ils incluent des espaces blancs en tant que nœuds de texte, vous les évitez donc généralement.

Modifier le DOM

Le DOM propose différentes méthodes pour éditer les nœuds de la page et modifier l'arborescence des documents.

Avec

document.createElement(): crée un nouveau nœud d'élément
document.createTextNode(): crée un nouveau nœud de texte

vous pouvez créer de nouveaux éléments et les ajouter aux éléments DOM de votre choix en tant qu'enfants, en utilisantdocument.appendChild():

const div = document.createElement('div')
div.appendChild(document.createTextNode('Hello world!'))

first.removeChild(second)supprime le nœud enfant «second» du nœud «premier».
document.insertBefore(newNode, existingNode)insère «newNode» comme frère de «existingNode», en le plaçant avant cela dans l'arborescence DOM.
element.appendChild(newChild)modifie l'arborescence sous «élément», en y ajoutant un nouveau nœud enfant «newChild», après tous les autres enfants.
element.prepend(newChild)modifie l'arborescence sous «élément», en y ajoutant un nouveau nœud enfant «newChild», avant les autres éléments enfants. Vous pouvez passer un ou plusieurs nœuds enfants, voire une chaîne qui sera interprétée comme un nœud de texte.
element.replaceChild(newChild, existingChild)modifie l'arborescence sous «element», en remplaçant «existingChild» par un nouveau Node «newChild».
element.insertAdjacentElement(position, newElement)insère «newElement» dans le DOM, positionné par rapport à «élément» en fonction de la valeur du paramètre «position».Voir les valeurs possibles.
element.textContent = 'something'change le contenu d'un nœud de texte en «quelque chose».

Téléchargez mon gratuitManuel du débutant JavaScript