document.getElementById vs jQuery $ ()


620

Apakah ini:

var contents = document.getElementById('contents');

Sama seperti ini:

var contents = $('#contents');

Mengingat bahwa jQuery dimuat?


10
Selain poin yang diangkat dalam jawaban, versi jQuery adalah aplikasi. 100x lebih lambat.

8
apakah ini terbukti di suatu tempat?
FranBran

12
@torazaburo Sebenarnya, versi jQuery bahkan tidak lebih lambat 3 kali (setidaknya di Chrome terbaru). Lihat: jsperf.com/getelementbyid-vs-jquery-id/44
Michał Perłakowski

2
@ MichałPerłakowski di tautan itu, versi jquery 10 kali lebih lambat. 26mil vs 2.4mil
Claudiu Creanga

1
Tautan yang diperbarui dengan benar untuk JSPerf adalah: jsperf.com/getelementbyid-vs-jquery-id Dalam kasus saya (FF 58) 1000 kali lebih lambat. Bagaimanapun, jQuery masih melakukan 2,5 juta ops per detik. Secara umum itu bukan masalah, dan tentu saja tidak bisa dibandingkan dalam hal fungsi.
Diego Jancic

Jawaban:


1017

Tidak persis!!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

Di jQuery, untuk mendapatkan hasil yang sama dengan document.getElementById, Anda dapat mengakses Objek jQuery dan mendapatkan elemen pertama di objek (Ingat objek JavaScript bertindak mirip dengan array asosiatif).

var contents = $('#contents')[0]; //returns a HTML DOM Object

24
Bagi siapa pun yang tertarik document.getElementBytidak bekerja dengan benar di <IE8. Itu juga mendapat elemen oleh namekarena itu Anda secara teoritis bisa berdebat document.getElementByIdtidak hanya menyesatkan, tetapi dapat mengembalikan nilai yang salah. Saya pikir @John baru ini, tapi saya pikir tidak ada salahnya untuk menambahkannya.
Lime

14
Berhati-hatilah jika pengenal Anda tidak diperbaiki. $('#'+id)[0]tidak sama dengan document.getElementById(id)karena iddapat berisi karakter yang diperlakukan khusus di jQuery!
Jakob

1
Ini sangat membantu - tidak pernah tahu ini! Saya yakin saya benar-benar menggunakannya sebelumnya, yang membuat saya bingung. Hei, kamu belajar sesuatu setiap hari! Terima kasih!
jedd.ahyoung

3
google jquery equivalent of document.getelementbyiddan hasil pertama adalah posting ini. Terima kasih!!!
ajakblackgoat

$('#contents')[0].idmengembalikan nama id.
Omar

139

Tidak.

Memanggil document.getElementById('id')akan mengembalikan objek DOM mentah.

Memanggil $('#id')akan mengembalikan objek jQuery yang membungkus objek DOM dan menyediakan metode jQuery.

Dengan demikian, Anda hanya dapat memanggil metode jQuery seperti css()atau animate()pada $()panggilan.

Anda juga bisa menulis $(document.getElementById('id')), yang akan mengembalikan objek jQuery dan setara dengan $('#id').

Anda bisa mendapatkan objek DOM yang mendasarinya dari objek jQuery dengan menulis $('#id')[0].


4
Apakah Anda mengetahui yang mana yang lebih cepat - $ (document.getElementById ('element')) vs $ ('# element')?
Ivan Ivković

10
@ IvanIvković: Yang pertama lebih cepat, karena tidak melibatkan penguraian string.
SLaks

1
@ SLaks Apa perbedaan utama antara objek DOM mentah dan objek jQuery? Hanya dengan menggunakan objek jQuery kita memiliki kemampuan untuk menerapkan metode jQuery?
Roxy'Pro

@ Roxy'Pro: Mereka benda yang berbeda. objek jQuery membungkus objek DOM. Lihat dokumentasi.
SLaks

Dokumen JavaScript DOM Objects ini vs jQuery Objects terlihat bermanfaat. In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.
user3454439

31

Tutup, tapi tidak sama. Mereka mendapatkan elemen yang sama, tetapi versi jQuery dibungkus dengan objek jQuery.

Setara dengan ini

var contents = $('#contents').get(0);

atau ini

var contents = $('#contents')[0];

Ini akan menarik elemen keluar dari objek jQuery.


29

