Nas ferramentas de desenvolvedor do Google Chrome, quando seleciono um elemento, vejo ==$0
ao lado do elemento selecionado. O que isso significa?
Nas ferramentas de desenvolvedor do Google Chrome, quando seleciono um elemento, vejo ==$0
ao lado do elemento selecionado. O que isso significa?
Respostas:
É o último índice de nó DOM selecionado. O Chrome atribui um índice a cada nó do DOM que você selecionar. Portanto $0
, sempre apontará para o último nó selecionado, enquanto $1
apontará para o nó selecionado antes disso. Pense nisso como uma pilha dos nós selecionados mais recentemente.
Como exemplo, considere o seguinte
<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>
Agora você abriu as devtools consolar e selecionados #sunday
, #monday
e #tuesday
na ordem mencionada, você vai ter ids como:
$0 -> <div id="tuesday"></div>
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>
Nota: Pode ser útil saber que o nó é selecionável em seus scripts (ou console), por exemplo, um uso popular para isso é o seletor de elemento angular, para que você possa simplesmente escolher seu nó e executar o seguinte:
angular.element($0).scope()
Voila, você tem acesso ao escopo do nó via console.
== $0
na interface do usuário? Quem conhece $0
já sabe qual é o elemento e não faz sentido para quem não conhece.
$ 0 retorna o elemento ou objeto JavaScript selecionado mais recentemente, $ 1 retorna o segundo item selecionado mais recentemente e assim por diante.
Consulte: Referência da API da linha de comandos
As outras respostas aqui explicaram claramente o que isso significa. Gosto de explicar seu uso.
Você pode selecionar um elemento na elements
guia e alternar para a console
guia no chrome. Basta digitar $0 or $1
ou qualquer número e pressionar enter e o elemento será exibido no console para seu uso.
Internamente, o Chrome mantém uma pilha, onde $ 0 é o elemento selecionado, $ 1 é o elemento que foi selecionado pela última vez, $ 2 seria o que foi selecionado antes de $ 1 e assim por diante.
Aqui estão algumas de suas aplicações:
Eu direi que é apenas uma sintaxe abreviada para obter referência do elemento html durante o tempo de depuração, normalmente esse tipo de tarefa será executada por esse método
document.getElementById , document.getElementsByClassName , document.querySelector
então clicar em um elemento html e obter uma variável de referência ($ 0) no console economiza bastante tempo durante o dia
$0
no console e ver o que surge;)