Interagir avec le DOM à l’aide de la console

L’outil Console est un excellent moyen d’interagir avec la page web dans le navigateur. Dans DevTools, vous interagissez généralement avec le DOM en utilisant l’outil Inspect pour sélectionner des éléments, et en utilisant l’outil Elements pour modifier le DOM, par exemple pour ajouter ou modifier des attributs ou des styles d’élément.

L’outil Console peut également être utilisé pour interagir avec le DOM à l’aide de code JavaScript. Par exemple, vous pouvez trouver des éléments dans l’arborescence DOM et les manipuler à l’aide des API DOM.

Pour en savoir plus sur l’outil Inspecter , voir Analyser les pages à l’aide de l’outil Inspecter. Pour en savoir plus sur l’outil Elements , voir Inspecter, modifier et déboguer du code HTML et CSS à l’aide de l’outil Elements.

Rechercher un élément dans l’arborescence DOM

Pour rechercher un élément dans l’arborescence DOM à partir de l’outil Console :

1. Accédez à la page Web que vous voulez inspecter. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Tapez ou collez le code suivant dans la console, puis appuyez sur Entrée :

   document.querySelector('main');
   

   L’élément <main> de l’arborescence DOM est affiché dans la console :

   

4. Dans la console, pointez sur l’élément HTML <main> résultant ou appuyez sur Maj+Tab. Dans la page web rendue, DevTools met en surbrillance l’élément correspondant <main> :

   

Modifier le DOM de la page web

Vous pouvez apporter des modifications à l’arborescence DOM de la page web à partir de l’outil Console . Dans cet exemple, vous définissez la valeur d’un attribut d’élément DOM à l’aide de la console, pour affecter le style de l’élément : vous ajoutez un arrière-plan gris au <h1> titre de la page.

1. Accédez à la page web que vous souhaitez modifier. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Collez le code suivant dans la console :

   document.querySelector("h1").style.backgroundColor = "lightgrey";
   

   Un arrière-plan gris apparaît derrière le titre de la page :

   

Obtenir une référence à un élément

Dans une page web complexe, il peut être difficile de trouver le bon élément à modifier. Mais vous pouvez utiliser l’outil Inspecter pour vous aider. Supposons que vous souhaitiez modifier le texte du premier lien dans l’élément Section 1 de la page rendue :

Pour obtenir une référence à l’élément de lien que vous souhaitez modifier :

1. Accédez à la page Web que vous voulez inspecter. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Cliquez sur l’outil Inspecter (), puis, dans la page web rendue, survolez un lien, tel que Lien 1 :

   

4. Cliquez sur le lien survolé sur la page web rendue. DevTools ouvre l’outil Éléments , avec l’élément correspondant sélectionné :

   

5. Cliquez sur le ... bouton en regard de l’élément dans l’arborescence DOM, puis sélectionnez Copier>le chemin JS :

   

   Voici le chemin JS que vous avez copié :

   document.querySelector("body > main > section:nth-child(1) > ul > li:nth-child(1) > a")
   

   Le chemin ci-dessus est un sélecteur CSS qui pointe vers l’élément de lien que vous avez sélectionné à l’aide de l’outil Inspecter .

6. Dans la console, collez le chemin JavaScript que vous avez copié, mais n’appuyez pas encore sur Entrée .

7. Remplacez le texte du lien par Updated link. Pour ce faire, ajoutez .textContent = "Updated link" au chemin JavaScript que vous avez précédemment collé :

   

Utilisez les API DOM de votre choix pour modifier l’arborescence DOM dans la console. Pour la rendre plus pratique, la console est fournie avec quelques méthodes utilitaires d’assistance.

Fonctions utilitaires utiles de la console

De nombreuses méthodes et raccourcis pratiques sont à votre disposition en tant que fonctions utilitaires dans l’outil Console . Certaines de ces fonctions utilitaires sont très utiles pour interagir avec l’arborescence DOM d’une page web et sont décrites ci-dessous. Pour en savoir plus, consultez Fonctions et sélecteurs d’utilitaires de l’outil Console.

Obtenir des éléments avec les fonctions $ et les raccourcis

Le $ caractère a une signification particulière dans l’outil Console :

• Les $() fonctions et $$() sont des versions plus courtes des document.querySelector() fonctions et document.querySelectorAll() .

