Prise en main de l’affichage et de la modification du DOM

Pour découvrir les principes de base de l’affichage et de la modification du modèle DOM (Document Object Model ) d’une page à l’aide de Microsoft Edge DevTools, suivez ces sections interactives du didacticiel.

Pour comprendre la différence entre le DOM et le CODE HTML, consultez Annexe : HTML et DOM, ci-dessous.

Afficher les nœuds DOM

L’arborescence DOM de l’outil Éléments est l’endroit où vous effectuez toutes les activités liées au DOM dans DevTools.

Inspecter un nœud

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

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet. (Pour ouvrir un lien dans une nouvelle fenêtre ou un nouvel onglet, cliquez avec le bouton droit sur le lien. Vous pouvez également appuyer longuement sur Ctrl (Windows, Linux) ou Commande (macOS), puis cliquez sur le lien.)

1. Dans la page web rendue, sous Inspecter un nœud, cliquez avec le bouton droit sur Michel-Ange , puis sélectionnez Inspecter :

   

   L’outil Éléments de DevTools s’ouvre. Le <p>Michelangelo</p> nœud est mis en surbrillance dans l’arborescence DOM :

   

2. Cliquez sur l’icône Inspecter () dans le coin supérieur gauche de DevTools :

   

3. Sous Inspecter un nœud, cliquez sur le texte Tokyo . À présent, <p>Tokyo</p> le nœud est mis en surbrillance dans l’arborescence DOM.

L’inspection d’un nœud est également la première étape vers l’affichage et la modification des styles d’un nœud. Consultez Prise en main de l’affichage et de la modification de CSS.

Naviguer dans 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 avec votre clavier.

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Naviguer dans l’arborescence DOM avec un clavier, cliquez avec le bouton droit sur Ringo , puis sélectionnez Inspecter. <p>Ringo</p> est sélectionné dans l’arborescence DOM :

   

3. Appuyez deux fois sur la touche Flèche haut . <div> est sélectionné :

   

4. Appuyez sur la touche Flèche gauche . La <div> liste se réduit.

5. Appuyez de nouveau sur la touche Flèche gauche . Le parent du <div> nœud est sélectionné. Dans ce cas, il s’agit du <section> qui a l’ID navigate-the-dom-tree-with-a-keyboard-1.

6. Appuyez deux fois sur la touche Flèche bas afin d’avoir ré-sélectionné la <div> liste que vous venez de réduire.

   Il doit ressembler à ceci : <div>... </div>.

7. Appuyez sur la touche Flèche droite . La liste se développe.

Faire défiler dans l’affichage

Lorsque vous affichez l’arborescence DOM, vous pouvez être intéressé par un nœud DOM qui n’est pas actuellement visible dans la page web rendue. Par exemple, supposons que vous avez fait défiler vers le bas de la page et que vous êtes intéressé par le <h1> nœud en haut de la page. Faire défiler la vue vous permet de repositionner rapidement la fenêtre d’affichage afin de voir le nœud.

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web affichée, sous Faire défiler dans l’affichage, cliquez avec le bouton droit sur Magritte , puis sélectionnez Inspecter.

3. Faites défiler vers le bas de la page Exemples DOM.

4. Le <p>Magritte</p> nœud doit toujours être sélectionné dans votre arborescence DOM. Si ce n’est pas le cas, revenez à Défilement dans la vue et recomncez.

5. Cliquez avec le bouton droit sur le <p>Magritte</p> nœud, puis sélectionnez Faire défiler la vue :

   

   Votre fenêtre d’affichage fait défiler vers le haut pour afficher le nœud Magritte . Voir Annexe : Options manquantes si l’option Faire défiler dans l’affichage n’est pas affichée.

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 votre curseur sur l’outil Éléments , par exemple en cliquant sur l’onglet Éléments .

2. Appuyez sur Ctrl+F (Windows, Linux) ou Cmd+F (macOS). La barre de recherche s’ouvre en bas de l’arborescence DOM.

