Dikutip dari panduan JavaScript otoritatif (cara utama jQuery untuk menemukan elemen berdasarkan gaya pemilih adalah dengan terlebih dahulu menggunakan GetElementsByTagname (*) untuk mendapatkan semua elemen DOM, dan kemudian memfilter semua elemen DOM menurut Style Selector)
Hari ini saya mencoba kecepatan berbagai metode pemilihan elemen. Metode asli sekitar 8 kali lebih cepat dari jQuery. IE8 adalah yang paling lambat, IE9 sekitar 3 kali lebih cepat dari IE8, Chrome melakukan yang terbaik, diikuti oleh Firefox)
Metode untuk memilih elemen dokumen:
1. Pilih Elemen dengan ID (GetElementByID)
1) Metode Penggunaan: Document.GetElementById ("Domid")
di mana domid adalah nilai atribut ID dari elemen yang akan dipilih
2) Kompatibilitas: IE browser dengan versi yang lebih rendah dari IE8 tidak membedakan kasus nomor ID elemen dan akan mengembalikan elemen yang cocok dengan atribut nama.
2. Pilih Elemen dengan Nama (GetElementsByName)
1) Metode Penggunaan: Document.getElementsByName ("DomName")
di mana domname adalah nilai atribut nama elemen yang akan dipilih
2) Deskripsi: a. Nilai pengembalian adalah koleksi nodelist (berbeda dari array)
B. Berbeda dengan atribut ID, atribut nama hanya valid dalam beberapa elemen DOM (bentuk formulir, elemen bentuk, iframe, img). Ini karena atribut nama dibuat untuk memfasilitasi pengiriman data formulir.
C. Saat mengatur atribut nama untuk formulir, img, iframe, applet, embed, elemen objek, atribut yang dinamai sesuai nama nilai atribut nama akan secara otomatis dibuat dalam objek dokumen. Oleh karena itu, objek DOM yang sesuai dapat direferensikan melalui Document.domname
3) Kompatibilitas: Elemen yang cocok dengan nilai atribut ID di IE juga akan kembali bersama
3. Pilih Elemen dengan Nama Tag (GetElementsByTagname)
1) Metode Penggunaan: Element.GetElementsByTagname ("TagName")
Di mana, elemen adalah elemen DOM yang valid (termasuk dokumen)
Tagname adalah nama tag elemen DOM
2) Deskripsi: a. Nilai pengembalian adalah koleksi nodelist (berbeda dari array)
B. Metode ini hanya dapat memilih elemen keturunan elemen yang memanggil metode tersebut.
C. Tagname tidak sensitif
D. Saat tagname adalah *, itu berarti bahwa semua elemen dipilih (bertanggung jawab untuk b. Aturan)
e. HTMLDocument mendefinisikan beberapa properti pintasan untuk mengakses node tag. Sebagai contoh: gambar, formulir, dan tautan atribut dokumen menunjuk ke koleksi elemen tag <MGRE>, <Form>, dan <a>, sementara dokumen dan dokumen.
4. Pilih elemen melalui kelas CSS (GetElementsByClassName)
1) Metode Penggunaan: Element.GetElementsByClassName ("ClassNames")
Di mana, elemen adalah elemen DOM yang valid (termasuk dokumen)
ClassNames adalah kombinasi dari nama kelas CSS (beberapa nama kelas dipisahkan oleh spasi, yang dapat dipisahkan oleh beberapa ruang).
Misalnya, element.getElementsbyclassName ("class2 class1") akan memilih elemen dalam elemen keturunan elemen yang memiliki gaya Class1 dan Class2 diterapkan (nama gaya tidak membedakan antara pesanan)
2) Deskripsi: a. Nilai pengembalian adalah koleksi nodelist (berbeda dari array)
B. Metode ini hanya dapat memilih elemen keturunan elemen yang memanggil metode tersebut.
3) Kompatibilitas: IE8 dan di bawah browser tidak mengimplementasikan metode GetElementsByClassName
5. Pilih elemen melalui pemilih CSS
1) Metode Penggunaan: Document.QuerySelectorAll ("Selector")
Dimana, pemilih adalah pemilih CSS legal
2) Deskripsi: a. Nilai pengembalian adalah koleksi nodelist (berbeda dari array)
3) Kompatibilitas: IE8 dan di bawah browser hanya mendukung sintaks selektor standar CSS2
Metode sederhana memilih elemen DOM di JS adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.