Para JS, creo que todos los que son nuevos deberían quejarse: por qué no hay forma de obtener elementos a través de la clase. Aunque las versiones más altas de los navegadores ahora admiten la función GetElementsByClassName (), todavía es incompatible para versiones más bajas de los navegadores. Al dejar otras bibliotecas, aún tiene que encapsular un método usted mismo.
Método 1
función getByClass1 (parent, cls) {var res = []; // matriz que almacena resultados coincidentes var ele = parent.getElementsBytagName ('*'); for (var i = 0; i <ele.length; i ++) {if (ele [i] .classname == cls) {res.push (ele [i]); }} return res;}Por supuesto, cuando solo hay un valor en la clase, el método anterior está bien, pero cuando hay múltiples valores, surgirán problemas.
<div> </div> <div> </div> <script> getByClass1 (documento, 'test'); // Obtenga solo el primer div </script>
Método 2
Cuando surjan problemas, intentaremos mejorar. Para los nombres de múltiples clases, podemos usar la coincidencia regular para ver si el nombre de la clase está incluido, por lo que aparece el siguiente método de escritura:
función getByClass2 (parent, cls) {var res = []; var reg = new Regexp ('// b' + cls + '// b', 'i'); // Match CLS es una palabra independiente var ele = parent.getElementsByTagName ('*'); for (var i = 0; i <ele.length; i ++) {if (reg.test (ele [i] .classname)) {res.push (ele [i]); }} return res;}Este método parece estar bien y resolvió el problema de GetByClass1 (). Lo he usado durante mucho tiempo, pero todavía hay un error oculto. Vea el siguiente ejemplo:
<div> </div> <div> </div> <div> </div> <script> getbyclass2 (documento, 'test'); // El resultado es el primer div y el tercer div </script>
En teoría, solo debemos obtener el primero, pero es diferente de lo que esperábamos. Este error se origina de /b en el siguiente código
var reg = new Regexp ('// b' + cls + '// b', 'i');Primero veamos el significado de /b en el regular
/B es un código especial especificado por una expresión regular, que representa el comienzo o el final de una palabra, es decir, el límite de una palabra.
En pocas palabras: /b es coincidir con una palabra (desde el borde izquierdo hasta el borde derecho).
El problema se encuentra aquí. /B considera a todos los demás personajes excepto letras, números y subrayados como límites. Para el ejemplo anterior, el valor de la tercera clase es la caja de prueba. Cuando /B coincide, el guión (-) se considera el límite de la palabra, por lo que también coincide con el tercer div.
Método 3
Por lo tanto, necesitamos hacer más mejoras en el método anterior. Aquí nos referimos a un método mencionado en StackOverflow:
¿Cómo obtener elemento por clase en JavaScript?
El código mejorado es el siguiente:
function getByClass3 (parent, cls) {var res = []; var reg = new Regexp ('' + cls + '', 'i'); // Al coincidir con CLS, debe haber espacios en ambos lados var ele = parent.getElementsBytagName ('*'); for (var i = 0; i <ele.length; i ++) {if (reg.test ('' + ele [i] .classname + '' ')) {res.push (ele [i]); }} return res;}Este método abandona el uso de /b y usa espacios para que coincidan con los límites. Primero agregue espacios a ambos lados del valor de nombre de clase obtenido, lo que asegura que habrá espacios en ambos lados de cada valor en ClassName, y luego use regularmente para que coincida.
Aún no se ha encontrado un problema utilizando este método, pero al usarlo, los espacios en citas individuales en el método no deben ser eliminados.
Método 4
function 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;}Los espacios se manejan por completo con regularidad, lo que elimina el problema de la caída de espacios fáciles y el código es más hermoso y simple.
Entonces, ¿este método es relativamente perfecto? De hecho, no lo es. Echemos un vistazo a una mejor solución.
Método 5 (edición perfecta)
Como se mencionó al comienzo del artículo, las versiones más altas de los navegadores ya admiten el método GetElementsByClassName (). Por razones de rendimiento, es mejor usar métodos nativos para navegadores compatibles. Para versiones más bajas de los navegadores, use el método cuatro anterior.
function getByClass (parent, cls) {if (parent.getElementsByClassName) {return parent.getElementsByClassName (CLS); } else {var res = []; var reg = new Regexp ('' + cls + '', '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; }}Por supuesto, el método 5 se considera una solución relativamente buena. Si hay un método mejor, deje un mensaje para agregarlo.