Que signifie ==$0 (double égal dollar zéro) dans les outils de développement de Chrome ?

Question

Dans les outils de développement de Google Chrome, lorsque je sélectionne un élément, je vois ==$0 à côté de l'élément sélectionné. Que signifie cela?

Answer 1

C'est l'index du dernier nœud DOM sélectionné. Chrome attribue un index à chaque nœud DOM que vous sélectionnez. Ainsi, $0 pointera toujours vers le dernier nœud que vous avez sélectionné, tandis que $1 pointera vers le nœud que vous avez sélectionné avant cela. Pensez-y comme une pile des nœuds récemment sélectionnés.

Par exemple, considérons ce qui suit

Vous avez maintenant ouvert la console des outils de développement et sélectionné #dimanche, #lundi et #mardi dans l'ordre mentionné, vous obtiendrez les ids suivants:

$0 ->  
$1 -> 
$2 -> 

Remarque: Il peut être utile de savoir que le nœud est sélectionnable dans vos scripts (ou console), par exemple, une utilisation courante de ceci est le sélecteur d'élément angular, donc vous pouvez simplement choisir votre nœud, et exécuter ceci :

angular.element($0).scope()

Voilà, vous avez accès à la portée du nœud via la console.

Answer 2

$0 renvoie l'élément ou l'objet JavaScript le plus récemment sélectionné, $1 renvoie le deuxième élément sélectionné le plus récemment, et ainsi de suite.

Référence : Référence de l'API en ligne de commande

Answer 3

Les autres réponses ici ont clairement expliqué ce que cela signifie. J'aime expliquer son utilisation.

Vous pouvez sélectionner un élément dans l'onglet elements et basculer vers l'onglet console dans Chrome. Il vous suffit de taper $0 ou $1 ou n'importe quel numéro et d'appuyer sur Entrée et l'élément s'affichera dans la console pour votre usage.

Answer 4

Ceci est l'indication de Chrome pour vous dire que si vous tapez $0 sur la console, cela sera équivalent à cet élément spécifique.

En interne, Chrome maintient une pile, où $0 est l'élément sélectionné, $1 est l'élément qui a été sélectionné en dernier, $2 serait celui qui a été sélectionné avant $1 et ainsi de suite.

Voici quelques-unes de ses applications :

• Accéder aux éléments du DOM depuis la console : $0
• Accéder à leurs propriétés depuis la console : $0.parentElement
• Mettre à jour leurs propriétés depuis la console : $1.classList.add(...)
• Mettre à jour les éléments CSS depuis la console : $0.styles.backgroundColor="aqua"
• Déclencher des événements CSS depuis la console : $0.click()
• Et faire beaucoup d'autres choses complexes, comme : $0.appendChild(document.createElement("div"))

Regardez tout cela en action :

Déclaration de soutien :

Oui, je suis d'accord qu'il existe de meilleures façons d'effectuer ces actions, mais cette fonctionnalité peut s'avérer utile dans certains scénarios complexes, comme lorsqu'un élément DOM doit être cliqué mais qu'il n'est pas possible de le faire depuis l'interface utilisateur car il est couvert par d'autres éléments or, pour quelque raison, n'est pas visible sur l'interface utilisateur à ce moment-là.

Answer 5

Je dirai que c'est juste une syntaxe abrégée pour obtenir une référence à un élément html pendant le débogage, normalement ce type de tâche sera effectué par ces méthodes

document.getElementById , document.getElementsByClassName , document.querySelector

donc cliquer sur un élément html et obtenir une variable de référence ($0) dans la console est un gain de temps énorme pendant la journée