什么== $ 0(双等于零美元)在Chrome开发者工具中意味着什么?

本文翻译自: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键,元素将显示在控制台中供您使用。

chrome dev工具的屏幕截图


#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”))

Watch all of this in action: 观看所有这些:

在此输入图像描述

Backing statement: 支持声明:

Yes, I agree there are better ways to perform these actions, but this feature can come out handy in certain intricate scenarios , like when a DOM element needs to be clicked but it is not possible to do so from the UI because it is covered by other elements or, for some reason, is not visible on UI at that moment. 是的,我同意有更好的方法来执行这些操作,但是这个功能在某些复杂的场景中可以派上用场 ,比如需要点击一个DOM元素但是不能从UI那样做,因为它被覆盖了其他元素或由于某种原因,此时在UI上不可见。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值