Pour JS, je pense que tous ceux qui y sont nouveaux devraient se plaindre: pourquoi il n'y a aucun moyen d'obtenir des éléments en classe. Bien que les versions plus élevées des navigateurs prennent désormais en charge la fonction GetElementsByClassName (), il est toujours incompatible pour les versions inférieures des navigateurs. Lorsque vous quittez d'autres bibliothèques, vous devez toujours encapsuler une méthode vous-même.
Méthode 1
Fonction GetByClass1 (parent, cls) {var res = []; // Array qui stocke les résultats correspondants var ele = parent.getElementsByTagName ('*'); for (var i = 0; i <ele.length; i ++) {if (ele [i] .classname == cls) {res.push (ele [i]); }} return res;}Bien sûr, lorsqu'il n'y a qu'une seule valeur dans la classe, la méthode ci-dessus est très bien, mais lorsqu'il y a plusieurs valeurs, des problèmes surviendront.
<div> </div> <div> </div> <script> getByClass1 (document, 'test'); // Obtenez uniquement le premier div </cript>
Méthode 2
Lorsque des problèmes surviennent, nous essaierons de nous améliorer. Pour les noms multi-classes, nous pouvons utiliser une correspondance régulière pour voir si le nom de classe est inclus, donc la méthode d'écriture suivante apparaît:
Fonction GetByClass2 (parent, cls) {var res = []; var reg = new regexp ('// b' + cls + '// b', 'i'); // correspond à CLS est un mot indépendant var ele = parent.getElementsByTagName ('*'); for (var i = 0; i <ele.length; i ++) {if (reg.test (ele [i] .classname)) {res.push (ele [i]); }} return res;}Cette méthode semble être OK et résolu le problème de GetByClass1 (). Je l'ai utilisé depuis longtemps, mais il y a toujours un bug caché. Voir l'exemple suivant:
<div> </div> <div> </div> <div> </div> <script> getByClass2 (document, 'test'); // Le résultat est le premier div et le troisième div </cript>
En théorie, nous ne devons obtenir le premier, mais il est différent de ce à quoi nous nous attendions. Ce bug provient de / b dans le code suivant
var reg = new regexp ('// b' + cls + '// b', 'i');Regardons d'abord la signification de / b dans le régulier
/ B est un code spécial spécifié par une expression régulière, représentant le début ou la fin d'un mot, c'est-à-dire la limite d'un mot.
Pour le dire simplement: / b, c'est faire correspondre un mot (de la bordure de gauche à la bordure droite).
Le problème réside ici. / B considère tous les autres caractères à l'exception des lettres, des chiffres et des soulignements comme limites. Pour l'exemple ci-dessus, la valeur de troisième classe est la boîte de test. Quand / b correspond, le trait d'union (-) est considéré comme le mot limite, il correspond donc également à la troisième div.
Méthode 3
Par conséquent, nous devons apporter de nouvelles améliorations à la méthode ci-dessus. Ici, nous nous référons à une méthode mentionnée sur stackOverflow:
Comment obtenir un élément par classe en javascript?
Le code amélioré est le suivant:
Fonction GetByClass3 (parent, cls) {var res = []; var reg = new regexp ('' + cls + '', 'i'); // En correspondant CLS, il doit y avoir des espaces des deux côtés var ele = parent.getElementsByTagName ('*'); pour (var i = 0; i <ele.length; i ++) {if (reg.test ('' + ele [i] .classname + '')) {res.push (ele [i]); }} return res;}Cette méthode abandonne l'utilisation de / b et utilise des espaces pour correspondre aux limites. Ajoutez d'abord des espaces aux deux côtés de la valeur de nom de classe obtenue, qui garantit qu'il y aura des espaces des deux côtés de chaque valeur dans ClassName, puis utilisez régulièrement pour correspondre.
Aucun problème n'a encore été trouvé en utilisant cette méthode, mais lors de l'utilisation, les espaces en citations uniques dans la méthode ne doivent pas être supprimés.
Méthode 4
Fonction GetByClass3 (parent, cls) {var res = []; var reg = new regexp ('(^ | // s)' + cls + '($ | // s)', 'i'); var ele = parent.getElementsByTagName ('*'); for (var i = 0; i <ele.length; i ++) {if (reg.test (ele [i] .classname)) {res.push (ele [i]); }} return res;}Les espaces sont complètement manipulés avec régularité, ce qui élimine le problème de la chute des espaces faciles et le code est plus beau et simple.
Cette méthode est-elle donc relativement parfaite? En fait, ce n'est pas le cas. Jetons un coup d'œil à une meilleure solution.
Méthode 5 (édition parfaite)
Comme mentionné au début de l'article, des versions supérieures des navigateurs prennent déjà en charge la méthode GetElementsByClassName (). Pour des raisons de performance, il est forcément mieux d'utiliser des méthodes natives pour les navigateurs pris en charge. Pour les versions inférieures des navigateurs, utilisez la méthode ci-dessus quatre.
function getByClass (parent, cls) {if (parent.getElementsByClassName) {return parent.getElementsByClassName (CLS); } else {var res = []; var reg = new regexp ('' + cls + '', 'i') var ele = parent.getElementsByTagName ('*'); pour (var i = 0; i <ele.length; i ++) {if (reg.test ('' + ele [i] .classname + '')) {res.push (ele [i]); }} return res; }}Bien sûr, la méthode 5 est considérée comme une solution relativement bonne. S'il existe une meilleure méthode, veuillez laisser un message pour l'ajouter.