什么== $ 0（双等于零美元）在Chrome开发者工具中意味着什么？

Question

在Google Chrome的开发者工具中，当我选择一个元素时，我会在所选元素旁边看到==$0。这是什么意思？

Answer 1

它是最后选择的DOM节点索引。 Chrome会为您选择的每个DOM节点分配一个索引。因此$0将始终指向您选择的最后一个节点，而$1将指向您之前选择的节点。可以把它想象成一堆最近选择的节点。

例如，请考虑以下内容

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

现在您打开了devtools控制台并按照上述顺序选择了#sunday，#monday和#tuesday，您将获得以下ID：

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

注意： 知道可以在脚本（或控制台）中选择节点可能很有用，例如，一个常用的用途是角度元素选择器，因此您只需选择节点，然后运行：

angular.element($0).scope()

您可以通过控制台访问节点范围。

Answer 2

  

$ 0返回最近选择的元素或JavaScript对象，   $ 1返回最近选择的第二个，依此类推。

参考：Command Line API Reference

Answer 3

这里的其他答案清楚地解释了它的意思。我想解释它的用法。

您可以在elements标签中选择一个元素，然后切换到Chrome中的console标签。只需输入$0 or $1或任意数字，然后按Enter键，该元素将显示在控制台中供您使用。

Answer 4

这是Chrome的提示，告诉您，如果您在控制台上键入$ 0，它将等同于该特定元素。

在内部，Chrome维护一个堆栈，其中$ 0是选定的元素，$ 1是最后选择的元素，$ 2是在$ 1之前选择的元素，依此类推。

以下是它的一些应用程序：

• 从控制台访问DOM元素： $ 0
• 从控制台访问其属性： $ 0.parentElement
• 从控制台更新其属性： $ 1.classList.add（...）
• 从控制台更新CSS元素： $ 0.styles.backgroundColor =“ aqua”
• 从控制台触发CSS事件： $ 0.click（）
• 做很多更复杂的事情，例如： $ 0.appendChild（document.createElement（“ div”））

观看所有这些操作：

支持声明：

是的，我同意有更好的方法来执行这些操作，但是在某些复杂的情况下此功能可以派上用场，例如当需要单击DOM元素但由于其被其他元素覆盖或由于某种原因当时在UI上不可见而无法通过UI进行单击时。

Answer 5

我会说这只是在调试时获取html元素引用的简写语法，通常此类方法将通过这些方法执行

[1]

因此，单击html元素并在控制台中获取参考变量（$ 0）在白天可节省大量时间