google chrome - quitar - ¿Qué significa== $ 0(doble igual dólar cero) en las Herramientas para desarrolladores de Chrome?
developer tools chrome quitar (5)
$ 0 devuelve el elemento u objeto JavaScript seleccionado más recientemente, $ 1 devuelve el segundo elemento seleccionado más recientemente, y así sucesivamente.
Esta es la sugerencia de Chrome para decirle que si escribe $ 0 en la consola, será equivalente a ese elemento específico.
Internamente, Chrome mantiene una pila, donde $ 0 es el elemento seleccionado, $ 1 es el elemento que se seleccionó por última vez, $ 2 sería el que se seleccionó antes de $ 1 y así sucesivamente.
Estas son algunas de sus aplicaciones:
- Acceso a elementos DOM desde la consola: $ 0
- Accediendo a sus propiedades desde la consola: $ 0.parentElement
- Actualización de sus propiedades desde la consola: $ 1.classList.add (...)
- Actualización de elementos CSS desde la consola: $ 0.styles.backgroundColor = "aqua"
- Activación de eventos CSS desde la consola: $ 0.click ()
- Y haciendo cosas mucho más complejas, como: $ 0.appendChild (document.createElement ("div"))
Mira todo esto en acción:
Declaración de respaldo:
Sí, estoy de acuerdo en que hay mejores formas de realizar estas acciones, pero esta característica puede resultar útil en ciertos escenarios complejos , como cuando se debe hacer clic en un elemento DOM pero no es posible hacerlo desde la interfaz de usuario porque está cubierto por otros elementos o, por alguna razón, no es visible en la interfaz de usuario en ese momento.
Diré que es solo una sintaxis abreviada para obtener referencia del elemento html durante el tiempo de depuración, normalmente este tipo de tarea se realizará mediante este método
document.getElementById , document.getElementsByClassName , document.querySelector
así que hacer clic en un elemento html y obtener una variable de referencia ($ 0) en la consola es un gran ahorro de tiempo durante el día
Es el último índice de nodo DOM seleccionado.
Chrome asigna un índice a cada nodo DOM que seleccione.
Entonces
$0
siempre apuntará al último nodo que seleccionó, mientras que
$1
apuntará al nodo que seleccionó antes de eso.
Piense en ello como una pila de nodos seleccionados más recientemente.
Como ejemplo, considere lo siguiente
<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>
Ahora que abrió la consola de devtools y seleccionó
#sunday
,
#monday
y
#tuesday
en el orden mencionado, obtendrá identificadores como:
$0 -> <div id="tuesday"></div>
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>
Nota: Puede ser útil saber que el nodo se puede seleccionar en sus scripts (o consola), por ejemplo, un uso popular para esto es el selector de elemento angular, por lo que simplemente puede elegir su nodo y ejecutar esto:
angular.element($0).scope()
Voila, tienes acceso al alcance del nodo a través de la consola.
Las otras respuestas aquí explican claramente lo que significa. Me gusta explicar su uso.
Puede seleccionar un elemento en la pestaña de
elements
y cambiar a la pestaña de
console
en Chrome.
Simplemente escriba
$0 or $1
o cualquier número y presione Entrar y el elemento se mostrará en la consola para su uso.