• $0, $1, $2$3, et $4 sont des raccourcis vers des éléments que vous avez récemment sélectionnés dans l’outil Éléments. $0 est toujours l’élément sélectionné le plus récemment. Ainsi, dans l’exemple précédent Obtenez une référence à un élément, une fois que vous avez sélectionné l’élément à l’aide de l’outil Inspecter , vous pouvez modifier son texte en utilisant $0.textContent = "Updated link" pour obtenir le même effet.

• $x() vous permet de sélectionner des éléments DOM à l’aide de XPath.

Obtenir tous les liens de la page

Dans cet exemple, vous utilisez la fonction utilitaire $$() pour répertorier tous les liens de la page Web. Vous utilisez ensuite cette fonction avec la méthode du filter() tableau pour vous débarrasser des liens qui ne commencent https pas (comme les liens d’ancrage dans la page Web actuelle), afin de filtrer la liste pour n’inclure que des liens externes.

1. Accédez à la page web à partir de laquelle vous souhaitez obtenir les liens. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Pour obtenir la liste de tous les liens de la page, entrez le code suivant dans la console, puis appuyez sur Entrée :

   $$('a');
   

   

   $$('a') est l’abréviation de document.querySelectorAll('a').

4. Développez la liste des liens enregistrés dans la console, puis développez le premier objet lien. Les propriétés du lien s’affichent :

   

5. Pour réduire la quantité d’informations renvoyées par la $$() fonction, utilisez la méthode du map() tableau. La map() méthode fonctionne car la $$() fonction renvoie un tableau.

   $$('a').map(a => {
     return {url: a.getAttribute("href"), text: a.innerText}
   });
   

   Le code ci-dessus renvoie un tableau de tous les liens, où chaque objet de lien est mappé à un objet JavaScript avec les url propriétés et text .

6. Développez quelques-uns des objets de lien renvoyés pour afficher leurs propriétés :

   

7. Pour ne lister que les liens externes, utilisez la filter() méthode des tableaux pour vous débarrasser des liens qui ne commencent pas par https:

   $$('a').map(a => {
      return {url: a.getAttribute("href"), text: a.innerText}
   }).filter(a => {
      return a.url.startsWith("https");
   });
   

   

Afficher des éléments DOM dans un tableau

Dans l’exemple précédent, vous affichiez une liste d’éléments de la page dans la console. Les éléments sont affichés sous la forme d’un tableau JavaScript. Pour faciliter l’utilisation de la liste des éléments de la console, vous pouvez les afficher dans un tableau triable à la place, en utilisant la fonction utilitaire console.table() :

1. Accédez à la page Web que vous voulez inspecter. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Collez le code suivant dans la console, puis appuyez sur Entrée :

   console.table($$('img'), ['src','alt'])
   

   La liste des éléments de la page web s’affiche <img> dans la console, sous forme de tableau, avec chaque src image et alt attributs sous forme de colonnes :

   

Obtenir tous les en-têtes de page et URL d’ancrage

Dans cet exemple, vous obtenez tous les titres de la page Web qui ont un id attribut, et vous générez une URL qui pointe vers chaque titre.

1. Accédez à la page Web que vous voulez inspecter. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Copiez et collez le code suivant dans la console, puis appuyez sur Entrée :

   let headings = $$('main [id]').filter(el => {
     return el.nodeName.startsWith('H');
   }).map(el => {
     return `${el.innerText}: ${document.location.href}#${el.id}\n`;
   });
   console.log(headings.join("\n"));
   

   Le résultat est un texte qui contient du contenu pour chaque titre de section, suivi de l’URL complète pour le titre de section :

   

Copier les informations à partir de la console

Dans les exemples précédents, vous avez généré des listes d’éléments et des chaînes d’informations. Il peut être utile de copier les informations générées à partir de la console et de les coller ailleurs.

Pour copier la valeur de retour d’une expression que vous exécutez dans la console, utilisez la fonction utilitaire copy() :

1. Accédez à la page web dont vous souhaitez extraire des informations. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Pour copier la liste de toutes les URL d’image sur la page, entrez le code suivant dans la console, puis appuyez sur Entrée :

   copy($$('img').map(img => img.src).join("\n"));
   

   La copy() fonction utilitaire peut prendre n’importe quel argument qui peut être converti en chaîne et le copier dans le presse-papiers. Dans cet exemple, l’argument est une chaîne qui contient toutes les URL d’images sur la page, séparées par une nouvelle ligne.

4. Ouvrez un éditeur de texte, tel que Visual Studio Code, puis collez les URL d’image copiées dans l’éditeur :

   

Effacer la console

Lors de l’exécution de code dans la console, vous vous retrouvez souvent avec de nombreuses instructions d’entrée et résultats de sortie que vous n’avez plus besoin d’afficher. Vous pouvez effacer la console à l’aide de la clear() fonction utilitaire.

