Afficher et modifier le DOM

Kayce basque
Kayce basque
Sofia Emelianova
Sofia Emelianova

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 code HTML. Pour en savoir plus, consultez l'annexe: HTML et DOM.

Afficher les nœuds DOM

L'arborescence DOM du panneau "Elements" vous permet d'effectuer toutes les activités associées au DOM dans les outils de développement.

Inspecter un nœud

Si un nœud DOM spécifique vous intéresse, Inspecter vous permet d'ouvrir rapidement les outils de développement et de l'examiner.

  1. Effectuez un clic droit sur Michel-Ange en dessous, puis sélectionnez Inspecter.
    • Michel-Ange
    • Raphael Inspecter un nœud Le panneau Éléments des Outils de développement s'ouvre. <li>Michelangelo</li> est mis en surbrillance dans l'arborescence DOM. Mise en évidence du nœud de Michel-Ange
  2. Cliquez sur l'icône Inspect (Inspecter) en haut à gauche de DevTools. Icône Inspecter
  3. 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 est également la première étape avant de pouvoir afficher et modifier ses styles. Consultez 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.

  1. Effectuez un clic droit sur Ringo en dessous et sélectionnez Inspecter. <li>Ringo</li> est sélectionné dans l'arborescence DOM.

    • Georges
    • Ringo
    • Paul
    • Jean

      Inspecter le nœud Ringo

  2. Appuyez deux fois sur la flèche Haut. <ul> est sélectionné.

    Inspecter le nœud ul

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

  4. Appuyez de nouveau sur la flèche Gauche. Le parent du nœud <ul> est sélectionné. Dans le cas présent, 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. Le résultat devrait se présenter comme suit: <ul>...</ul>

  6. Appuyez sur la flèche vers la droite. La liste est développée.

Faire défiler pour afficher

Lorsque vous affichez l'arborescence DOM, un nœud DOM qui ne se trouve pas dans la fenêtre d'affichage peut parfois vous intéresser. Par exemple, supposons que vous avez fait défiler la page jusqu'en bas et que vous vous intéressez au nœud <h1> en haut de la page. L'option Scroll into view (Faire défiler jusqu'à l'affichage) vous permet de repositionner rapidement la fenêtre d'affichage afin de voir le nœud.

  1. Effectuez un clic droit sur Magritte en dessous, puis sélectionnez Inspecter.

    • Magritte
    • Soutine
  2. Accédez à la section Annexe: Faire défiler pour afficher au bas de cette page. Les instructions se poursuivent là.

Après avoir suivi les instructions en bas de la page, vous devez revenir à cette page.

Afficher les règles

Les règles situées au-dessus et à gauche de la fenêtre d'affichage vous permettent de mesurer la largeur et la hauteur d'un élément lorsque vous passez la souris 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 Commande, saisissez Show rulers on hover, puis appuyez sur Entrée.
  • Accédez à Paramètres. Paramètres > Préférences > Éléments > Afficher les règles au survol.

L'unité de dimensionnement 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 les touches 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 la fenêtre d'affichage. Cela se produit par défaut à mesure que vous saisissez du texte. Si vous utilisez toujours des requêtes de recherche longues, vous pouvez faire en sorte que les outils de développement n'exécutent la recherche que lorsque vous appuyez sur Entrée.

Pour éviter tout saut inutile entre les nœuds, décochez la case Paramètres. Settings > Preferences > Global > Search as you tap (Paramètres > Préférences > Global > Rechercher en cours de saisie).

Case &quot;Rechercher en cours de saisie&quot; décochée dans les paramètres.

Modifier le DOM

Vous pouvez modifier le DOM à la volée et observer l'effet 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. Effectuez un clic droit sur Michelle, puis sélectionnez Inspecter.

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

    Modification du 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 savoir 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. L'arrière-plan du nœud devient doré.

    Ajouter un attribut de style au nœud

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

Faites un clic droit sur les options avec l&#39;option &quot;Modifier l&#39;attribut&quot; encadrée.

Modifier le type de nœud

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

  1. Cliquez avec le bouton droit sur Hank ci-dessous et sélectionnez Inspecter.

    • Doyenne
    • 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> est remplacé par un nœud <button>.

    Remplacement du type de nœud par un bouton

Modifier au format HTML

