web-dev-qa-db-ja.com

$ Chromeで変数？

私は、jQuery（または$記号をショートカットとして使用する他のライブラリ）のないページで、google chromeの開発者ツールを使用して作業していました。コンソールで$を調べたとき（入力してEnterキーを押すだけ）、次のようになりました。

$
function () { [native code] }

したがって、chromeには、$から参照できるネイティブ関数がいくつかあります。 chromeのみがこれを持っているようで、window['$']やdocument['$']またはthis['$']を介してアクセスすることはできません。

この機能が何なのかわかりませんでした。あなたはそれが何をしているのか知っていますか、そしておそらくこれに関するいくつかの背景情報を持っていますか？前もって感謝します！

javascriptgoogle-chromegoogle-chrome-devtoolsdollar-sign
50
Dennis

これは、昨年からずっと変わっています。

Devtoolsコンソールは_$_のエイリアスとして_document.querySelector_を 他の多くのこと とともに提供します。ここに抜粋したリストがあります：

  • $(selector)は、指定されたCSSセレクターを持つ最初のDOM要素への参照を返します。この関数は、document.querySelector()関数のエイリアスです。
  • $$(selector)は、指定されたCSSセレクタに一致する要素の配列を返します。このコマンドは、document.querySelectorAll()を呼び出すのと同じです。
  • _$__は、最後に評価された式の値を返します。
  • _$0_、_$1_、_$2_、_$3_、_$4_コマンドは、[要素]パネル内で最後に検査された5つのDOM要素または最後のDOM要素への履歴参照として機能します。 [プロファイル]パネルで選択された5つのJavaScriptヒープオブジェクト。

...そしてたくさんの人たち。

_$_を_document.querySelector_のエイリアスとして呼び出す方法に注意してください。ただし、_$$_は_document.querySelectorAll_の呼び出しと「同等」です。どちらも文字通り真実ではないようです。 _$ === document.querySelector_はfalseであり、_$$_はNodeListではなくarrayを返します。

24
T.J. Crowder

これは、Chrome開発者ツールの機能（このページからは使用できません）の1つです。 [コンソール]ページのそのドキュメント を参照してください。

セレクターで要素を取得します。

Firefoxは同様のものを実装します

28
Quentin

既存の回答は古く、_$_は_document.getElementById_または_document.querySelector_のエイリアスではなく、querySelectorのラッパーです。このラッパーは、実際には、子を照会する要素のオプションの2番目の引数を取ります。

この関数ファミリーは コンソール：要素の選択 の下に文書化されています：

要素の選択

要素を選択するためのショートカットがいくつかあります。これらは、標準的な対応物をタイプアウトする場合と比較して、貴重な時間を節約します。

$() 指定されたCSSセレクタに一致する最初の要素を返します。 document.querySelector() のショートカットです。

$$() 指定されたCSSセレクタに一致するすべての要素の配列を返します。これは document.querySelectorAll() のエイリアスです

$x() 指定された XPath に一致する要素の配列を返します。

ただし、これらの値はコンソールのデフォルト値にすぎません。ページがjQueryなどを含めることで変数を上書きする場合、コンソールはページ自体の値を使用し、$('p')などは最初のp要素ではなくjQueryオブジェクトを返します。

15
Alexander O'Mara

開発ツールへのリンク による判断では、単にgetElementById（）ではなくdocument.querySelector（）が使用されるようになりました。

7
AlbertEngelB

Webkitインスペクターには、Mootoolsのセレクターと同じ2つのセレクター$と$$があります。

あなたはそれにいくつかの情報を見つけることができます ここ

これらは、デバッグを支援するためにここにあります。

5
zessx

https://developers.google.com/chrome-developer-tools/docs/console

Document.getElementByIdにアクセスするだけです。

5
oryol