Javascript querySelector vs. getElementById [ditutup]

122

Saya telah mendengar bahwa querySelector& querySelectorAlladalah metode baru untuk memilih DOMelemen. Bagaimana cara membandingkannya dengan metode lama, getElementById& getElementsByClassNamedalam hal kinerja dan dukungan browser?

Bagaimana kinerja dibandingkan dengan menggunakan pemilih kueri jQuery?

Apakah ada rekomendasi praktik terbaik untuk kumpulan asli yang akan digunakan?

javascript jquery dom

— goesToEleven
sumber

Definisikan dengan lebih baik. Mereka hampir sepenuhnya berbeda.

Ini seperti bertanya "apakah kunci pas ukuran tunggal lebih baik daripada kunci pas yang bisa disesuaikan?" Jawabannya adalah: mereka lebih kuat dan lebih fleksibel, dan pada banyak kesempatan lebih unggul, tetapi getElementByIddan getElementsByClassNamemasih ideal untuk tujuan yang dijelaskan oleh namanya.

— lonesomeday

Oh, dan qS/qSAdapat digunakan dari konteks elemen apa pun, tetapi gEBIhanya dapat digunakan dari documentkonteks tersebut.

getElementByIdcocok dengan idatribut untuk menemukan simpul DOM, sementara querySelectorpencarian oleh pemilih. Jadi untuk pemilih misalnya tidak valid <div id="1"></div>, getElementById('1')akan bekerja sementara querySelector('#1')akan gagal, kecuali Anda kirim untuk mencocokkan idatribut (misalnya querySelector('[id="1"]').

— Samuel ELH

Hanya FYI bagi siapa saja yang membaca ini, tapi querySelectordan querySelectorAlldidukung penuh sekarang. caniuse.com/#feat=queryselector

— Telarian

Jawaban:

132

"Lebih baik" itu subjektif.

querySelector adalah fitur yang lebih baru.

getElementByIdlebih baik didukung daripada querySelector.

querySelectorlebih baik didukung daripada getElementsByClassName.

querySelectormemungkinkan Anda menemukan elemen dengan aturan yang tidak dapat diekspresikan dengan getElementByIddangetElementsByClassName

Anda perlu memilih alat yang sesuai untuk tugas apa pun.

(Di atas, untuk querySelectordibaca querySelector/ querySelectorAll).

— Quentin
sumber

dukungan querySelector: caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden - Sepertinya tidak signifikan, mungkin berbeda dari browser ke browser.

— Quentin

Jawaban yang sangat bagus dan berikut adalah beberapa tes benchmark

— angel.bonev

mengapa lebih baik didukung agar: getElementById> querySelector> getElementsByClassName, karena saya pikir getElementsByClassNameharus memiliki tingkat dukungan yang sama seperti getElementById?

— Lei Yang

Jawaban ini tampaknya tidak menyentuh perbedaan antara kedua metode tersebut, khususnya dalam hal kinerja.

— Dror Bar

Fungsi getElementByIddan getElementsByClassNamesangat spesifik, sementara querySelectordan querySelectorAlllebih rumit. Dugaan saya adalah bahwa mereka sebenarnya akan memiliki kinerja yang lebih buruk.

Selain itu, Anda perlu memeriksa dukungan dari setiap fungsi di browser yang Anda targetkan. Semakin baru, semakin tinggi kemungkinan kurangnya dukungan atau fungsinya menjadi "buggy".

— Thiago Negri
sumber

@ Thomas link Anda sedang down. Apakah ada tautan yang berfungsi di mana saja?

— pengguna5508297

Ada beberapa versi yang diarsipkan: web.archive.org/web/20160108040024/http://jsperf.com/… Tetapi pengujian ini sebenarnya sangat lama (2010), jadi hasilnya mungkin sangat berbeda dengan mesin yang lebih modern.

— Thomas

Halaman yang diarsipkan sebenarnya dinamis dan memungkinkan Anda untuk menjalankan kembali pengujian di browser Anda saat ini. querySelectorAll masih lebih lambat dengan dilaporkan sekitar 37% di browser saya. (Chrome 71 - vgy.me/TwGL3o.png ) Perlu juga dicatat bahwa getElementById mengembalikan hasil langsung, artinya jika Anda mengubah DOM, perubahan akan tercermin oleh hasil yang diperoleh oleh getElementByID (jika dalam cakupan) sedangkan nodelist dikembalikan oleh querySelectorAll adalah sebuah snapshot, misalnya seperti saat panggilan dilakukan, hasilnya tidak akan mencerminkan perubahan selanjutnya pada DOM.

— W. Prins

nodelist ... is not livebisakah Anda memberikan dokumentasi untuk itu? @ W.Prins kedua metode mengembalikan Elementtipe.

— Maximilian Burszley

Ah, saya melihat saya salah ketik, terimalah permintaan maaf saya! Saya seharusnya menulis "getElementsByClassName" di mana saya menulis "getElementByID", misalnya getElementsByClassName (dan sejenisnya) yang mengembalikan hasil langsung ". Memang baik getElementsByClassName dan querySelectorAll mengembalikan NodeList, tetapi dalam kasus sebelumnya itu langsung, dan yang terakhir itu snapshot.

— W.Prins