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

  1. Effectuez un clic droit sur Michelangelo (Michelangelo) ci-dessous et sélectionnez Inspect (Inspecter).
    • Michel-Ange
    • Raphael Inspecter un nœud Le panneau Elements des outils de développement s'ouvre. <li>Michelangelo</li> est mis en évidence dans l'arborescence DOM. Mise en évidence du nœud Michel-Ange<
  2. Cliquez sur l'icône Inspect (Inspecter) dans l'angle supérieur gauche des 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 du clavier.

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

      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é. 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 pour sélectionner à nouveau la liste <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 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.

  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 Éléments.

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.
  • Cochez la case Paramètres. 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.

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. 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 Paramètres. Settings > Preferences > Global > Search as you type (Paramètres > Préférences > Global > Recherche 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 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.

  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 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. La couleur d'arrière-plan du nœud devient jaune.

    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
    • Thaddée
    • 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>.

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

    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.

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

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

  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 $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 é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 à 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 Store as global variable (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 indique que la variable est évaluée sur 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 Copy > Copy JS Path (Copier > Copier le chemin JS). Une expression document.querySelector() qui résout le nœud a été copiée dans le 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.

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

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

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

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

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.

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