Catatan tentang perbedaan kecepatan. Lampirkan snipet berikut ke panggilan onclick:

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById('myID');
            $('#myID')[0];
        }


    console.log('timer: ' + (new Date() - timer));
}

Bergantian mengomentari salah satu dan kemudian mengomentari yang lain. Dalam tes saya,

document.getElementbyId rata-rata sekitar 35 ms (berfluktuasi dari 25msatas ke 52mssekitar 15 runs)

Di sisi lain,

jQuery rata-rata sekitar 200 ms (mulai dari 181mshingga 222mssekitar 15 runs).

Dari tes sederhana ini Anda dapat melihat bahwa jQuery memakan waktu sekitar 6 kali lebih lama.

Tentu saja, itu lebih dari 10000iterasi sehingga dalam situasi yang lebih sederhana saya mungkin akan menggunakan jQuery untuk kemudahan penggunaan dan semua hal keren lainnya seperti .animatedan .fadeTo. Tapi ya, secara teknis getElementByIdsedikit lebih cepat .


Terima kasih atas jawaban ini. Saya ingin bertanya, haruskah saya mengganti semua $('#someID') dengan document.getElementById("someID") ? Saya sedang mengerjakan sesuatu yang telah saya gunakan secara luas $('#someID')dan halaman saya berjalan lambat untuk input file besar. Tolong sarankan saya apa yang harus saya pindah.
Mazhar MIK

Jika Anda menggunakan kembali yang sama beberapa kali dalam cakupan yang sama, kemudian simpan, sukai var $myId = $('#myId');dan gunakan kembali variabel yang disimpan $myId. Menemukan id biasanya cukup cepat, jadi jika halamannya lamban, mungkin ada alasan lain.
nurdyguy

Terima kasih @nurdyguy. Itu sangat membantu. Saya akan mencoba mengimplementasikannya.
Mazhar MIK

17

Tidak. Yang pertama mengembalikan elemen DOM, atau null, sedangkan yang kedua selalu mengembalikan objek jQuery. Objek jQuery akan kosong jika tidak ada elemen dengan id contentsyang cocok.

Elemen DOM yang dikembalikan oleh document.getElementById('contents')memungkinkan Anda untuk melakukan hal-hal seperti mengubah .innerHTML(atau .value) dll, namun Anda harus menggunakan metode jQuery pada Obyek jQuery.

var contents = $('#contents').get(0);

Lebih equivilent, namun jika tidak ada elemen dengan id contentsyang cocok, document.getElementById('contents')akan mengembalikan nol, tetapi $('#contents').get(0)akan kembali tidak terdefinisi.

Satu manfaat menggunakan objek jQuery adalah Anda tidak akan mendapatkan kesalahan jika tidak ada elemen yang dikembalikan, karena objek selalu dikembalikan. Namun Anda akan mendapatkan kesalahan jika Anda mencoba melakukan operasi pada yang nulldikembalikan olehdocument.getElementById


15

Tidak, sebenarnya hasil yang sama adalah:

$('#contents')[0] 

jQuery tidak tahu berapa banyak hasil yang akan dikembalikan dari permintaan. Apa yang Anda dapatkan kembali adalah objek jQuery khusus yang merupakan kumpulan dari semua kontrol yang cocok dengan kueri.

Bagian dari apa yang membuat jQuery begitu mudah adalah bahwa metode PALING memanggil objek ini yang terlihat seperti dimaksudkan untuk satu kontrol, sebenarnya dalam satu lingkaran yang dipanggil pada semua anggota dalam koleksi

Saat Anda menggunakan sintaks [0], Anda mengambil elemen pertama dari koleksi dalam. Pada titik ini Anda mendapatkan objek DOM


10

Jika ada orang lain yang memukul ini ... Inilah perbedaan lain:

Jika id berisi karakter yang tidak didukung oleh standar HTML (lihat pertanyaan SO di sini ) maka jQuery mungkin tidak menemukannya bahkan jika getElementById melakukannya.

Ini terjadi pada saya dengan id yang berisi karakter "/" (mis: id = "a / b / c"), menggunakan Chrome:

var contents = document.getElementById('a/b/c');

dapat menemukan elemen saya tetapi:

var contents = $('#a/b/c');

tidak.

Btw, perbaikan sederhana adalah memindahkan id itu ke bidang nama. JQuery tidak kesulitan menemukan elemen menggunakan:

