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 sontdocument
etwindow
.
L'objet Window
Lewindow
object représente la fenêtre qui contient le document DOM.
window.document
pointe vers ledocument
objet chargé dans la fenêtre.
Les propriétés et méthodes de cet objet peuvent être appelées sans référencewindow
explicitement, car il représente l'objet global. Donc, la propriété précédentewindow.document
est généralement appelé justedocument
.
Propriétés
Voici une liste de propriétés utiles que vous référencerez probablement beaucoup:
console
pointe vers la console de débogage du navigateur. Utile pour imprimer les messages d'erreur ou la journalisation, en utilisantconsole.log
,console.error
et d'autres outils (voir leNavigateur DevToolsarticle)document
comme déjà dit, pointe vers ledocument
objet, clé des interactions DOM que vous allez effectuerhistory
donne accès auAPI historiquelocation
donne accès auInterface de localisation, à partir de laquelle vous pouvez déterminer l'URL, le protocole, le hachage et d'autres informations utiles.localStorage
est une référence à laAPI de stockage Webobjet localStoragesessionStorage
est une référence à l'objet sessionStorage de l'API Web Storage
Méthodes
Lewindow
object expose également des méthodes utiles:
alert()
: que vous pouvez utiliser pour afficher des boîtes de dialogue d'alertepostMessage()
: utilisé par leAPI de messagerie de canalrequestAnimationFrame()
: utilisé pour réaliser des animations d'une manière à la fois performante et facile pour le processeursetInterval()
: 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' millisecondessetImmediate()
: exécuter une fonction dès que le navigateur est prêtaddEventListener()
: ajouter un écouteur d'événement au documentremoveEventListener()
: supprimer un écouteur d'événement du document
Voir la référence complète de toutes les propriétés et méthodes duwindow
objet àhttps://developer.mozilla.org/en-US/docs/Web/API/Window
L'objet Document
Ledocument
object 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:
Voici une représentation d'une partie du DOM montrant la balise head, contenant une balise title avec sa valeur:
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:
L'objet Document est accessible depuiswindow.document
, et depuiswindow
est l'objet global, vous pouvez utiliser le raccourcidocument
objet 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.title
et l'URL utilisantdocument.URL
. Le référent est disponible dansdocument.referrer
, le domaine endocument.domain
.
Dudocument
objet, vous pouvez obtenir le corps et la têteNœuds d'élément:
document.documentElement
: le nœud Documentdocument.body
: lebody
Nœud d'élémentdocument.head
: lehead
Nœud d'élément
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 dudocument
objet à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 lehtml
Nœud d'élément, qui à son tour pointe vers ses nœuds d'élément enfanthead
etbody
, 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.parentNode
ouNode.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:parentNode
renvoie le parent du nœud spécifié dans l'arborescence DOM, tandis queparentElement
renvoie 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.children
mé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.
Pour obtenir le premier nœud d'élément enfant, utilisezNode.firstElementChild
. Pour obtenir le dernier nœud d'élément enfant, utilisezNode.lastElementChild
:
Le DOM expose égalementNode.firstChild
etNode.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 égalementpreviousSibling
etnextSibling
, 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émentdocument.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
Plus de didacticiels sur le navigateur:
- Quelques astuces utiles disponibles en HTML5
- Comment j'ai fait fonctionner un site Web basé sur un CMS hors ligne
- Le guide complet des applications Web progressives
- L'API Fetch
- Le guide de l'API Push
- L'API Channel Messaging
- Tutoriel pour les techniciens de service
- Le guide de l'API Cache
- Le guide de l'API de notification
- Plongez dans IndexedDB
- L'API Selectors: querySelector et querySelectorAll
- Chargez efficacement JavaScript avec différé et asynchrone
- Le modèle d'objet de document (DOM)
- L'API Web Storage: stockage local et stockage de session
- Découvrez comment fonctionnent les cookies HTTP
- L'API History
- Le format d'image WebP
- XMLHttpRequest (XHR)
- Un tutoriel SVG approfondi
- Que sont les URL de données
- Feuille de route pour apprendre la plate-forme Web
- CORS, partage de ressources inter-origines
- Travailleurs Web
- Le guide requestAnimationFrame ()
- Quel est le Doctype
- Utilisation de la console DevTools et de l'API de la console
- L'API de synthèse vocale
- Comment attendre l'événement DOM ready en JavaScript brut
- Comment ajouter une classe à un élément DOM
- Comment faire une boucle sur des éléments DOM à partir de querySelectorAll
- Comment supprimer une classe d'un élément DOM
- Comment vérifier si un élément DOM a une classe
- Comment modifier la valeur d'un nœud DOM
- Comment ajouter un événement de clic à une liste d'éléments DOM renvoyés par querySelectorAll
- WebRTC, l'API Web en temps réel
- Comment obtenir la position de défilement d'un élément en JavaScript
- Comment remplacer un élément DOM
- Comment accepter uniquement les images dans un champ de fichier d'entrée
- Pourquoi utiliser une version préliminaire d'un navigateur?
- L'objet Blob
- L'objet fichier
- L'objet FileReader
- L'objet FileList
- ArrayBuffer
- ArrayBufferView
- L'objet URL
- Tableaux typés
- L'objet DataView
- L'API BroadcastChannel
- L'API Streams
- L'objet FormData
- L'objet Navigateur
- Comment utiliser l'API de géolocalisation
- Comment utiliser getUserMedia ()
- Comment utiliser l'API Drag and Drop
- Comment travailler avec le défilement sur les pages Web
- Gestion des formulaires en JavaScript
- Événements de clavier
- Événements de souris
- Événements tactiles
- Comment supprimer tous les enfants d'un élément DOM
- Comment créer un attribut HTML à l'aide de JavaScript vanille
- Comment vérifier si une case est cochée à l'aide de JavaScript?
- Comment copier dans le presse-papiers à l'aide de JavaScript
- Comment désactiver un bouton à l'aide de JavaScript
- Comment rendre une page modifiable dans le navigateur
- Comment obtenir des valeurs de chaîne de requête en JavaScript avec URLSearchParams
- Comment supprimer tous les CSS d'une page à la fois
- Comment utiliser insertAdjacentHTML
- Safari, prévenez avant de quitter
- Comment ajouter une image au DOM en utilisant JavaScript
- Comment réinitialiser un formulaire
- Comment utiliser Google Fonts