Pour modifier les nœuds au format HTML avec la mise en surbrillance 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 au format 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. Les outils de développement mettent en évidence la syntaxe HTML et complètent automatiquement les balises à votre place.

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

    Les outils de développement ferment automatiquement la balise.

  5. Saisissez Sheldon dans la balise, puis appuyez sur Ctrl / Commande+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 en dessous, puis sélectionnez Inspecter.

    • Feu de joie des coiffeuses
    • 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 la liste déroulante.

  3. 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 (Mac OS).

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 l'option Capture node screenshot (Capturer un nœud).

  1. Effectuez un clic droit sur n'importe quelle 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 en cours.

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

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

Réorganiser les nœuds DOM

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

  1. Effectuez un clic droit sur Elvis Presley en dessous et sélectionnez Inspecter. Notez que c'est le 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> en haut de la liste.

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

  1. Passez la souris sur Le Seigneur des mouches ci-dessous. L'arrière-plan devient orange.

    • Le Seigneur des mouches
    • Crime et châtiment
    • Moby Dick

  2. Effectuez un clic droit sur Le Seigneur des mouches ci-dessus et sélectionnez Inspecter.

  3. Effectuez un clic droit sur <li class="demo--hover">The Lord of the Flies</li>, puis sélectionnez Force State (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 pointez pas sur 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.

    À quoi ressemble le nœud dans l&#39;arborescence DOM une fois masqué

  3. Appuyez de 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 Éléments de base ci-dessous, puis sélectionnez Inspecter.

    • L'Homme illustré
    • À travers le regard
    • Modèles
  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

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 à ceux-ci.

Référencer le nœud actuellement sélectionné avec $0

Lorsque vous inspectez un nœud, le texte == $0 situé à côté signifie que vous pouvez référencer ce nœud dans la console avec la variable $0.

  1. Effectuez un clic droit sur Gauche des ténèbres en dessous et sélectionnez Inspecter.

    • La main gauche des ténèbres
    • Dune
  2. Appuyez sur la touche Échap pour ouvrir le panneau de la console.

  3. Saisissez $0, puis appuyez sur la touche Entrée. Le résultat de l'expression montre que $0 prend la valeur <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. Désormais, $0 correspond à <li>Dune</li>.

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

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. Effectuez un clic droit sur The Big Sleep ci-dessous et sélectionnez Inspecter.

    • Le grand sommeil
    • L'Adieu
  2. Effectuez un clic droit sur <li>The Big Sleep</li> dans l'arborescence DOM et sélectionnez Stocker en tant que variable globale. Si vous ne voyez pas cette option, consultez la section Annexe: Options manquantes.

  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 temp1

Copier le chemin JS

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

  1. Effectuez un clic droit sur Les frères Karamazov en 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 et sélectionnez Copier > Copier le chemin d'accès JS. Une expression document.querySelector() qui résout le 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;Copy JS Path&quot; (Copier le chemin d&#39;accès JS)

Interruption après les modifications DOM

Les outils de développement vous permettent de mettre en veille le code JavaScript d'une page lorsqu'il modifie le DOM. Consultez la section Points d'arrêt pour modification DOM.

Étapes suivantes

Cet article aborde la plupart des fonctionnalités DOM des outils de développement. Pour découvrir les autres options, 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 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 section Communauté si vous souhaitez contacter l'équipe DevTools ou obtenir de l'aide auprès de la communauté DevTools.

Annexe: 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 telle que 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 semblable à celle-ci:

html
  head
    title
  body
    h1
    p
    script

Cette arborescence d'objets, ou nœuds, représentant le contenu de la page s'appelle le DOM. Pour le moment, elle ressemble au code HTML, mais supposons que le script référencé au 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, tandis que 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 Présentation du DOM.

Annexe: Faire défiler pour afficher

Ceci fait suite à la section Faire défiler jusqu'à l'écran. Suivez les instructions ci-dessous pour compléter 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 à Faire défiler jusqu'à la vue et recommencez.
  2. Effectuez un clic droit sur le nœud <li>Magritte</li>, puis sélectionnez Scroll into view (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. Reportez-vous à Annexe: Options manquantes si vous ne voyez pas l'option Faire défiler jusqu'à l'affichage.

    Faire défiler pour afficher

Annexe: 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, effectuez un clic droit en dehors du texte du nœud.

Où cliquer si toutes les options ne sont pas visibles ?