document.getElementById vs jQuery $ ()

Apakah ini:

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

Sama seperti ini:

var contents = $('#contents');

Mengingat bahwa jQuery dimuat?

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

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].

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.

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 .

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

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

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']);

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.

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] );

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.

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.

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

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

Semua jawaban sudah tua hari ini pada 2019 Anda dapat langsung mengakses id keyed javascript hanya dengan mencobanya

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

Demo online! - https://codepen.io/frank-dspeed/pen/mdywbre