Afficher et modifier le DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Regardez la vidéo et suivez ces tutoriels interactifs pour découvrir les principes de base 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'annexe : HTML par rapport au DOM.

Afficher les nœuds DOM

L'arborescence DOM du panneau Éléments vous permet d'effectuer toutes les activités liées au DOM dans les outils de développement.

Inspecter un nœud

Si vous êtes intéressé par un nœud DOM particulier, Inspecter est un moyen rapide d'ouvrir DevTools et d'examiner ce nœud.

  1. Effectuez un clic droit sur Michel-Ange ci-dessous, puis sélectionnez Inspecter.
    • Michel-Ange
    • Raphael Inspecter un nœud Le panneau Éléments de DevTools s'ouvre. <li>Michelangelo</li> est mis en évidence dans l'arborescence DOM. Mise en surbrillance du nœud Michelangelo<
  2. Cliquez sur l'icône Inspect (Inspecter) en haut à gauche des outils de développement. Icône d&#39;inspection

  3. Cliquez sur le texte Tokyo ci-dessous.

    • Tokyo

    • Beyrouth

      <li>Tokyo</li> est maintenant mis en surbrillance dans l'arborescence DOM.

Inspecter un nœud est également la première étape pour afficher et modifier ses styles. Consultez Afficher et modifier le 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 naviguer dans l'arborescence DOM à l'aide de votre clavier.

  1. Effectuez un clic droit sur Ringo ci-dessous, puis sélectionnez Inspect (Inspecter). <li>Ringo</li> est sélectionné dans l'arborescence DOM.

    • George
    • Ringo
    • Paul

    • Jean

      Inspecter le nœud Ringo

  2. Appuyez deux fois sur la touche Haut. <ul> sélectionné.

    Inspecter le nœud ul

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

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

  5. Appuyez trois fois sur la touche de flèche Bas pour sélectionner à nouveau la liste <ul> que vous venez de réduire. Il doit se présenter comme ceci : <ul>...</ul>

  6. Appuyez sur la touche fléchée Droite. La liste s'agrandit.

Faire défiler pour afficher

Lorsque vous consultez l'arborescence DOM, vous pouvez parfois être intéressé par un nœud DOM qui n'est pas actuellement dans le viewport. Par exemple, supposons que vous ayez fait défiler la page jusqu'en bas et que vous soyez intéressé par le nœud <h1> en haut de la page. La fonctionnalité Faire défiler pour afficher vous permet de repositionner rapidement la fenêtre d'affichage afin de voir le nœud.

  1. Effectuez un clic droit sur Magritte ci-dessous et sélectionnez Inspecter.

    • Magritte
    • Soutine

  2. Accédez à la section Annexe: Faire défiler pour afficher au bas de cette page. Vous y trouverez les instructions à suivre.

Une fois que vous avez suivi les instructions en bas de la page, revenez ici.

Afficher les règles

Grâce aux règles situées au-dessus et à gauche de la 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.

Règles.

Activez les règles de deux manières :

  • Appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (Mac) pour ouvrir le menu Command, saisissez Show rulers on hover, puis appuyez sur Entrée.
  • Accédez à Paramètres > Préférences > Éléments > Afficher les règles lorsque l'utilisateur pointe dessus.

L'unité de mesure des règles est le pixel.

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 (Mac). La barre de recherche s'ouvre au bas de l'arborescence DOM.

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

    Mettre la requête en surbrillance dans la barre de recherche

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 le viewport. Par défaut, cela se produit au fur et à mesure de la saisie. Si vous utilisez toujours des requêtes de recherche longues, vous pouvez configurer DevTools pour qu'il n'exécute la recherche que lorsque vous appuyez sur Entrée.

Pour éviter les sauts inutiles entre les nœuds, décochez la case Paramètres > Préférences > Global > Rechercher en cours de saisie.

Décoché la case &quot;Rechercher à mesure que vous saisissez du texte&quot; dans les paramètres.

Modifier le DOM

Vous pouvez modifier le DOM à la volée et voir comment ces modifications affectent la page.

Modifier le contenu

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

  1. Effectuez un clic droit sur Michelle ci-dessous et 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é.

    Modifier le texte

  3. Supprimez Michelle, saisissez Leela, 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 découvrir comment ajouter des attributs à un nœud.

  1. Effectuez un clic droit sur Howard ci-dessous et sélectionnez Inspecter.

    • Howard
    • Vince

  2. Double-cliquez sur <li>. Le texte est mis en surbrillance pour indiquer que le nœud est sélectionné.

    Modifier le nœud

  3. 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 passe à l'or.

    Ajouter un attribut de style au nœud

Vous pouvez également utiliser l'option Modifier l'attribut en effectuant un clic droit.

Options disponibles en cliquant avec le bouton droit de la souris, avec l&#39;attribut &quot;Modifier&quot; mis en surbrillance.

