Perbedaan antara $ (document.body) dan $ ('body')

104

Saya seorang pemula jQuery dan saat mempelajari beberapa contoh kode yang saya temukan:

$(document.body) dan $('body')

Apakah ada perbedaan antara keduanya?

jquery document document-body ashleedawg.dll
sumber
1
Yang satu lebih cepat, namun mengingat itu tidak akan pernah dipanggil lebih dari beberapa kali dalam satu halaman, perbedaan antara keduanya sangat kecil.
Kevin B
$(body)tidak berfungsi untuk .on('click'...acara, sedangkan $(document.body)dan $(document)keduanya berfungsi.
rybo111
3
Pernyataan di atas salah dan ada perbedaan kecil dalam performa, sekitar 10% untuk $ (document.body). Anda dapat melihat perbandingannya di sini sitepoint.com/jquery-body-on-document-on
Sigismund

Jawaban:

77

Mereka merujuk ke elemen yang sama, perbedaannya adalah ketika Anda mengatakan document.bodyAnda meneruskan elemen tersebut langsung ke jQuery. Alternatifnya, ketika Anda meneruskan string 'body', mesin pemilih jQuery harus menafsirkan string untuk mencari tahu elemen apa yang dirujuknya.

Dalam praktiknya, keduanya akan menyelesaikan pekerjaan.

Jika Anda tertarik, ada lebih banyak informasi di dokumentasi untuk fungsi jQuery .

Justin Ethier
sumber
1
Pernyataan pertama tidak sepenuhnya benar. Mereka mungkin mengacu pada elemen yang sama. Biasanya genap. Tapi tidak selalu :). Lihat jawaban saya di bawah.
jvenema
18

Jawabannya di sini sebenarnya tidak sepenuhnya benar. Dekat, tapi ada casing tepi.

Perbedaannya adalah bahwa $ ('body') sebenarnya memilih elemen dengan nama tag, sedangkan document.body mereferensikan objek langsung pada dokumen.

Itu berarti jika Anda (atau skrip jahat) menimpa elemen document.body (malu!) $ ('Body') akan tetap berfungsi, tetapi $ (document.body) tidak akan. Jadi menurut definisi mereka tidak setara.

Saya berani menebak ada kasus tepi lain (seperti elemen id'ed global di IE) yang juga akan memicu jumlah elemen tubuh yang ditimpa pada objek dokumen, dan situasi yang sama akan berlaku.

jvenema
sumber
Saya tidak berpikir itu mungkin untuk diatur document.bodyke apa pun selain <body>: i.imgur.com/unJVwXy.png
mpen
Bisa diselesaikan sekarang. Ada saat ketika FF dan IE akan membiarkan Anda melakukan ini, dan / atau akan bingung dengan item dengan id "body" (kesalahan yang saya temui adalah pelanggan menggunakan skrip kami di situs ahli bedah plastik dengan gambar yang diberi tag id "body"). Semoga tidak lagi menjadi masalah :)
jvenema
12

Saya menemukan perbedaan waktu yang cukup besar saat menguji di browser saya.

Saya menggunakan skrip berikut:

PERINGATAN: menjalankan ini akan membekukan browser Anda sedikit, bahkan mungkin membuat crash.

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>
Luaskan cuplikan

Saya melakukan 10 juta interaksi, dan itulah hasilnya (Chrome 65):

pemilih: 19591.97509765625ms
elemen: 4947.8759765625ms

Meneruskan elemen secara langsung sekitar 4 kali lebih cepat daripada melewatkan selektor.

Phiter
sumber
7
Anda mendapatkan upvote hanya untuk "tanda panah", dasar Anda nakal!
KlaymenDK
1
Saya membaca tentang ini di suatu tempat dan saya ingin segera menggunakannya. XD
Phiter
Ya, tetapi - apakah Anda benar-benar akan melakukan ini 10 juta kali? Mengapa tidak melakukan analisis semacam ini di tempat yang penting?
scrayne
@scrayne pengujian kinerja tersebut bukan tentang kasus penggunaan nyata. Sangat jarang melakukan 10 juta operasi pada elemen seperti ini. Tetapi OP ingin mengetahui perbedaannya dan saya perhatikan bahwa ada perbedaan kinerja, jadi saya kira itu perlu diperhatikan.
Phiter
9

$(document.body)menggunakan referensi global documentuntuk mendapatkan referensi ke body, sedangkan $('body')selektor di mana jQuery akan mendapatkan referensi ke<body> elemen didocument .

Tidak ada perbedaan besar yang dapat saya lihat, tidak ada peningkatan kinerja yang nyata dari satu ke yang lain.

Gabe
sumber
9
$(document.body)jauh lebih cepat menurut artikel ini: sitepoint.com/jquery-body-on-document-on
Steve Harrison
6

Seharusnya tidak ada perbedaan sama sekali mungkin yang pertama sedikit lebih berkinerja tetapi menurut saya itu sepele (Anda tidak perlu khawatir tentang ini, sungguh).

Dengan keduanya Anda membungkus <body>tag dalam objek jQuery

Nicola Peluchetti
sumber
3

Keluaran keduanya setara. Meskipun ekspresi kedua melalui pencarian dari atas ke bawah dari root DOM. Anda mungkin ingin menghindari biaya tambahan (betapapun kecilnya) jika Anda sudah memiliki objek document.body di tangan untuk JQuery untuk menyelesaikannya. Lihat http://api.jquery.com/jQuery/ #Selector Context

santon
sumber