在谷歌Chrome的开发工具,当我选择一个元素,我看到==$0旁边选定的元素。这是什么意思?
当前回答
$0返回最近选择的元素或JavaScript对象, $1返回第二个最近选择的,依此类推。
参考:命令行API参考
其他回答
这里的其他答案清楚地解释了它的含义。我想解释一下它的用途。
你可以在元素选项卡中选择一个元素,然后切换到chrome的控制台选项卡。只需输入$0或$1或任何数字,然后按enter,元素将显示在控制台中供您使用。
它是最后选中的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元素选择器是一个流行的用途,所以你可以简单地选择你的节点,并运行这个:
angular.element($0).scope()
瞧,你可以通过控制台访问节点作用域。
这是Chrome的提示,告诉你,如果你在控制台上输入$0,它将等同于那个特定的元素。
在内部,Chrome维护了一个堆栈,其中$0是选中的元素,$1是最后选中的元素,$2是在$1之前选中的元素,以此类推。
以下是它的一些应用:
从控制台访问DOM元素:$0 从控制台访问它们的祖先:$0.parentElement 从控制台更新它们的属性: 从控制台添加/更新元素的样式:$0.style.backgroundColor="aqua" 从控制台触发JS事件:$0.click() 并做了很多更复杂的事情,比如:
观看所有这些行动:
支持声明:
是的,我同意有更好的方法来执行这些操作,但这个特性在某些复杂的情况下可以派上用场,比如当一个DOM元素需要被单击,但不可能从UI上这样做,因为它被其他元素覆盖,或者由于某种原因,当时在UI上不可见。
我将说它只是在调试期间获取html元素引用的简写语法,通常这类任务将通过这些方法执行
document.getElementById , document.getElementsByClassName , document.querySelector
因此,在控制台单击HTML元素并获得一个引用变量($0)可以节省大量时间
$0返回最近选择的元素或JavaScript对象, $1返回第二个最近选择的,依此类推。
参考:命令行API参考
推荐文章
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- Access-Control-Allow-Origin不允许Origin < Origin >
- 如何设置断点在内联Javascript在谷歌Chrome?
- Chrome调试-打破下一个点击事件
- 谷歌Chrome表单自动填充和它的黄色背景
- 如何处理“未捕获(在承诺)DOMException:播放()失败,因为用户没有首先与文档交互。”在桌面与Chrome 66?
- 强制DOM重绘/刷新Chrome/Mac
- 我如何才能使setInterval也工作时,一个标签是不活跃的Chrome?
- 我如何调试一个HTTP POST在Chrome?
- 我如何从谷歌Chrome扩展获得当前选项卡的URL ?
- 调试WebSocket在谷歌Chrome
- 如何在浏览器中检查消失的元素?
- 超出ResizeObserver循环限制