Modifier le type de nœud

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

  1. Effectuez un clic droit sur Hank ci-dessous, puis sélectionnez Inspect (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 le type de nœud en bouton

Modifier au format HTML

Pour modifier des nœuds au format HTML avec mise en surbrillance de la syntaxe et 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 code HTML dans le menu déroulant.

    Menu déroulant d&#39;un nœud.

  3. Appuyez sur Entrée pour commencer une nouvelle ligne et commencer à saisir <l. DevTool met en surbrillance la syntaxe HTML et complète automatiquement les balises.

    Saisie semi-automatique des balises HTML.

  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 de fermeture </li> après le curseur.

    Les outils de développement ferment automatiquement le tag.

  5. Saisissez Sheldon dans la balise, puis appuyez sur Ctrl/Cmd + Entrée pour appliquer les modifications.

    Application des modifications.

Dupliquer un nœud

Vous pouvez dupliquer un élément à l'aide de l'option Dupliquer l'élément.

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

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

    Option &quot;Dupliquer l&#39;élément&quot; mise en surbrillance dans le menu déroulant.

  3. Revenez à la page. L'élément de 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).

Faire 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 Capturer une capture d'écran du nœud.

  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 Capturer une capture d'écran du nœud dans le menu déroulant.

    Capture d&#39;écran d&#39;un nœud.

  3. La capture d'écran est enregistrée dans vos téléchargements.

    Capture d&#39;écran du nœud enregistrée dans les téléchargements.

Pour découvrir d'autres façons de réaliser des captures d'écran avec les outils de développement, consultez Quatre façons de réaliser des captures d'écran avec les outils de développement.

Réorganiser les nœuds DOM

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

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

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

    Faire glisser le nœud en 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.

  1. Pointez sur Lord of the Flies ci-dessous. La couleur de l'arrière-plan devient orange.

    • Sa Majesté des Mouches
    • Crime et châtiment
    • Moby dick

  2. Effectuez un clic droit sur The Lord of the Flies (Le Seigneur des mouches) ci-dessus, puis sélectionnez Inspect (Inspecter).

  3. Effectuez un clic droit sur <li class="demo--hover">The Lord of the Flies</li>, puis sélectionnez Force State > :hover. Consultez l'annexe : Options manquantes si cette option ne s'affiche pas. 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.

  1. Effectuez un clic droit sur The Stars My Destination ci-dessous, puis sélectionnez Inspecter.

    • Le Comte de Monte-Cristo
    • The Stars My Destination

  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.

    Apparence du nœud dans l&#39;arborescence DOM après qu&#39;il a été masqué

  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. Effectuez un clic droit sur Foundation (Fondation) ci-dessous, puis sélectionnez Inspect (Inspecter).

    • L'Homme illustré
    • À travers le 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 (Mac). La dernière action est annulée et le nœud réapparaît.

Accéder aux nœuds dans la console

DevTools fournit quelques raccourcis pour accéder aux nœuds DOM à partir de la console ou pour obtenir des références JavaScript.

Référencer le 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 faire référence à ce nœud dans la console avec la variable $0.

  1. Effectuez un clic droit sur La main gauche de l'obscurité ci-dessous et sélectionnez Inspecter.

    • La main gauche de l'obscurité
    • Dune

  2. Appuyez sur la touche Échap pour ouvrir le panneau latéral de la console.

  3. Saisissez $0, puis appuyez sur la touche Entrée. Le résultat de l'expression montre que $0 renvoie <li>The Left Hand of Darkness</li>.

    Résultat de la première expression $0 dans la console

  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 à nouveau sur Entrée. $0 renvoie maintenant <li>Dune</li>.

    Résultat de la deuxième expression $0 dans la console

Stocker en tant que variable globale

Si vous devez vous reporter à un nœud plusieurs fois, stockez-le en tant que variable globale.

  1. Effectuez un clic droit sur The Big Sleep ci-dessous, puis sélectionnez Inspect (Inspecter).

    • The Big Sleep
    • The Long Goodbye

  2. Effectuez un clic droit sur <li>The Big Sleep</li> dans l'arborescence DOM, puis sélectionnez Store as global variable (Enregistrer en tant que variable globale). Consultez l'annexe : Options manquantes si cette option ne s'affiche pas.

  3. Saisissez temp1 dans la console, puis appuyez sur Entrée. Le résultat de l'expression montre que la variable renvoie le nœud.

    Le résultat de l&#39;expression &quot;temp1&quot;

Copier le chemin JS

Copiez le chemin JavaScript vers un nœud lorsque vous devez vous y référer dans un test automatisé.

  1. Effectuez un clic droit sur Les Frères Karamazov ci-dessous, 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 Copy > Copy JS Path (Copier > Copier le chemin JS). Une expression document.querySelector() qui se résout au nœud a été copiée dans votre presse-papiers.

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

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

    Résultat de l&#39;expression &quot;Copier le chemin d&#39;accès JS&quot;

Arrêter en cas de modification du DOM

DevTools vous permet de suspendre le code JavaScript d'une page lorsqu'il modifie le DOM. Consultez la section Points d'arrêt de modification du DOM.

Étapes suivantes

Cela couvre la plupart des fonctionnalités liées au DOM dans DevTools. Vous pouvez découvrir les autres en effectuant un clic droit sur les nœuds de l'arborescence DOM et en essayant 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 DevTools.

Consultez la section Communauté si vous souhaitez contacter l'équipe DevTools ou obtenir de l'aide de la communauté DevTools.

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 comme suit :

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

html
  head
    title
  body
    h1
    p
    script

Cette arborescence d'objets, ou de nœuds, représentant le contenu de la page s'appelle le DOM. Pour le moment, il ressemble au code HTML, mais supposons que le script référencé en bas du code HTML exécute ce code :

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 code HTML.

Pour en savoir plus, consultez l'article Présentation du DOM.

Annexe : Faire défiler pour afficher

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

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

  2. Effectuez un clic droit sur le nœud <li>Magritte</li>, puis sélectionnez Scroll into view (Défiler pour afficher). 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 l'option Défiler pour afficher ne s'affiche pas.

    Faire défiler pour afficher

Annexe: Options manquantes

De nombreuses instructions de ce tutoriel vous invitent à effectuer un clic droit sur un nœud dans l'arborescence DOM, puis à 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 de cliquer avec le bouton droit de la souris en dehors du texte du nœud.

Où cliquer si vous ne voyez pas toutes les options