3. Type La Lune est une Maîtresse dure. La dernière phrase est mise en surbrillance dans l’arborescence DOM :

   

La barre de recherche prend également en charge les sélecteurs CSS et XPath.

Modifier le DOM

Vous pouvez modifier le DOM dans DevTools et voir comment les modifications affectent la page en temps réel.

Modifier le contenu du texte

Pour modifier le contenu textuel d’un nœud, double-cliquez sur le contenu dans l’arborescence DOM, comme suit :

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Modifier le contenu, cliquez avec le bouton droit sur Michelle , puis sélectionnez Inspecter.

3. Dans l’arborescence DOM, double-cliquez sur le texte Michelle, entre les <p> balises et </p> . Le texte est mis en surbrillance pour indiquer qu’il est sélectionné :

   

4. Supprimez Michelle, tapez Leela, puis appuyez sur Entrée pour confirmer la modification. Le texte dans le DOM passe de Michelle à Leela.

Modifier ou ajouter des attributs

Pour modifier un attribut existant, double-cliquez sur le nom ou la valeur de l’attribut.

Pour ajouter un nouvel attribut, double-cliquez sur l’élément pour lequel ajouter un attribut, comme suit :

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Modifier les attributs, cliquez avec le bouton droit sur Howard , puis sélectionnez Inspecter.

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

   

4. Appuyez sur la touche Flèche droite , ajoutez un espace, tapez style="background-color:gold", puis appuyez sur Entrée. La couleur d’arrière-plan du nœud devient or :

   

Modifier le nom de la balise de nœud

Pour modifier le nom de la balise d’un nœud, double-cliquez sur le nom de la balise, puis tapez le nouveau nom de la balise.

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Modifier le nom de la balise de nœud, cliquez avec le bouton droit sur Hank , puis sélectionnez Inspecter.

3. Double-cliquez sur <p>. Le texte p est mis en surbrillance.

4. Supprimez p, tapez button, puis appuyez sur Entrée. Le <p> nœud devient un <button> nœud :

   

Modifier plusieurs nœuds, texte et attributs

Pour modifier le nom de la balise, le contenu du texte ou les attributs de plusieurs nœuds à la fois, vous pouvez modifier une partie du DOM à l’aide de l’éditeur de texte HTML de l’arborescence DOM, comme suit :

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, cliquez avec le bouton droit dans la section Modifier le contenu, le nom de la balise et les attributs , puis sélectionnez Inspecter.

3. Dans l’arborescence DOM, cliquez avec le bouton droit sur le <section id="edit-as-html-1"> nœud, puis sélectionnez Modifier au format HTML. L’éditeur HTML apparaît dans l’arborescence DOM, avec une zone autour de la section en cours de modification :

   

4. Tapez les modifications que vous souhaitez apporter dans l’éditeur HTML, par exemple :

   • Ajout, suppression ou modification d’attributs.
   • Ajout ou suppression de nœuds.
   • Modification du contenu texte ou des noms de balise des nœuds.

   Par exemple, ajoutez <p>Dijon</p> après la <p>Marseille</p> ligne.

5. Cliquez sur l’arborescence DOM en dehors de l’éditeur HTML ou appuyez sur Ctrl+Entrée. Vos modifications sont appliquées à l’arborescence DOM et à la page web rendue, et l’éditeur HTML se ferme :

   

Réorganiser les nœuds DOM

Pour réorganiser les nœuds dans l’arborescence DOM, faites glisser les nœuds comme suit :

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Réorganiser les nœuds DOM, cliquez avec le bouton droit sur Elvis Presley , puis sélectionnez Inspecter.

3. Dans l’arborescence DOM, faites glisser <p>Elvis Presley</p> vers le haut de la liste :

   

Forcer l’état

