Metode QuerySelector dan QuerySelectorAll didefinisikan dalam spesifikasi API selektor W3C. Fungsinya adalah dengan mudah menemukan elemen -elemen tertentu dalam dokumen sesuai dengan spesifikasi pemilih CSS.
Saat ini, mereka didukung oleh hampir peramban utama. Termasuk IE8 (inklusif) dan versi di atas, Firefox, Chrome, Safari, Opera.
QuerySelector dan QuerySelectorAll menentukan antarmuka berikut dalam spesifikasi:
Modul Dom {[Tambahan, NoInterfaceObject] Antarmuka NodeSelector {Element QuerySelector (di DomString Selectors); Nodelist queryselectorall (dalam selektor domstring); }; Dokumen mengimplementasikan nodeselector; DocumentFragment mengimplementasikan nodeelector; Elemen mengimplementasikan nodeselector; };Dari definisi antarmuka, Anda dapat melihat dokumen itu, DocumentFragment, dan Element semuanya mengimplementasikan antarmuka nodeselector. Artinya, ketiga jenis elemen ini memiliki dua metode. Parameter QuerySelector dan QuerySelectorall harus menjadi string yang sesuai dengan pemilih CSS. Perbedaannya adalah bahwa QuerySelector mengembalikan objek, dan QuerySelectorall mengembalikan koleksi (nodelist).
Dapatkan elemen yang Halaman yang saya Atribut D adalah tes:
1 document.geteLementById ("test"); 2 document.queryselector ("#test"); 3 document.queryselectorall ("#test") [0];Dapatkan elemen dengan atribut kelas halaman "merah":
document.geteLementsbycasname ('red') document.QuerySelector ('. Red') document.QuerySelectorAll ('. Red') Document.QuerySelectorAll ('. Red')PS:
Tetapi perlu dicatat bahwa elemen-elemen dalam koleksi nodelist yang dikembalikan adalah non-hidup. Jika Anda ingin membedakan antara apa yang merupakan hasil pengembalian waktu-nyata real-time, silakan lihat contoh berikut:
<Div ID = "Container"> <div> </div> <div> </div> </div>
// Pertama pilih elemen dengan ID Container di halaman dengan container = document.geteLementById ('#container'); console.log (container.childnodes.length) // Hasilnya adalah 2 // kemudian tambahkan elemen anak ke dalam container contader. console.log (container.childnodes.length) // hasilnya adalah 3Melalui contoh di atas, kita dapat memahami elemen apa yang akan diperbarui secara real time. Document.getElementById Mengembalikan hasil real-time. Setelah menambahkan elemen anak ke dalamnya, jumlah semua elemen anak diperoleh lagi, dan yang asli 2 telah diperbarui menjadi 3 (tidak mempertimbangkan bahwa beberapa browser seperti Chrome juga akan menguraikan kosong ke dalam simpul anak).
Perbedaan antara elemen.QuerySelector dan Element.QuerySelectorAll dan JQuery (Element) .find (Selector) Selectors:
<Span style = "font-size: 15px"> <divid = "test1"> <ahref = "// www.vevb.com/">wulin.com </a> </div> <pid =" bar "> 111 </p> <script> var d1 = document.getelementById ('test1'), obj1 = d1 = document.geteLementById ('test1'), obj1 = d1 = Document.getElementById ('test1'), OBJ1 = D1. d1.queryselectorall ('div a'); obj3 = $ (d1) .find ('div a'); console.log (obj1) // <a href = "// www.vevb.com/">wulin.com </a> console.log (obj2.length) // 1 console.log (obj3) // null </script> </span>QuerySelectorall menemukan semua node yang memenuhi deskripsi pemilih dalam dokumen, termasuk elemen itu sendiri
jQuery (elemen) .find (selector) Temukan semua node yang memenuhi deskripsi seleksi dalam dokumen dan tidak menyertakan elemen itu sendiri
Analisis komprehensif di atas dari JavaScript Advanced Selector QuerySelector dan QuerySelectorall 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.