Regardez la vidéo et suivez ces tutoriels interactifs pour apprendre les bases de l'affichage et de la modification du DOM d'une page à l'aide des outils pour les développeurs Chrome.
Dans ce tutoriel, nous partons du principe que vous connaissez la différence entre le DOM et le HTML. Pour en savoir plus, consultez l'article Annexe: HTML et DOM.
Afficher les nœuds DOM
L'arborescence DOM du panneau "Elements" vous permet d'effectuer toutes les activités liées au DOM dans les outils de développement.
Inspecter un nœud
Lorsque vous êtes intéressé par un nœud DOM particulier, l'outil Inspect (Inspecter) permet d'ouvrir rapidement les outils de développement et d'examiner ce nœud.
- Effectuez un clic droit sur Michelangelo (Michelangelo) ci-dessous et sélectionnez Inspect (Inspecter).
- Michel-Ange
- Raphael
Le panneau Elements des outils de développement s'ouvre.
<li>Michelangelo</li>
est mis en évidence dans l'arborescence DOM.
- Cliquez sur l'icône Inspect (Inspecter) dans l'angle supérieur gauche des outils de développement.
Cliquez sur le texte Tokyo ci-dessous.
- Tokyo
Beyrouth
<li>Tokyo</li>
est maintenant mis en surbrillance dans l'arborescence DOM.
L'inspection d'un nœud constitue également la première étape pour afficher et modifier ses styles. Consultez la section Premiers pas avec l'affichage et la modification des fichiers CSS.
Parcourir l'arborescence DOM à l'aide d'un clavier
Une fois que vous avez sélectionné un nœud dans l'arborescence DOM, vous pouvez la parcourir à l'aide du clavier.
Effectuez un clic droit sur Ringo ci-dessous, puis sélectionnez Inspecter.
<li>Ringo</li>
est sélectionné dans l'arborescence DOM.- George
- Ringo
- Paul
Jean
Appuyez deux fois sur la flèche vers le haut.
<ul>
est sélectionné.Appuyez sur la flèche vers la gauche. La liste
<ul>
se réduit.Appuyez de nouveau sur la flèche vers la gauche. Le parent du nœud
<ul>
est sélectionné. Dans ce cas, il s'agit du nœud<li>
qui contient les instructions de l'étape 1.Appuyez trois fois sur la flèche vers le bas pour sélectionner à nouveau la liste
<ul>
que vous venez de réduire. Le résultat doit se présenter comme suit:<ul>...</ul>
Appuyez sur la flèche vers la droite. La liste s'agrandit.
Faire défiler jusqu'à l'affichage
Lorsque vous affichez l'arborescence DOM, un nœud DOM qui ne se trouve pas actuellement dans la fenêtre d'affichage peut vous intéresser. Par exemple, supposons que vous ayez fait défiler la page jusqu'en bas et que le nœud <h1>
en haut de la page vous intéresse. L'option Faire défiler l'écran dans la vue vous permet de repositionner rapidement la fenêtre d'affichage afin de voir le nœud.
Effectuez un clic droit sur Magritte ci-dessous et sélectionnez Inspecter.
- Magritte
- Soutines
Accédez à la section Annexe: Faire défiler pour afficher au bas de cette page. Vous y trouverez les instructions à suivre.
Après avoir suivi les instructions en bas de la page, revenez ici.
Afficher les règles
Grâce aux règles au-dessus et à gauche de votre fenêtre d'affichage, vous pouvez mesurer la largeur et la hauteur d'un élément lorsque vous passez la souris dessus dans le panneau Éléments.
Vous pouvez activer les règles de deux manières:
- Appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (Mac) pour ouvrir le menu Commande, saisissez
Show rulers on hover
, puis appuyez sur Entrée. - Cochez la case Paramètres > Préférences > Éléments > Afficher les règles au passage de la souris.
L'unité de taille des règles est le pixel.
Rechercher des nœuds
Vous pouvez effectuer une recherche dans l'arborescence DOM par chaîne, sélecteur CSS ou sélecteur XPath.
- Placez le curseur sur le panneau Éléments.
- Appuyez sur les touches Ctrl+F ou Cmd+F (Mac). La barre de recherche s'ouvre au bas de l'arborescence DOM.
Tapez
The Moon is a Harsh Mistress
. La dernière phrase est mise en surbrillance dans l'arborescence DOM.
Comme indiqué ci-dessus, la barre de recherche est également compatible avec les sélecteurs CSS et XPath.
Le panneau Éléments sélectionne le premier résultat correspondant dans l'arborescence DOM et l'affiche dans la fenêtre d'affichage. Par défaut, cela se produit à mesure que vous saisissez du texte. Si vous travaillez toujours avec des requêtes de recherche longues, vous pouvez configurer les outils de développement pour qu'ils n'exécutent la recherche que lorsque vous appuyez sur Entrée.
Pour éviter les sauts inutiles entre les nœuds, décochez la case Settings > Preferences > Global > Search as you type (Paramètres > Préférences > Global > Recherche en cours de saisie).
Modifier le DOM
Vous pouvez modifier le DOM à la volée et voir comment ces changements affectent la page.
Modifier le contenu
Pour modifier le contenu d'un nœud, double-cliquez sur ce contenu dans l'arborescence DOM.
Effectuez un clic droit sur Michelle ci-dessous et sélectionnez Inspecter.
- Frire
- Michelle
Dans l'arborescence DOM, double-cliquez sur
Michelle
. En d'autres termes, double-cliquez sur le texte situé entre<li>
et</li>
. Le texte est surligné en bleu pour indiquer qu'il est sélectionné.Supprimez
Michelle
, saisissezLeela
, puis appuyez sur Entrée pour confirmer la modification. Le texte ci-dessus passe de Michelle à Leela.
Modifier les attributs
Pour modifier un attribut, double-cliquez sur son nom ou sa valeur. Suivez les instructions ci-dessous pour savoir comment ajouter des attributs à un nœud.
Effectuez un clic droit sur Howard ci-dessous et sélectionnez Inspecter.
- Howard
- Vince
Double-cliquez sur
<li>
. Le texte est mis en surbrillance pour indiquer que le nœud est sélectionné.Appuyez sur la flèche vers la droite, ajoutez un espace, saisissez
style="background-color:gold"
, puis appuyez sur Entrée. La couleur d'arrière-plan du nœud devient jaune.
Vous pouvez également utiliser l'option Modifier l'attribut en effectuant un clic droit.
Modifier le type de nœud
Pour modifier le type d'un nœud, double-cliquez sur son type, puis saisissez le nouveau type.
Effectuez un clic droit sur Hank ci-dessous et sélectionnez Inspecter.
- Doyen
- Hank
- Thaddée
- Brock
Double-cliquez sur
<li>
. Le texteli
est mis en surbrillance.Supprimez
li
, saisissezbutton
, puis appuyez sur Entrée. Le nœud<li>
devient un nœud<button>
.
Modifier au format HTML
Pour modifier des nœuds au format HTML avec mise en surbrillance syntaxique et saisie semi-automatique, sélectionnez Modifier au format HTML dans le menu déroulant du nœud.
Effectuez un clic droit sur Leonard ci-dessous et sélectionnez Inspecter.
- Penny
- Howard
- Rajesh
- Leonard
Dans le panneau Éléments, effectuez un clic droit sur le nœud actuel, puis sélectionnez Modifier au format HTML dans le menu déroulant.
Appuyez sur Entrée pour commencer une nouvelle ligne et commencer à saisir
<l
. L'outil de développement met en évidence la syntaxe HTML et effectue la saisie semi-automatique des balises.Sélectionnez l'élément
li
dans le menu de saisie semi-automatique, puis saisissez>
. Les outils de développement ajoutent automatiquement la balise de fermeture</li>
après le curseur.Saisissez
Sheldon
dans la balise, puis appuyez sur Ctrl / Commande+Entrée pour appliquer les modifications.
Dupliquer un nœud
Vous pouvez dupliquer un élément à l'aide de l'option Dupliquer l'élément.
Effectuez un clic droit sur Nana ci-dessous et sélectionnez Inspecter.
- Feu de la vanité
- Nana
- Orlando
- Bruit blanc
Dans le panneau Éléments, effectuez un clic droit sur
<li>Nana</li>
, puis sélectionnez Dupliquer l'élément dans le menu déroulant.Revenez à la page. L'élément de la liste a été dupliqué instantanément.
Vous pouvez également utiliser les raccourcis clavier: Maj+Alt+Flèche vers le bas (Windows et Linux) ou Maj+Option+Flèche vers le bas (macOS).
Effectuer une capture d'écran d'un nœud
Vous pouvez effectuer une capture d'écran de n'importe quel nœud de l'arborescence DOM à l'aide de l'option Capturer la capture d'écran du nœud.
Effectuez un clic droit sur une image de cette page, puis sélectionnez Inspecter.
Dans le panneau Éléments, effectuez un clic droit sur l'URL de l'image, puis sélectionnez Faire une capture d'écran du nœud dans le menu déroulant.
La capture d'écran sera enregistrée dans vos téléchargements.
Réorganiser les nœuds DOM
Faites glisser les nœuds pour les réorganiser.
Effectuez un clic droit sur Elvis Presley ci-dessous, puis sélectionnez Inspecter. Notez qu'il s'agit du dernier élément de la liste.
- Stevie Wonder
- Tom attend
- Chris Thile
- Elvis Presley
Dans l'arborescence DOM, faites glisser
<li>Elvis Presley</li>
vers le haut de la liste.
Forcer l'état
Vous pouvez forcer les nœuds à rester dans des états tels que :active
, :hover
, :focus
, :visited
et :focus-within
.
Passez la souris sur Le Seigneur des mouches ci-dessous. La couleur d'arrière-plan devient orange.
- Le Seigneur des mouches
- Crime et sanctions
- Moby dick
Effectuez un clic droit sur le Seigneur des mouches ci-dessus et sélectionnez Inspecter.
Effectuez un clic droit sur
<li class="demo--hover">The Lord of the Flies</li>
, puis sélectionnez Forcer l'état > :hover. Si vous ne voyez pas cette option, consultez la section Annexe: Options manquantes. La couleur d'arrière-plan reste orange même si vous ne survolez pas le nœud.
Masquer un nœud
Appuyez sur H pour masquer un nœud.
Effectuez un clic droit sur The Stars My Destination ci-dessous, puis sélectionnez Inspecter.
- Le Comte de Monte-Cristo
- The Stars : ma destination
Appuyez sur la touche H. Le nœud est masqué. Vous pouvez également effectuer un clic droit sur le nœud et utiliser l'option Masquer l'élément.
Appuyez de nouveau sur la touche H. Le nœud s'affiche à nouveau.
Supprimer un nœud
Pour supprimer un nœud, appuyez sur Supprimer.
Effectuez un clic droit sur Foundation ci-dessous et sélectionnez Inspecter.
- L'Homme illustré
- À travers le miroir
- Modèles
Appuyez sur la touche Suppr. Le nœud est supprimé. Vous pouvez également effectuer un clic droit sur le nœud et utiliser l'option Supprimer l'élément.
Appuyez sur les touches Ctrl+Z ou Cmd+Z (Mac). La dernière action est annulée et le nœud réapparaît.
Accéder aux nœuds dans la console
Les outils de développement fournissent quelques raccourcis pour accéder aux nœuds DOM à partir de la console ou pour obtenir des références JavaScript à ceux-ci.
Faire référence au nœud actuellement sélectionné avec $0
Lorsque vous inspectez un nœud, le texte == $0
à côté du nœud signifie que vous pouvez référencer ce nœud dans la console avec la variable $0
.
Effectuez un clic droit sur La main gauche de l'obscurité ci-dessous et sélectionnez Inspecter.
- La main gauche des ténèbres
- Dune
Appuyez sur la touche Échap pour ouvrir le panneau de la console.
Saisissez
$0
, puis appuyez sur la touche Entrée. Le résultat de l'expression indique que$0
renvoie<li>The Left Hand of Darkness</li>
.Pointez sur le résultat. Le nœud est mis en évidence dans la fenêtre d'affichage.
Cliquez sur
<li>Dune</li>
dans l'arborescence DOM, saisissez à nouveau$0
dans la console, puis appuyez à nouveau sur Entrée.$0
renvoie maintenant<li>Dune</li>
.
Stocker en tant que variable globale
Si vous devez vous référer à un nœud de nombreuses fois, stockez-le en tant que variable globale.
Effectuez un clic droit sur The Big Sleep ci-dessous et sélectionnez Inspecter.
- The Big Sleep
- Long adieu
Effectuez un clic droit sur
<li>The Big Sleep</li>
dans l'arborescence DOM, puis sélectionnez Store as global variable (Stocker en tant que variable globale). Si vous ne voyez pas cette option, consultez la section Annexe: Options manquantes.Saisissez
temp1
dans la console, puis appuyez sur Entrée. Le résultat de l'expression indique que la variable est évaluée sur le nœud.
Copier le chemin JS
Copiez le chemin JavaScript vers un nœud lorsque vous devez le référencer dans un test automatisé.
Effectuez un clic droit sur The Brothers Karamazov ci-dessous et sélectionnez Inspecter.
- Les frères Karamazov
- Crime et sanctions
Effectuez un clic droit sur
<li>The Brothers Karamazov</li>
dans l'arborescence DOM, puis sélectionnez Copy > Copy JS Path (Copier > Copier le chemin JS). Une expressiondocument.querySelector()
qui résout le nœud a été copiée dans le presse-papiers.Appuyez sur Ctrl+V ou Cmd+V (Mac) pour coller l'expression dans la console.
Appuyez sur Entrée pour évaluer l'expression.
Interrompre en cas de modifications DOM
Les outils de développement vous permettent de suspendre le code JavaScript d'une page lorsque le code JavaScript modifie le DOM. Consultez la section Points d'arrêt liés à la modification du DOM.
Étapes suivantes
Nous aborderons la plupart des fonctionnalités liées au DOM dans les outils de développement. Pour découvrir les autres éléments, effectuez un clic droit sur les nœuds dans l'arborescence DOM et testez les autres options qui n'ont pas été abordées dans ce tutoriel. Consultez également l'article Raccourcis clavier du panneau "Éléments".
Consultez la page d'accueil des outils pour les développeurs Chrome pour découvrir tout ce que vous pouvez faire avec ces outils.
Consultez la page Communauté si vous souhaitez contacter l'équipe chargée des outils de développement ou obtenir de l'aide auprès de cette communauté.
Annexe: Comparaison entre HTML et DOM
Cette section explique rapidement la différence entre le code HTML et le DOM.
Lorsque vous utilisez un navigateur Web pour demander une page comme https://example.com
, le serveur renvoie du code HTML de ce type:
<!doctype html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a hypertext document on the World Wide Web.</p>
<script src="/script.js" async></script>
</body>
</html>
Le navigateur analyse le code HTML et crée une arborescence d'objets comme celle-ci:
html
head
title
body
h1
p
script
Cette arborescence d'objets, ou nœuds, représentant le contenu de la page, est appelée DOM. Pour le moment, il ressemble à la version HTML, mais supposons que le script référencé en bas du code HTML exécute le code suivant:
const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);
Ce code supprime le nœud h1
et ajoute un autre nœud p
au DOM. Le DOM complet ressemble maintenant à ceci:
html
head
title
body
p
script
p
Le code HTML de la page est désormais différent de son DOM. En d'autres termes, HTML représente le contenu initial de la page et le DOM représente le contenu actuel de la page. Lorsque JavaScript ajoute, supprime ou modifie des nœuds, le DOM devient différent du HTML.
Pour en savoir plus, consultez l'article Présentation du DOM.
Annexe: Faire défiler jusqu'à l'affichage
Ceci fait suite à la section Faire défiler la page jusqu'à la vue. Suivez les instructions ci-dessous pour terminer la section.
- Le nœud
<li>Magritte</li>
doit toujours être sélectionné dans votre arborescence DOM. Si ce n'est pas le cas, revenez à la section Faire défiler la page pour l'afficher et recommencez. Effectuez un clic droit sur le nœud
<li>Magritte</li>
, puis sélectionnez Faire défiler jusqu'à la vue. La fenêtre d'affichage défile vers le haut afin que vous puissiez voir le nœud Magritte. Consultez la section Annexe: Options manquantes si vous ne voyez pas l'option Faire défiler la page pour s'afficher à l'écran.
Annexe: Options manquantes
La plupart des instructions de ce tutoriel vous demandent de faire un clic droit sur un nœud dans l'arborescence DOM, puis de sélectionner une option dans le menu contextuel qui s'affiche. Si vous ne voyez pas l'option spécifiée dans le menu contextuel, essayez de faire un clic droit en dehors du texte du nœud.