var contents = $('.myclass[name='a/b/c']);

5

Seperti kebanyakan orang katakan, perbedaan utama adalah fakta bahwa ia dibungkus dalam objek jQuery dengan panggilan jQuery vs objek DOM mentah menggunakan JavaScript lurus. Objek jQuery akan dapat melakukan fungsi jQuery lain dengan itu tentu saja tetapi, jika Anda hanya perlu melakukan manipulasi DOM sederhana seperti gaya dasar atau penanganan acara dasar, metode JavaScript lurus selalu sedikit lebih cepat daripada jQuery karena Anda tidak t harus memuat di perpustakaan eksternal kode yang dibangun di JavaScript. Ini menyimpan langkah ekstra.


5

var contents = document.getElementById('contents');

var contents = $('#contents');

Cuplikan kode tidak sama. pertama mengembalikan Elementobjek ( sumber ). Yang kedua, setara jQuery akan mengembalikan objek jQuery yang berisi kumpulan elemen DOM nol atau satu. ( dokumentasi jQuery ). Secara internal jQuery menggunakan document.getElementById()efisiensi.

Dalam kedua kasus jika lebih dari satu elemen ditemukan hanya elemen pertama yang akan dikembalikan.


Saat memeriksa proyek github untuk jQuery, saya menemukan cuplikan baris berikut yang tampaknya menggunakan kode document.getElementById ( https://github.com/jquery/jquery/blob/master/src/core/init.js baris 68 dan seterusnya)

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );

4

Satu perbedaan lain: getElementByIdmengembalikan kecocokan pertama , sementara $('#...')mengembalikan koleksi kecocokan - ya, ID yang sama dapat diulang dalam dokumen HTML.

Selanjutnya, getElementIddipanggil dari dokumen, sementara $('#...')dapat dipanggil dari pemilih. Jadi, dalam kode di bawah ini, document.getElementById('content')akan mengembalikan seluruh tubuh tetapi $('form #content')[0]akan kembali ke dalam formulir.

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

Mungkin aneh menggunakan duplikat ID, tetapi jika Anda menggunakan sesuatu seperti Wordpress, templat atau plugin mungkin menggunakan id yang sama seperti yang Anda gunakan dalam konten. Selektivitas jQuery dapat membantu Anda di luar sana.


2

jQuery dibangun di atas JavaScript. Ini berarti bahwa itu hanya javascript saja.

document.getElementById ()

Metode document.getElementById () mengembalikan elemen yang memiliki atribut ID dengan nilai yang ditentukan dan Pengembalian nol jika tidak ada elemen dengan ID yang ditentukan. ID harus unik dalam halaman.

Jquery $ ()

Memanggil jQuery () atau $ () dengan pemilih id karena argumennya akan mengembalikan objek jQuery yang berisi kumpulan elemen DOM nol atau satu. Setiap nilai id harus digunakan hanya sekali dalam dokumen. Jika lebih dari satu elemen telah diberikan ID yang sama, kueri yang menggunakan ID itu hanya akan memilih elemen yang cocok pertama di DOM.


1

Saya mengembangkan basis data noSQL untuk menyimpan pohon DOM di Browser Web di mana referensi ke semua elemen DOM pada halaman disimpan dalam indeks singkat. Dengan demikian fungsi "getElementById ()" tidak diperlukan untuk mendapatkan / memodifikasi elemen. Ketika elemen-elemen dalam pohon DOM dipakai pada halaman database memberikan pengganti kunci utama untuk setiap elemen. Ini adalah alat gratis http://js2dx.com


1

Semua jawaban di atas benar. Jika Anda ingin melihatnya beraksi, jangan lupa Anda memiliki Konsol di peramban tempat Anda dapat melihat hasil sebenarnya sebening kristal:

Saya punya HTML:

<div id="contents"></div>

Pergi ke konsol (cntrl+shift+c)dan gunakan perintah ini untuk melihat hasil Anda dengan jelas

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

Seperti yang dapat kita lihat, dalam kasus pertama kita mendapatkan tag itu sendiri (yaitu, sebenarnya, objek HTMLDivElement). Dalam yang terakhir kita sebenarnya tidak memiliki objek polos, tetapi berbagai objek. Dan seperti yang disebutkan oleh jawaban lain di atas, Anda dapat menggunakan perintah berikut:

$('#contents')[0]
>>> div#contents

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.