Vous pouvez forcer les nœuds à rester dans les états , notamment :active, :hover:focus, :visited, et :focus-within, comme suit :

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous État force, pointez sur Le Seigneur des mouches. La couleur d’arrière-plan devient orange.

3. Cliquez avec le bouton droit sur Le Seigneur des mouches, puis sélectionnez Inspecter.

4. Cliquez avec le bouton droit sur <p class="demo--hover">The Lord of the Flies</p>, puis sélectionnez Forcer l’état>:pointage. Si cette option n’est pas affichée, consultez Annexe : Options manquantes, ci-dessous. 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, comme suit :

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Masquer un nœud, cliquez avec le bouton droit sur La destination des étoiles , puis sélectionnez Inspecter.

3. Appuyez sur la touche H . Le nœud est masqué dans la page web rendue :

   

4. Appuyez de nouveau sur la touche H . Le nœud est à nouveau affiché.

Supprimer un nœud

Appuyez sur Suppr pour supprimer un nœud, comme suit :

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Supprimer un nœud, cliquez avec le bouton droit sur Fondation , puis sélectionnez Inspecter.

3. Appuyez sur Suppr. Le nœud est supprimé.

4. Appuyez sur Ctrl+Z (Windows, Linux) 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

DevTools fournit quelques raccourcis pour accéder aux nœuds DOM à partir de l’outil Console ou obtenir des références JavaScript à chacun d’eux.

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

Lorsque vous inspectez un nœud, le == $0 texte en regard du nœud signifie que vous pouvez référencer ce nœud dans la console avec la variable $0.

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Référencer le nœud actuellement sélectionné avec 0 $, cliquez avec le bouton droit sur La main gauche des ténèbres , puis sélectionnez Inspecter.

3. Appuyez sur Échap pour ouvrir l’outil Console dans le panneau Affichage rapide .

4. Tapez $0 et appuyez sur Entrée. Le résultat de l’expression indique que $0 prend la valeur <p>The Left Hand of Darkness</p>:

   

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

6. Cliquez <p>Dune</p> sur l’arborescence DOM, tapez $0 à nouveau dans la console, puis appuyez de nouveau sur Entrée . À présent, $0 prend la <p>Dune</p>valeur :

   

Stocker en tant que variable globale

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

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Stocker en tant que variable globale, cliquez avec le bouton droit sur The Big Sleep, puis sélectionnez Inspecter.

3. Cliquez avec le bouton <p>The Big Sleep</p> droit dans l’arborescence DOM, puis sélectionnez Stocker en tant que variable globale. Si cette option n’est pas affichée, consultezAnnexe : Options manquantes, ci-dessous.

4. Tapez temp1 dans la console , puis appuyez sur Entrée. Le résultat de l’expression montre que la variable prend la valeur du nœud :

   

Copier le chemin JS

Copiez le chemin d’accès JavaScript sur un nœud lorsque vous devez le référencer dans un test automatisé.

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Copier le chemin JS, cliquez avec le bouton droit sur Les Frères Karamazov, puis sélectionnez Inspecter.

3. Cliquez avec le bouton <p>The Brothers Karamazov</p> droit dans l’arborescence DOM, puis sélectionnez Copier le>chemin D’accès JS de copie. Une document.querySelector() expression qui se résout en nœud a été copiée dans votre Presse-papiers.

4. Appuyez sur Ctrl+V (Windows, Linux) ou Cmd+V (macOS) pour coller l’expression dans l’outil Console.

5. Appuyez sur Entrée pour évaluer l’expression. L’expression Copy JS Path prend la valeur du nœud :

   

Arrêt sur les modifications dom

DevTools vous permet de suspendre le Code JavaScript d’une page lorsque le Code JavaScript modifie le DOM.

Arrêt sur les modifications d’attribut

Utilisez des points d’arrêt de modification d’attribut lorsque vous souhaitez suspendre le code JavaScript qui entraîne la modification d’un attribut d’un nœud.

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Arrêter sur les modifications d’attribut, cliquez avec le bouton droit sur Choucroute , puis sélectionnez Inspecter.