Répertorier les écouteurs d’événements qui sont affectés à un élément

Pour répertorier tous les écouteurs d’événements qui sont affectés à un élément, utilisez la fonction utilitaire getEventListeners() :

1. Accédez à la page Web que vous voulez inspecter. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Cliquez sur l’outil Inspecter , puis sur la page web rendue, cliquez sur l’une des images pour la sélectionner. L’outil Éléments s’affiche et l’élément d’image que vous avez sélectionné est mis en surbrillance dans l’arborescence DOM :

   

4. Ouvrez l’outil Console , entrez le code suivant, puis appuyez sur Entrée :

   getEventListeners($0);
   

   Dans l’extrait de code ci-dessus, $0 se trouve un raccourci vers l’élément actuellement sélectionné <img> dans l’outil Éléments . La getEventListeners() fonction utilitaire renvoie un objet qui contient tous les écouteurs d’événements attribués à l’image.

5. Développez l’objet, puis développez le seul écouteur d’événements de la liste pour afficher les propriétés de l’écouteur. La listener propriété affiche le nom de la fonction appelée lorsque l’événement est déclenché (dans cet exemple, showImage) :

   

Surveiller les événements déclenchés sur la page

Les sites web qui utilisent JavaScript réagissent souvent aux événements utilisateur qui se produisent dans le navigateur. Il peut être difficile de suivre tous les événements déclenchés par le navigateur. La monitorEvents() fonction utilitaire vous permet de surveiller les événements déclenchés sur la page web.

Surveiller tous les événements sur un élément

Pour démarrer la surveillance des événements :

1. Accédez à la page web que vous voulez surveiller. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Pour commencer à surveiller les événements déclenchés sur un élément, par exemple sur l’un des <img> éléments, entrez le code suivant dans la console, puis appuyez sur Entrée :

   monitorEvents(document.querySelector('img'));
   

   Le code ci-dessus surveille tous les événements déclenchés sur le premier <img> élément de la page.

4. Dans la page web rendue, placez le curseur sur l’image et déplacez votre souris ou appuyez sur l’image avec le clavier. Événements tels que mouseover, mousemoveet focus sont enregistrés dans la console :

   

Lorsque vous surveillez des événements, vous obtenez des journaux dans la console chaque fois qu’un événement est déclenché par le navigateur. Cela peut entraîner beaucoup de bruit dans la console. Vous pouvez également surveiller des événements spécifiques sur un élément.

Surveiller des événements spécifiques sur un élément

Pour commencer à surveiller des événements spécifiques sur un élément :

1. Accédez à la page web que vous voulez surveiller. Par exemple, ouvrez la page de démonstration des interactions DOM de l’outil Console DevTools dans un nouvel onglet ou une nouvelle fenêtre.

2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

3. Pour commencer à surveiller uniquement les événements mousedown, mouseup et click qui sont déclenchés sur le premier <img> élément de la page, entrez le code suivant dans la console, puis appuyez sur Entrée :

   monitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);
   

4. Dans la page web rendue, cliquez sur la première image. mousedown, mouseupet click les événements sont enregistrés sur la console :

   

Surveiller les événements dans la fenêtre

Pour recevoir une notification dans la console chaque fois que vous faites défiler ou redimensionnez la fenêtre :

1. Collez le code suivant dans la console :

   monitorEvents(window, ['resize', 'scroll']);
   

2. Faire défiler la page et redimensionner la fenêtre du navigateur. La console enregistre les événements déclenchés :

   

Arrêter la supervision des événements

Lors de la surveillance des événements dans le DOM, la console peut devenir bruyante. Pour arrêter la surveillance des événements, utilisez la fonction utilitaire unmonitorEvents() :

unmonitorEvents(document.querySelector('img'));
unmonitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);
unmonitorEvents(window, ['resize', 'scroll']);

Enregistrer les scripts d’interaction DOM sous forme d’extraits de code

Si vous entrez le même code d’interaction DOM à plusieurs reprises dans la console, envisagez d’enregistrer le code en tant qu’extrait de code, puis d’exécuter l’extrait de code. Les extraits de code sont enregistrés dans l’outil Sources et vous pouvez les exécuter à partir de cet outil ou du menu de commande. Pour en savoir plus, voir Exécuter des extraits de code JavaScript sur n’importe quelle page web.

Voir aussi

• Messages de journal dans l’outil Console
• Exécuter JavaScript dans la console