什么== $ 0(双等于零美元)在Chrome开发者工具中意味着什么？
one*_*end 294 google-chrome code-inspection google-chrome-devtools
在Google Chrome的开发者工具中,当我选择一个元素时,我会看到 ==$0所选元素的旁边.那是什么意思？
dea*_*ock 276
这是最后选择的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()
您可以通过控制台访问节点范围.
- 这有什么用途/好处？ (7认同)
- 那么在UI中总是显示"== $ 0"有什么用呢？任何知道"$ 0"的人都会知道它是哪个元素,对于没有这个元素的人来说,这是没有意义的. (6认同)
- @joe_young,我认为好处是能够在调整内容时快速访问控制台中的元素.这是我放在一起展示的视频!https://youtu.be/AKLdx8z6aDk (5认同)
- 我相信它可以帮助调试.在调试期间,使用简单选择器访问被检查元素的能力可以在许多情况下提供帮助. (4认同)
- 仅供参考： $0 在运行时不起作用： `setTimeout(() => console.log($0), 0); // $0 未定义` 示例: [](https://i.stack.imgur.com/gOYfm.png) (2认同)
Siv*_*ash 23
这里的其他答案清楚地解释了它的含义.我想解释一下它的用法.
您可以在elements选项卡中选择一个元素,然后切换到consolechrome 中的选项卡.只需键入$0 or $1或输入任何数字,然后按Enter键,元素将显示在控制台中供您使用.
这是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元素但由于它包含在DOM中而无法从中单击时其他元素，或者由于某种原因，当时在用户界面上不可见。我会说这只是在调试时获取html元素引用的简写语法，通常此类任务将通过这些方法执行
document.getElementById , document.getElementsByClassName , document.querySelector
因此，单击 html 元素并在控制台中获取引用变量 ($0) 可以节省大量时间