Para JS, acho que todo mundo que é novo para se queixar: por que não há como obter elementos através da classe. Embora as versões mais altas dos navegadores agora suportem a função GetElementsByClassName (), ela ainda é incompatível para versões mais baixas dos navegadores. Ao deixar outras bibliotecas, você ainda precisa encapsular um método.
Método 1
função getByClass1 (pai, cls) {var res = []; // matriz que armazena resultados correspondentes var ele = parent.getElementsByTagName ('*'); for (var i = 0; i <ele.lenngth; i ++) {if (ele [i] .className == cls) {res.push (ele [i]); }} retornar res;}Obviamente, quando houver apenas um valor na classe, o método acima é bom, mas quando há vários valores, surgirão problemas.
<div> </div> <div> </div> <cript> getByClass1 (documento, 'teste'); // Obtenha apenas o primeiro div </sCript>
Método 2
Quando surgirem problemas, tentaremos melhorar. Para nomes de várias classes, podemos usar a correspondência regular para ver se o nome da classe está incluído, portanto, o método de escrita a seguir aparece:
função getByClass2 (pai, cls) {var res = []; var reg = novo regexp ('// b' + cls + '// b', 'i'); // corresponde cls é uma palavra independente var ele = parent.getElementsByTagName ('*'); for (var i = 0; i <ele.lenngth; i ++) {if (reg.test (ele [i] .className)) {res.push (ele [i]); }} retornar res;}Esse método parece estar bem e resolveu o problema do getByClass1 (). Eu o usei há muito tempo, mas ainda há um bug oculto. Veja o seguinte exemplo:
<div> </div> <div> </div> <div> </div> <cript> getByClass2 (documento, 'teste'); // O resultado é a primeira div e a terceira div </sCript>
Em teoria, devemos obter apenas o primeiro, mas é diferente do que esperávamos. Este bug se origina de /b no código a seguir
var reg = novo regexp ('// b' + cls + '// b', 'i');Vamos primeiro olhar para o significado de /b em regular
/b é um código especial especificado por uma expressão regular, representando o início ou o fim de uma palavra, ou seja, o limite de uma palavra.
Simplificando: /b é para combinar com uma palavra (da borda esquerda até a borda direita).
O problema está aqui. /b considera todos os outros personagens, exceto letras, números e sublinhados como limites. Para o exemplo acima, o valor da terceira classe é a caixa de teste. Quando /B corresponde, o hífen (-) é considerado o limite da palavra, por isso também corresponde à terceira div.
Método 3
Portanto, precisamos fazer melhorias adicionais no método acima. Aqui nos referimos a um método mencionado no Stackoverflow:
Como obter elemento por classe em JavaScript?
O código aprimorado é o seguinte:
função getByClass3 (pai, cls) {var res = []; var reg = novo regexp ('' + cls + '', 'i'); // Ao corresponder ao CLS, é preciso haver espaços em ambos os lados var ele = parent.getElementsByTagName ('*'); for (var i = 0; i <ele.lenngth; i ++) {if (reg.test ('' + ele [i] .className + '' ')) {res.push (ele [i]); }} retornar res;}Este método abandona o uso de /b e usa espaços para corresponder aos limites. Primeiro, adicione espaços aos dois lados do valor de nome da classe obtido, que garante que haja espaços em ambos os lados de cada valor no nome da classe e depois use regularmente para corresponder.
Nenhum problema foi encontrado usando esse método ainda, mas, ao usá -lo, os espaços em citações únicas no método não devem ser descartadas.
Método 4
função getByClass3 (pai, cls) {var res = []; var reg = novo regexp ('(^| // s)' + cls + '($ | // s)', 'i'); var ele = parent.getElementsByTagName ('*'); for (var i = 0; i <ele.lenngth; i ++) {if (reg.test (ele [i] .className)) {res.push (ele [i]); }} retornar res;}Os espaços são completamente tratados com a regularidade, o que elimina o problema dos espaços fáceis que caem e o código é mais bonito e simples.
Então esse método é relativamente perfeito? De fato, não é. Vamos dar uma olhada em uma solução melhor.
Método 5 (edição perfeita)
Conforme mencionado no início do artigo, versões mais altas dos navegadores já suportam o método getElementsByClassName (). Por razões de desempenho, deve ser melhor usar métodos nativos para navegadores suportados. Para versões mais baixas dos navegadores, use o método quatro acima.
function getByClass (pai, cls) {if (parent.getElementsByclassName) {return parent.getElementsByclassName (cls); } else {var res = []; var reg = novo regexp ('' + cls + '', 'i') var ele = parent.getElementsByTagName ('*'); for (var i = 0; i <ele.lenngth; i ++) {if (reg.test ('' + ele [i] .className + '' ')) {res.push (ele [i]); }} retornar res; }}Obviamente, o método 5 é considerado uma solução relativamente boa. Se houver um método melhor, deixe uma mensagem para adicioná -lo.