Afficher et modifier le DOM

Kayce Basques

Sofia Emelianova

Regardez la vidéo et suivez ces tutoriels interactifs pour apprendre à afficher et à modifier le DOM d'une page avec les outils pour les développeurs Chrome.

Dans ce tutoriel, nous partons du principe que vous connaissez la différence entre le DOM et le code HTML. Pour vous rafraîchir la mémoire, consultez l'annexe : HTML et DOM.

Afficher les nœuds DOM

L'arborescence DOM du panneau Éléments est l'endroit où vous effectuez toutes les activités liées au DOM dans les outils de développement.

Inspecter un nœud

Lorsque vous vous intéressez à un nœud DOM particulier, l'option Inspecter est un moyen rapide d'ouvrir les outils de développement et d'examiner ce nœud.

1. Dans la liste suivante, effectuez un clic droit sur Michelangelo. Dans le menu, sélectionnez Inspecter.

   • Michel-Ange
   • Raphaël

   Le panneau Éléments des outils de développement s'ouvre. <li>Michelangelo</li> est mis en surbrillance dans l'arborescence DOM.

   

2. Cliquez sur  > Sélectionner un élément.

3. Sélectionnez Tokyo dans la liste suivante.

   • Tokyo
   • Beyrouth

   <li>Tokyo</li> est mis en évidence dans l'arborescence DOM.

L'inspection d'un nœud est également la première étape pour afficher et modifier les styles et le CSS d'un nœud.

Parcourir l'arborescence DOM avec un clavier

Une fois que vous avez sélectionné un nœud dans l'arborescence DOM, vous pouvez parcourir l'arborescence DOM avec votre clavier.

1. Dans la liste suivante, effectuez un clic droit sur Ringo, puis sélectionnez Inspecter. <li>Ringo</li> est sélectionné dans l'arborescence DOM.

   • George
   • Ringo
   • Paul

   • John

     

2. Appuyez deux fois sur la flèche vers le haut. <ul> sélectionné.

   

3. Appuyez sur la flèche vers la gauche. La liste <ul> se réduit.

4. Appuyez à 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> contenant les instructions de l'étape 1.

5. Appuyez trois fois sur la flèche vers le bas pour sélectionner à nouveau la liste <ul> que vous venez de réduire. Votre écran devrait ressembler à ceci : <ul>...</ul>

6. Appuyez sur la flèche vers la droite. La liste se développe.

Faire défiler pour afficher

Lorsque vous consultez l'arborescence DOM, vous vous retrouvez parfois dans un nœud DOM qui ne se trouve pas dans la fenêtre d'affichage. Par exemple, supposons que vous ayez fait défiler la page jusqu'en bas et que vous vous intéressiez au nœud <h1> en haut de la page. L'option Faire défiler jusqu'à la vue vous permet de repositionner rapidement la fenêtre d'affichage pour voir le nœud.

1. Dans la liste suivante, effectuez un clic droit sur Magritte, puis sélectionnez Inspecter.

   • Magritte
   • Soutine

2. Pour obtenir des instructions supplémentaires, faites défiler la page jusqu'à la section Faire défiler l'élément pour l'afficher de l'annexe.

Une fois l'opération terminée, vous devriez revenir à cette section.

Afficher les règles

Avec les règles dans votre fenêtre d'affichage, vous pouvez mesurer la largeur et la hauteur d'un élément lorsque vous pointez dessus dans le panneau Éléments.

Activez les règles de l'une des deux manières suivantes :

• Appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (macOS) pour ouvrir le menu de commande, saisissez Show rulers on hover, puis appuyez sur Entrée.
• Vérifiez les paramètres Paramètres > Préférences > Éléments > Afficher les règles au survol.

L'unité de mesure 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.

1. Placez le curseur sur le panneau Éléments.
2. Appuyez sur Ctrl+F ou Cmd+F (macOS). La barre de recherche s'ouvre en bas de l'arborescence DOM.