3. Dans l’arborescence DOM, cliquez avec le bouton droit sur <p id="botm_target">Sauerkraut</p>, puis sélectionnez Arrêter sur les>modifications d’attribut :

   

   Voir Annexe : Options manquantes si l’option n’est pas affichée.

4. Cliquez sur le bouton Définir l’arrière-plan . Cela définit l’attribut style du nœud sur background-color:thistle. DevTools suspend la page et met en surbrillance le code qui a provoqué la modification de l’attribut dans l’outil Sources :

   

5. Cliquez sur Reprendre le script () pour reprendre l’exécution de JavaScript.

Arrêt de la suppression de nœud

Si vous souhaitez suspendre lorsqu’un nœud particulier est supprimé, utilisez des points d’arrêt de suppression de nœud.

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Arrêt sur suppression de nœud, cliquez avec le bouton droit sur Neuromancer , puis sélectionnez Inspecter.

3. Dans l’arborescence DOM, cliquez avec le bouton droit sur <p id="target">Neuromancer</p>, puis sélectionnez Arrêter sur>la suppression de nœud. Voir Annexe : Options manquantes si l’option n’est pas affichée.

4. Cliquez sur le bouton Supprimer ci-dessus. DevTools suspend la page et met en surbrillance le code qui a provoqué la suppression du nœud.

5. Sélectionnez Reprendre le script ().

Arrêt sur les modifications de sous-arborescence

Après avoir placé un point d’arrêt de modification de sous-arborescence sur un nœud, DevTools suspend la page lorsque l’un des descendants du nœud est ajouté ou supprimé.

1. Ouvrez la page de démonstration Exemples DOM dans une nouvelle fenêtre ou un nouvel onglet.

2. Dans la page web rendue, sous Interrompre les modifications de la sous-arborescence, cliquez avec le bouton droit sur A Fire On The Deep , puis sélectionnez Inspecter.

3. Dans l’arborescence DOM, cliquez avec le bouton droit sur <div id="ul_target">, qui est le nœud au-dessus <p>A Fire Upon the Deep</p>de , puis sélectionnez Arrêter sur les>modifications de sous-arborescence. Si la commande Subtree Modifications n’apparaît pas, consultez Annexe : Options manquantes.

4. Cliquez sur Ajouter un enfant. Le code s’interrompt car un <p> nœud a été ajouté à la liste.

5. Sélectionnez Reprendre le script ().

Étapes suivantes

Cela couvre la plupart des fonctionnalités dom dans DevTools. Vous pouvez découvrir le reste des fonctionnalités en cliquant avec le bouton droit sur les nœuds dans l’arborescence DOM et en expérimentant les autres options qui n’ont pas été abordées dans ce tutoriel. Voir aussi Raccourcis clavier de l’outil Éléments.

Consultez Vue d’ensemble de DevTools pour découvrir tout ce que vous pouvez faire avec DevTools.

Annexe : HTML et DOM

Cette section explique la différence entre html et dom.

Lorsque vous utilisez un navigateur web pour demander une page, le serveur retourne le 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 ensuite le code HTML et crée une arborescence d’objets basée sur le code HTML comme suit :

html
    head
        title
    body
        h1
        p
        script

Cette arborescence d’objets, ou de nœuds, représentant le contenu de la page est appelée modèle DOM (Document Object Model). À l’heure actuelle, l’arborescence DOM ressemble au code 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 h1 nœud et ajoute un autre p nœud 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 de la page initiale et le DOM représente le contenu de la page active. 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 : Options manquantes

La plupart des instructions de ce didacticiel vous indiquent de cliquer avec le bouton 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 n’est pas répertoriée dans le menu contextuel, cliquez avec le bouton droit dans le texte du nœud ou cliquez sur le ... bouton à gauche du nœud :

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.