Afficher et modifier le DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Regardez la vidéo et suivez ces tutoriels interactifs pour apprendre les bases du visionnage et modifier le 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. Voir Annexe: HTML et DOM pour plus d'explications.

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 vous intéressez à un nœud DOM particulier, l'outil Inspect (Inspecter) vous permet d'ouvrir rapidement les outils de développement. et examiner ce nœud.

  1. Effectuez un clic droit sur Michelangelo (Michelangelo) ci-dessous et sélectionnez Inspect (Inspecter).
    • Michel-Ange
    • Raphaël Inspecter un nœud Le panneau Elements (Éléments) des outils de développement s'ouvre. <li>Michelangelo</li> est mis en évidence dans l'arborescence DOM. À l&#39;honneur de Michel-Ange< nœud
  2. Cliquez sur l'icône Inspecter en haut à gauche de Les outils de développement. 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 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 de votre clavier.

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

    • George
    • Ringo
    • Paul

    • Jean

      Inspecter le nœud Ringo

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

    Inspecter le nœud &quot;ul&quot;

  3. Appuyez sur la flèche vers la 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ée. Dans ce cas, il s'agit du nœud <li> qui contient les instructions de l'étape 1.

  5. Appuyez trois fois sur la flèche vers le bas de façon à sélectionner à nouveau <ul>. que vous venez de réduire. Le résultat doit se présenter comme suit: <ul>...</ul>

  6. 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 peut parfois vous être utile qui ne sont pas actuellement dans la fenêtre d'affichage. Par exemple, supposons que vous ayez fait défiler la page jusqu'en bas et que vous êtes intéressé par le nœud <h1> situé en haut de la page. Faire défiler l'écran jusqu'à l'affichage vous permet de repositionner rapidement la fenêtre d'affichage de façon à voir le nœud.

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

    • Magritte
    • Soutines

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

Règles.

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.
  • Vérifiez les paramètres Paramètres. > Préférences > Elements > Afficher les règles au passage de la souris.

L'unité de taille 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 Elements.
  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 Elements sélectionne le premier résultat correspondant dans l'arborescence DOM et l'affiche dans la fenêtre d'affichage. Par défaut, cette opération se produit à mesure que vous saisissez du texte. Si vous travaillez toujours avec 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 les sauts inutiles entre les nœuds, supprimez Settings > Paramètres. Préférences > Global > Rechercher en cours de saisie.

La case à cocher &quot;Recherche en cours de saisie&quot; a été supprimée dans les paramètres.

Modifier le DOM

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

Modifier le contenu

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

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

    • Frire
    • Michelle

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

    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 apprendre à 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 est sélectionné.

    Modifier le nœud

  3. Appuyer sur la flèche vers la droite, ajouter un espace, saisir du texte style="background-color:gold", puis appuyez sur Entrée. Couleur de l'arrière-plan du nœud devient or.

    Ajout d&#39;un attribut de style au nœud

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

Options de clic droit 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 sur son type, puis saisissez le nouveau type.

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

    • Doyen
    • 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 <button>. d'un nœud.

    Remplacer le type de nœud par bouton

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.

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

    • Penny
    • Howard
    • Rajesh
    • Leonard

  2. Dans le panneau Elements, effectuez un clic droit sur le nœud actuel, puis sélectionnez Elements 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. L'outil de développement met en évidence la syntaxe HTML et effectue la saisie semi-automatique des 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 / 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 ci-dessous et sélectionnez Inspecter.

    • Feu de la vanité
    • Nana
    • Orlando
    • Bruit blanc

  2. Dans le panneau Elements, effectuez un clic droit sur <li>Nana</li>, puis sélectionnez Elements dans le menu déroulant.

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

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

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

  2. Dans le panneau Elements, effectuez un clic droit sur l'URL de l'image, puis sélectionnez Elements dans le menu déroulant.

    Capture d&#39;écran d&#39;un nœud en cours de capture

  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.

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.

    En faisant 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. La couleur d'arrière-plan devient orange.

    • Le Seigneur des mouches
    • Crime et sanctions
    • Moby dick

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

  3. Cliquez avec le bouton droit sur <li class="demo--hover">The Lord of the Flies</li> et sélectionnez Forcer É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.

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

    • Le Comte de Monte-Cristo
    • The Stars : ma 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 une fois masqué

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

  1. Effectuez un clic droit sur Foundation ci-dessous et sélectionnez 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 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 permettant d'accéder aux nœuds DOM depuis la console ou d'obtenir des références JavaScript à ces éléments.

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

Lorsque vous inspectez un nœud, le texte == $0 à côté de celui-ci signifie que vous pouvez faire référence à ce 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 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 indique que La fonction $0 a 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 évidence dans la fenêtre d'affichage.

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

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

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.

  1. Effectuez un clic droit sur The Big Sleep ci-dessous et sélectionnez Inspecter.

    • The Big Sleep
    • Long adieu

  2. Effectuez un clic droit sur <li>The Big Sleep</li> dans l'arborescence DOM, puis sélectionnez Stocker comme global. variable. 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 indique 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 le référencer dans un test automatisé.

  1. Effectuez un clic droit sur The Brothers Karamazov ci-dessous et sélectionnez Inspecter.

    • Les frères Karamazov
    • Crime et sanctions

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

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

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

    Le résultat de l&#39;expression &quot;Copier le chemin JS&quot;

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. Vous pouvez découvrir les autres en effectuant un clic droit sur les nœuds dans l'arborescence DOM et en testant les autres options abordées dans ce tutoriel. Consultez également l'article Raccourcis clavier du panneau "Éléments".

Rendez-vous sur la page d'accueil des outils pour les développeurs Chrome avec les outils de développement.

Si vous souhaitez contacter l'équipe chargée des outils de développement, accédez à la page Communauté. ou demandez de l'aide à la communauté des outils de développement.

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 telle que https://example.com, au serveur renvoie du code HTML comme ceci:

<!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 au script HTML, mais supposons que le script référencé au niveau 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 comme 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 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 pour afficher

Ceci fait suite à la section Faire défiler la page jusqu'à la vue. Suivez le les instructions ci-dessous pour terminer cette section.

  1. Le nœud <li>Magritte</li> doit toujours être sélectionné dans votre arborescence DOM. Sinon, revenez à Faites défiler l'écran pour l'afficher et recommencez.

  2. Effectuez un clic droit sur le nœud <li>Magritte</li>, puis sélectionnez Faire défiler jusqu'à la vue. Votre fenêtre d'affichage défile 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.

    Faire défiler jusqu&#39;à l&#39;affichage

Annexe: Options manquantes

De nombreuses instructions de ce tutoriel vous demandent de faire un clic droit sur un nœud dans l'arborescence DOM puis sélectionnez une option dans le menu contextuel qui s'affiche. Si vous ne voyez pas l'élément spécifié dans le menu contextuel, essayez de faire un clic droit en dehors du texte du nœud.

Où cliquer si vous ne voyez pas toutes les options ?