在谷歌Chrome的开发工具,当我选择一个元素,我看到==$0旁边选定的元素。这是什么意思?
==$0
它是最后选中的DOM节点索引。Chrome为你选择的每个DOM节点分配一个索引。所以$0将始终指向你选择的最后一个节点,而$1将指向你在此之前选择的节点。可以把它看作是最近选择的节点的堆栈。
$0
$1
作为一个例子,考虑以下内容
<div id="sunday"></div> <div id="monday"></div> <div id="tuesday"></div>
现在你打开devtools控制台,按照前面提到的顺序选择#sunday, #monday和#tuesday,你会得到如下id:
#sunday
#monday
#tuesday
$0 -> <div id="tuesday"></div> $1 -> <div id="monday"></div> $2 -> <div id="sunday"></div>
<强>注意: 知道这个节点在你的脚本(或控制台)中是可选择的可能是有用的,例如,angular元素选择器是一个流行的用途,所以你可以简单地选择你的节点,并运行这个:
angular.element($0).scope()
瞧,你可以通过控制台访问节点作用域。
$0返回最近选择的元素或JavaScript对象, $1返回第二个最近选择的,依此类推
参考:命令行API参考
这里的其他答案清楚地解释了它的含义。我想解释一下它的用途。
你可以在chrome中选择elements标签中的元素并切换到console标签。只需输入$0 or $1或任何数字并按enter,元素将显示在控制台中供您使用。
elements
console
$0 or $1
我将说它只是在调试期间获取html元素引用的简写语法,通常这类任务将通过这些方法执行
document.getElementById , document.getElementsByClassName , document.querySelector
因此,在控制台单击HTML元素并获得一个引用变量($0)可以节省大量时间
在内部,Chrome维护了一个堆栈,其中$0是被选中的元素,$1是最后被选中的元素,$2将是在$1之前被选中的元素,等等。
$2
以下是它的一些应用:
$0.parentElement
$1.classList.add(...)
$0.style.backgroundColor="aqua"
$0.click()
$0.appendChild(document.createElement("div"))
是的,我同意有更好的方法来执行这些操作,但是在某些复杂的场景中,这个特性可以派上用场,就像当一个DOM元素需要被单击,但不可能从UI这样做,因为它被其他元素覆盖,或者由于某种原因,当时在UI上不可见。