$（document.body）と$（ 'body'）の違い

104

私はjQueryの初心者であり、見つけたコード例をいくつか見ていきます。

$(document.body) そして $('body')

これら2つの間に違いはありますか？

jquery document document-body

— Ashleedawg
ソース

1

1つはより高速ですが、1つのページで数回しか呼び出されないことを考えると、2つの違いはごくわずかです。

— ケビンB

$(body).on('click'...イベントでは機能しませんが$(document.body)、$(document)両方とも機能します。

— rybo111

3

上記のステートメントは誤りであり、パフォーマンスにもわずかな違いがあります。約10％が$（document.body）に有利です。ここで比較を確認できます。sitepoint.com/ jquery

— Sigismund

76

同じ要素を参照していdocument.bodyますが、jQueryに要素を直接渡すと言う点が異なります。または、文字列を渡す'body'と、jQueryセレクタエンジンは文字列を解釈して、それが参照する要素を。

実際には、どちらも仕事を成し遂げるでしょう。

興味がある場合は、jQuery関数のドキュメントに詳細があります。

— ジャスティン・エティエ
ソース

1

最初のステートメントは完全に正しくはありません。彼らはあり、同じ要素を参照してください。通常でも。しかしいつもではない：）。以下の私の答えを参照してください。

— jvenema

18

ここでの答えは実際には完全に正しいわけではありません。近いですが、特別なケースがあります。

違いは、$（ 'body'）は実際にはタグ名で要素を選択するのに対し、document.bodyはドキュメント上の直接オブジェクトを参照することです。

つまり、あなた（または不正なスクリプト）がdocument.body要素を上書きした場合（恥！）$（ 'body'）は機能しますが、$（document.body）は機能しません。したがって、定義上、それらは同等ではありません。

ドキュメントオブジェクトの上書きされたbody要素と同じものをトリガーする他のエッジケース（IEでグローバルにID化された要素など）があり、同じ状況が当てはまると思います。

— jvenema
ソース

私はdocument.bodyそれ以外のものに設定することはおそらく可能だとは思わない<body>：i.imgur.com/unJVwXy.png

— mpen

今すぐ解決できます。FFとIEがこれを許可したり、IDが「body」のアイテムで混乱したりしたときがありました（私がヒットしたエラーは、タグが付けられた写真が付いた形成外科のサイトでスクリプトを使用している顧客でした） ID「body」）。うまくいけば問題はありません:)

— jvenema

12

私のブラウザでテストするとき、タイミングにかなり大きな違いを発見しました。

次のスクリプトを使用しました。

警告：これを実行すると、ブラウザが少しフリーズし、クラッシュすることさえあります。

var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0){
    $("body");
}

console.timeEnd('selector');

i = n;
console.time('element');
while (i --> 0){
    $(document.body);
}

console.timeEnd('element');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

スニペットを展開

私は1,000万回のインタラクションを行い、それが結果でした（Chrome 65）。

セレクター：19591.97509765625ms
エレメント：4947.8759765625ms

要素を直接渡すと、セレクタを渡すよりも約4倍速くなります。

— ファイター
ソース

7

あなたは「矢印表記」だけに賛成票を獲得し、あなたは生意気なファイターをあなたに！

— KlaymenDK 2018年

1

これについてどこかで読んだところ、すぐに使用したいと思ったXD

— Phiter

はい、でも、本当にこれを1000万回行うのですか？数えられるところでこの種の分析をしてみませんか？

— scrainne

@scrayneこれらのパフォーマンステストは実際の使用例ではありません。このような要素に対して1,000万回の操作を行うことは非常にまれです。しかし、OPは違いを知りたくて、パフォーマンスの違いがあることに気付いたので、注目に値すると思います。

— ファイター

9

$(document.body)グローバル参照を使用しているdocumentへの参照を取得するbody一方、$('body')jQueryの参照を取得れるセレクタである<body>上の素子がdocument。

私が見ることができる大きな違いはなく、一方から他方への顕著なパフォーマンスの向上はありません。

— ガベ
ソース

9

$(document.body)この記事によれば、測定はかなり

— Steve Harrison

6

まったく違いはないはずですが、最初の方が少しパフォーマンスが良いかもしれませんが、それは取るに足らないことだと思います（これについては本当に心配しないでください）。

両方で<body>jQueryオブジェクトにタグをラップします

— ニコラ・ペルチェッティ
ソース

3

出力的には両方とも同等です。2番目の式はDOMルートからトップダウンルックアップを通過しますが。JQueryがラップオーバーするためのdocument.bodyオブジェクトをすでに手元に持っている場合は、追加のオーバーヘッドを回避することをお勧めします（ただし、わずかであってもかまいません）。http://api.jquery.com/jQuery/ #Selector Contextを参照してください

— 庵主
ソース