本文翻译自:What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?
In Google Chrome's developer tools, when I select an element, I see ==$0
next to the selected element. 在Google Chrome的开发者工具中,当我选择一个元素时,我会在所选元素旁边看到==$0
。 What does that mean? 那是什么意思?
#1楼
参考:https://stackoom.com/question/2VFJz/什么-双等于零美元-在Chrome开发者工具中意味着什么
#2楼
It's the last selected DOM node index. 这是最后选择的DOM节点索引。 Chrome assigns an index to each DOM node you select. Chrome会为您选择的每个DOM节点分配一个索引。 So $0
will always point to the last node you selected, while $1
will point to the node you selected before that. 因此$0
将始终指向您选择的最后一个节点,而$1
将指向您之前选择的节点。 Think of it like a stack of most recently selected nodes. 可以把它想象成一堆最近选择的节点。
As an example, consider the following 例如,请考虑以下内容
<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>
Now you opened the devtools console and selected #sunday
, #monday
and #tuesday
in the mentioned order, you will get ids like: 现在你打开了devtools控制台并#sunday
#monday
提到的顺序选择了#sunday
, #monday
和#tuesday
,你会得到如下的ID:
$0 -> <div id="tuesday"></div>
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>
Note: It Might be useful to know that the node is selectable in your scripts (or console), for example one popular use for this is angular element selector, so you can simply pick your node, and run this: 注意:知道在脚本(或控制台)中可以选择节点可能很有用,例如,一个常用的用途是角度元素选择器,因此您只需选择节点,然后运行:
angular.element($0).scope()
Voila you got access to node scope via console. 您可以通过控制台访问节点范围。
#3楼
$0 returns the most recently selected element or JavaScript object, $1 returns the second most recently selected one, and so on. $ 0返回最近选择的元素或JavaScript对象,$ 1返回最近选择的第二个元素,依此类推。
Refer : Command Line API Reference 请参阅: 命令行API参考
#4楼
The other answers here clearly explained what does it mean.I like to explain its use. 这里的其他答案清楚地解释了它的含义。我想解释一下它的用法。
You can select an element in the elements
tab and switch to console
tab in chrome. 您可以在elements
选项卡中选择一个元素,然后切换到chrome中的console
选项卡。 Just type $0 or $1
or whatever number and press enter and the element will be displayed in the console for your use. 只需键入$0 or $1
或任何数字,然后按Enter键,元素将显示在控制台中供您使用。
#5楼
I will say It 's just shorthand syntax for get reference of html element during debugging time , normaly these kind of task will perform by these method 我会说这只是在调试时获取html元素引用的简写语法,通常这些方法将通过这些方法执行
document.getElementById , document.getElementsByClassName , document.querySelector
so clicking on an html element and getting a reference variable ($0) in console is a huge time saving during the day 所以点击一个html元素并在控制台中获取一个引用变量($ 0)是白天节省的大量时间
#6楼
This is Chrome's hint to tell you that if you type $0 on the console, it will be equivalent to that specific element. 这是Chrome的提示,告诉您如果在控制台上键入$ 0,它将等同于该特定元素。
Internally, Chrome maintains a stack, where $0 is the selected element, $1 is the element that was last selected, $2 would be the one that was selected before $1 and so on. 在内部,Chrome维护一个堆栈,其中$ 0是所选元素,$ 1是上次选择的元素,$ 2将是在$ 1之前选择的元素,依此类推。
Here are some of its applications: 以下是它的一些应用:
- Accessing DOM elements from console: $0 从控制台访问DOM元素: $ 0
- Accessing their properties from console: $0.parentElement 从控制台访问其属性: $ 0.parentElement
- Updating their properties from console: $1.classList.add(...) 从控制台更新其属性: $ 1.classList.add(...)
- Updating CSS elements from console: $0.styles.backgroundColor="aqua" 从控制台更新CSS元素: $ 0.styles.backgroundColor =“aqua”
- Triggering CSS events from console: $0.click() 从控制台触发CSS事件: $ 0.click()
- And doing a lot more complex stuffs, like: $0.appendChild(document.createElement("div")) 并做了很多更复杂的东西,比如: $ 0.appendChild(document.createElement(“div”))