3. Tapez The Moon is a Harsh Mistress. La dernière phrase est mise en évidence dans l'arborescence DOM.

   

La barre de recherche accepte également les sélecteurs CSS et XPath.

Le panneau Éléments sélectionne le premier résultat correspondant dans l'arborescence DOM et le fait défiler dans la fenêtre d'affichage. Par défaut, cela se produit au fur et à mesure que vous tapez. 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 Paramètres > Préférences > Global > Rechercher pendant la saisie.

Modifier le DOM

Vous pouvez modifier le DOM à la volée et voir l'impact de ces modifications sur la page.

Modifier le contenu

Pour modifier le contenu d'un nœud, double-cliquez dessus dans l'arborescence DOM.

1. Dans la liste suivante, effectuez un clic droit sur Michelle, puis sélectionnez Inspecter.

   • Fry
   • Michelle

2. Dans l'arborescence DOM, double-cliquez sur Michelle. En d'autres termes, double-cliquez sur le texte entre <li> et </li>. Le texte est surligné en bleu pour indiquer qu'il est sélectionné.

   

3. Supprimez Michelle, saisissez Leela, puis appuyez sur Entrée pour confirmer la modification. Le texte passe de Michelle à Leela.

Modifier les attributs

Pour modifier des attributs, double-cliquez sur leur nom ou leur valeur. Suivez ces instructions pour apprendre à ajouter des attributs à un nœud.

1. Dans la liste suivante, effectuez un clic droit sur Howard, puis sélectionnez Inspecter.

   • Howard
   • Vince

2. Développez <ul>, puis double-cliquez sur <li> pour modifier. Le texte est mis en surbrillance pour indiquer que le nœud est sélectionné.

   

3. Appuyez sur la touche 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 dorée.

   

Modifier le type de nœud

Pour modifier le type d'un nœud, double-cliquez sur le type, puis saisissez le nouveau type.

1. Dans la liste suivante, effectuez un clic droit sur Hank, puis sélectionnez Inspecter.

   • Dean
   • Hank
   • Thaddeus
   • Brock

2. Double-cliquez sur <li>. Le texte li est mis en surbrillance.

3. Supprimez li, saisissez button, puis appuyez sur Entrée. Le nœud <li> devient un nœud <button>.

   

Modifier au format HTML

Pour modifier les nœuds au format HTML avec la coloration syntaxique et la saisie semi-automatique, sélectionnez Modifier au format HTML dans le menu déroulant du nœud.

1. Effectuez un clic droit sur Leonard ci-dessous, puis sélectionnez Inspecter.

   • Penny
   • Howard
   • Rajesh
   • Leonard

2. Dans le panneau Éléments, effectuez un clic droit sur le nœud actuel, puis sélectionnez Modifier en tant que HTML dans le menu déroulant.

   

3. Appuyez sur Entrée pour passer à la ligne suivante et commencez à saisir <l. DevTools met en surbrillance la syntaxe HTML et suggère des balises pour la saisie semi-automatique.

   

4. Sélectionnez l'élément li dans le menu de saisie semi-automatique, puis saisissez >. Les outils de développement ajoutent automatiquement la balise </li> fermante après le curseur.

   

5. Saisissez Sheldon dans la balise, puis appuyez sur Ctrl ou Cmd+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 du menu contextuel.

1. Effectuez un clic droit sur Nana dans la liste suivante, puis sélectionnez Inspecter.

   • Le Bûcher des vanités
   • Nana
   • Orlando
   • Bruit blanc

2. 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.

   

3. Revenez à la page. L'élément de liste a été dupliqué.

Vous pouvez également utiliser les raccourcis clavier Maj+Alt+Flèche vers le bas (Windows et Linux) et Maj+Option+Flèche vers le bas (macOS).

Effectuer une capture d'écran d'un nœud

Vous pouvez faire une capture d'écran de n'importe quel nœud individuel dans l'arborescence DOM.

1. Effectuez un clic droit sur une image de cette page, puis sélectionnez Inspecter.

