Chromeデベロッパーツールで== $ 0（2倍はドル0）はどういう意味ですか？

Google Chromeの開発者ツールで要素を選択する==$0と、選択した要素の横に表示 されます。どういう意味ですか？

最後に選択されたDOMノードインデックスです。Chromeは、選択した各DOMノードにインデックスを割り当てます。つまり、$0常に選択した最後のノードを$1指し、その前に選択したノードを指します。最近選択したノードのスタックのようなものと考えてください。

例として、以下を検討してください

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

今、あなたはデベロッパーツールのコンソールを開き、選択#sunday、#mondayおよび#tuesday上記の順番で、次のようなIDを取得します。

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

注： ノードがスクリプト（またはコンソール）で選択可能であることを知っていると便利な場合があります。たとえば、これの一般的な用途の1つは角度要素セレクターです。ノードを選択して実行するだけです。

angular.element($0).scope()

これで、コンソールからノードスコープにアクセスできました。

$ 0は最後に選択された要素またはJavaScriptオブジェクトを返し、$ 1は2番目に選択された要素またはJavaScriptオブジェクトを返します。

参照：コマンドラインAPIリファレンス

ここでの他の答えはそれが何を意味するのかを明確に説明しました。私はその使用法を説明したいです。

elementsタブで要素を選択し、consoleクロムのタブに切り替えることができます。$0 or $1数字を入力してEnterキーを押すだけで、要素がコンソールに表示され、使用できるようになります。

これは、コンソールで$ 0と入力すると、その特定の要素と同等になることを伝えるChromeのヒントです。

内部的に、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"））

このすべてを実際に見てください：

バッキングステートメント：

これは、デバッグ時にhtml要素の参照を取得するための単純な構文です。通常、これらの種類のタスクはこれらのメソッドによって実行されます

document.getElementById , document.getElementsByClassName , document.querySelector

したがって、html要素をクリックしてコンソールで参照変数（$ 0）を取得すると、日中の時間を大幅に節約できます