Untuk JS, saya pikir semua orang yang baru harus mengeluh: mengapa tidak ada cara untuk mendapatkan elemen melalui kelas. Meskipun versi browser yang lebih tinggi sekarang mendukung fungsi GetElementsByClassName (), masih tidak sesuai untuk versi browser yang lebih rendah. Saat meninggalkan perpustakaan lain, Anda masih harus merangkum metode sendiri.
Metode 1
fungsi getByClass1 (induk, cls) {var res = []; // array yang menyimpan hasil pencocokan var ele = parent.geteLementsByTagname ('*'); untuk (var i = 0; i <ele.length; i ++) {if (ele [i] .className == cls) {res.push (ele [i]); }} return res;}Tentu saja, ketika hanya ada satu nilai di kelas, metode di atas baik -baik saja, tetapi ketika ada beberapa nilai, masalah akan muncul.
<div> </div> <ver> </div> <script> getByclass1 (dokumen, 'tes'); // Dapatkan div </ptript> pertama
Metode 2
Ketika masalah muncul, kami akan mencoba untuk meningkatkan. Untuk nama multi-kelas, kita dapat menggunakan pencocokan reguler untuk melihat apakah nama kelas disertakan, sehingga metode penulisan berikut muncul:
fungsi getByClass2 (induk, cls) {var res = []; var reg = regexp baru ('// b' + cls + '// b', 'i'); // Cocokkan CLS adalah kata independen var ele = parent.geteLementsByTagname ('*'); untuk (var i = 0; i <ele.length; i ++) {if (reg.test (ele [i] .className)) {res.push (ele [i]); }} return res;}Metode ini tampaknya baik -baik saja dan memecahkan masalah getByClass1 (). Saya sudah lama menggunakannya, tetapi masih ada bug tersembunyi. Lihat contoh berikut:
<div> </div> <div> </div> <verv> </div> <script> getByclass2 (dokumen, 'tes'); // Hasilnya adalah div pertama dan div ketiga </script>
Secara teori, kita seharusnya hanya mendapatkan yang pertama, tetapi berbeda dari apa yang kita harapkan. Bug ini berasal dari /b dalam kode berikut
var reg = regexp baru ('// b' + cls + '// b', 'i');Pertama -tama mari kita lihat arti /b secara teratur
/B adalah kode khusus yang ditentukan oleh ekspresi reguler, mewakili awal atau akhir dari sebuah kata, yaitu batas kata.
Sederhananya: /b adalah mencocokkan kata (dari perbatasan kiri ke perbatasan kanan).
Masalahnya ada di sini. /B Salam semua karakter lain kecuali huruf, angka, dan garis bawah sebagai batas. Sebagai contoh di atas, nilai kelas ketiga adalah kotak tes. Ketika /B cocok, tanda hubung (-) dianggap sebagai batas kata, sehingga juga cocok dengan div ketiga.
Metode 3
Oleh karena itu, kita perlu melakukan perbaikan lebih lanjut ke metode di atas. Di sini kami merujuk pada metode yang disebutkan di StackOverflow:
Bagaimana cara mendapatkan elemen demi kelas di javascript?
Kode yang ditingkatkan adalah sebagai berikut:
fungsi getByClass3 (induk, cls) {var res = []; var reg = regexp baru ('' + cls + '', 'i'); // Saat mencocokkan CLS, perlu ada spasi di kedua sisi var ele = parent.getElementsbyTagname ('*'); untuk (var i = 0; i <ele.length; i ++) {if (reg.test ('' + ele [i] .className + '')) {res.push (ele [i]); }} return res;}Metode ini meninggalkan penggunaan /B dan menggunakan ruang untuk mencocokkan batas. Pertama tambahkan spasi ke kedua sisi dari nilai ClassName yang diperoleh, yang memastikan bahwa akan ada spasi di kedua sisi setiap nilai di ClassName, dan kemudian gunakan reguler agar cocok.
Belum ada masalah yang ditemukan menggunakan metode ini, tetapi ketika menggunakannya, ruang dalam kutipan tunggal dalam metode tidak boleh dijatuhkan.
Metode 4
fungsi getByClass3 (induk, cls) {var res = []; var reg = regexp baru ('(^| // s)' + cls + '($ | // s)', 'i'); var ele = parent.geteLementsbyTagname ('*'); untuk (var i = 0; i <ele.length; i ++) {if (reg.test (ele [i] .className)) {res.push (ele [i]); }} return res;}Ruang sepenuhnya ditangani dengan keteraturan, yang menghilangkan masalah ruang mudah jatuh dan kodenya lebih indah dan sederhana.
Jadi, apakah metode ini relatif sempurna? Faktanya, tidak. Mari kita lihat solusi yang lebih baik.
Metode 5 (Edisi Perfect)
Seperti yang disebutkan di awal artikel, versi browser yang lebih tinggi sudah mendukung metode GetElementsByClassName (). Untuk alasan kinerja, pasti lebih baik menggunakan metode asli untuk browser yang didukung. Untuk versi browser yang lebih rendah, gunakan metode empat di atas.
function getByClass (Parent, cls) {if (parent.geteLementsByClassName) {return parent.getElementsbyclassName (cls); } else {var res = []; var reg = regexp baru ('' + cls + '', 'i') var ele = parent.geteLementsbyTagname ('*'); untuk (var i = 0; i <ele.length; i ++) {if (reg.test ('' + ele [i] .className + '')) {res.push (ele [i]); }} return res; }}Tentu saja, Metode 5 dianggap sebagai solusi yang relatif baik. Jika ada metode yang lebih baik, silakan tinggalkan pesan untuk menambahkannya.