2. Dans le panneau Éléments, effectuez un clic droit sur l'URL de l'image, puis sélectionnez Capture node screenshot (Faire une capture d'écran du nœud) dans le menu déroulant.

   

3. La capture d'écran est enregistrée dans votre dossier de téléchargements (Windows et macOS).

Pour en savoir plus, consultez 4 façons de faire des captures d'écran avec les outils pour les développeurs.

Réorganiser les nœuds DOM

Faites glisser les nœuds pour les réorganiser.

1. Dans la liste suivante, effectuez un clic droit sur Elvis Presley, puis sélectionnez Inspecter. Il s'agit du dernier élément de la liste.

   • Stevie Wonder
   • Tom Waits
   • Chris Thile
   • Elvis Presley

2. Dans l'arborescence DOM, faites glisser <li>Elvis Presley</li> vers le haut de la liste.

État de la force

Vous pouvez forcer les nœuds à rester dans des états tels que :active, :hover, :focus, :visited et :focus-within.

1. Pointez sur l'élément de liste The Lord of the Flies. La couleur d'arrière-plan devient orange.

   • Sa Majesté des mouches
   • Crime et Châtiment
   • Moby Dick

2. Effectuez un clic droit sur l'élément de liste The Lord of the Flies, puis sélectionnez Inspecter.

3. Effectuez un clic droit sur <li class="demo--hover">The Lord of the Flies</li>, puis sélectionnez Forcer l'état > :hover. Si cette option ne s'affiche pas, consultez l'annexe sur les options manquantes.

   La couleur d'arrière-plan reste orange, même si vous ne pointez pas réellement sur le nœud.

Masquer un nœud

Appuyez sur H pour masquer un nœud.

1. Dans la liste suivante, effectuez un clic droit sur The Stars My Destination, puis sélectionnez Inspecter.

   • Le Comte de Monte-Cristo
   • Terminus les étoiles

2. 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.

   

3. Appuyez à nouveau sur la touche H. Le nœud s'affiche à nouveau.

Supprimer un nœud

Appuyez sur Supprimer pour supprimer un nœud.

1. Dans la liste suivante, effectuez un clic droit sur Foundation, puis sélectionnez Inspecter.

   • L'Homme illustré
   • De l'autre côté du miroir
   • Fondation

2. 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.

3. Appuyez sur Ctrl+Z ou Cmd+Z (macOS). 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 depuis la console ou pour obtenir des références JavaScript à ces nœuds.

Faire référence au nœud actuellement sélectionné avec $0

Lorsque vous inspectez un nœud (y compris des pseudo-éléments tels que ::before ou ::after), 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.

1. Effectuez un clic droit sur l'élément de liste The Left Hand of Darkness, puis sélectionnez Inspecter.

   • La Main gauche de la nuit
   • Dune

2. Appuyez sur la touche Échap pour ouvrir le panneau de la console. Vous devrez peut-être sélectionner Console pour l'ouvrir.

3. Saisissez $0 et appuyez sur la touche Entrée. Le résultat de l'expression est que $0 est évalué à <li>The Left Hand of Darkness</li>.

   

4. Pointez sur le résultat. Le nœud est mis en surbrillance dans la fenêtre d'affichage.

5. Cliquez sur <li>Dune</li> dans l'arborescence DOM, saisissez à nouveau $0 dans la console, puis appuyez de nouveau sur Entrée. $0 est maintenant évalué à <li>Dune</li>.

   

Stocker en tant que variable globale

Si vous devez faire référence à un nœud plusieurs fois, stockez-le en tant que variable globale.

1. Dans la liste suivante, effectuez un clic droit sur The Big Sleep, puis sélectionnez Inspecter.

   • Le Grand Sommeil
   • The Long Goodbye

2. Effectuez un clic droit sur <li>The Big Sleep</li> dans l'arborescence DOM, puis sélectionnez Stocker en tant que variable globale. Si vous ne trouvez pas cette option, consultez Options manquantes.

3. Saisissez temp1 dans la console, puis appuyez sur Entrée. Le résultat de l'expression montre que la variable est évaluée au niveau du nœud. Cliquez sur le nœud pour développer l'élément de la liste.

   

Copier le chemin d'accès JS

Copiez le chemin d'accès JavaScript vers un nœud pour le référencer dans un test automatisé.

1. Dans la liste suivante, effectuez un clic droit sur Les Frères Karamazov, puis sélectionnez Inspecter.

   • Les Frères Karamazov
   • Crime et Châtiment

2. Effectuez un clic droit sur <li>The Brothers Karamazov</li> dans l'arborescence DOM, puis sélectionnez Copier > Copier le chemin d'accès JS. Une expression document.querySelector() qui correspond au nœud a été copiée dans votre presse-papiers.

3. Appuyez sur Ctrl+V ou Cmd+V (macOS) pour coller l'expression dans la console.

4. Appuyez sur Entrée pour évaluer l'expression.

   

Interrompre l'exécution lors des modifications du DOM

Les outils de développement vous permettent de suspendre le code JavaScript d'une page lorsque celui-ci modifie le DOM. En savoir plus sur les points d'arrêt de modification du DOM

Étapes suivantes

Nous avons abordé la plupart des fonctionnalités liées au DOM dans les outils de développement. Vous pouvez découvrir les autres en effectuant un clic droit sur les nœuds de l'arborescence DOM et en testant les options qui n'ont pas été abordées dans ce tutoriel.

Autres ressources :

• En savoir plus sur les raccourcis clavier du panneau "Éléments"
• Consultez la documentation sur les outils de développement pour découvrir tout ce que vous pouvez faire avec ces outils.

Participez à la communauté des outils de développement pour contacter l'équipe des outils de développement ou obtenir de l'aide auprès d'autres développeurs.

Annexe

En savoir plus sur des sujets spécifiques.

HTML et DOM

Cette section explique rapidement la différence entre HTML et le DOM.

Lorsque vous utilisez un navigateur Web pour demander une page telle que https://example.com, le serveur renvoie un document HTML :

<!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 :

html
  head
    title
  body
    h1
    p
    script

Cette arborescence d'objets ou de nœuds représente le contenu de la page. C'est ce qu'on appelle le Document Object Model, ou DOM. Pour l'instant, les objets sont les mêmes dans le DOM et le code HTML.

Supposons que le fichier script.js en bas du code HTML inclue les fonctions suivantes :

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

Ce script supprime le nœud h1 et ajoute un autre nœud p au DOM. Le DOM se présente maintenant comme suit :

html
  head
    title
  body
    p
    script
    p

Le code HTML de la page est désormais différent de son DOM.

Le code HTML représente le contenu initial de la page, tandis que le DOM représente le contenu actif et actuel de la page. Lorsque JavaScript ajoute, supprime ou modifie des nœuds, le DOM devient différent du code HTML.

Pour en savoir plus, consultez la présentation du DOM sur MDN.

Faire défiler pour afficher

Cette section fait suite à la section Faire défiler l'écran pour afficher un élément. Suivez les instructions pour terminer la section.

1. Le nœud <li>Magritte</li> doit toujours être sélectionné dans l'arborescence DOM. Si ce n'est pas le cas, revenez à Faire défiler jusqu'à la vue et recommencez.

2. Effectuez un clic droit sur le nœud <li>Magritte</li>, puis sélectionnez Faire défiler jusqu'à l'affichage. Votre fenêtre d'affichage remonte pour que vous puissiez voir le nœud Magritte. Si l'option Faire défiler jusqu'à la vue est manquante, consultez Options manquantes.

   

Options manquantes

De nombreuses instructions de ce tutoriel vous demandent d'effectuer 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 l'option spécifiée ne s'affiche pas dans le menu contextuel, essayez d'effectuer un clic droit en dehors du texte du nœud.