Ao desenvolver uma página da web, em muitos casos, precisamos operar elementos com o mesmo nome de classe, ou seja, elementos com a mesma classe. Fiz o teste por escrito ontem e não respondi a uma pergunta relacionada:
JavaScript recebe o nó com o teste de classe na página
Por isso, colecionei algumas informações relevantes e listei dois métodos que acho que são melhores. As deficiências também são necessárias. Espero que todos os criticem e os corrigem. Se você tiver uma maneira melhor, espero que você possa compartilhá -lo.
Solução1 Solução Jeremy Keuth
Tio Jeremy Keuth falou sobre o método GetELEMENTSBYCLASS na terceira e quarta seção do livro "JavaScript Dom Programming Art" (2ª edição) (inglês: DOM Script Web Design com Javascript e o modelo de objeto de documentos, e falei sobre como aplicar esse método em que não apoiem essa propriedade (ie6. Trechos estão aqui e existem modificações em alguns lugares.
Um novo método foi adicionado ao HTML5 DOM para nos permitir acessar elementos através do nome da classe no atributo de classe, que é: getSbyclassName. Como o método é relativamente novo, algumas implementações de DOM ainda não o possuem, portanto, tenha cuidado ao usá -lo. Vamos primeiro dar uma olhada no que esse método pode nos ajudar e depois discutir como usar esse método de maneira confiável.
Semelhante ao método GetElmentsByTagName, o getElementsByclassName também aceita apenas um parâmetro, que é o nome da classe:
A cópia do código é a seguinte:
getElementsbyclassName (classe)
O valor de retorno desse método também é semelhante ao getElementsByTagName, ambos são uma variedade de elementos com o mesmo nome de classe. A seguinte linha de código retorna uma matriz que contém todos os elementos do nome da classe "Sale":
A cópia do código é a seguinte:
Document.getElementsByClassName ("Sale")
Use este método para encontrar elementos com vários nomes de classe. Para especificar vários nomes de classe, basta separar os nomes da classe com espaços nos parâmetros da string. Por exemplo, adicione a seguinte linha de código à tag <Script>:
A cópia do código é a seguinte:
alert (document.getElementsbyclassName ("venda importante"). comprimento);
Código completo
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Lista de compras </title>
</head>
<Body>
<H1> O que comprar </h1>
<p> Não se esqueça de comprar essas coisas. </p>
<ul id = "compra">
<li> Uma magra de feijão </li>
<li> queijo </li>
<li> Milk </li>
</ul>
<Cript>
alert (document.getElementsbyclassName ("venda importante"). comprimento);
</script>
</body>
</html>
Você verá um 1 na caixa de aviso, indicando que apenas um elemento corresponde, porque apenas um elemento possui os nomes de classe "importantes" e "vendas". Observe que, mesmo no atributo de classe de um elemento, a ordem dos nomes de classe é "venda importante" em vez da "venda importante" especificada no parâmetro, ele ainda corresponderá ao elemento. Não apenas a ordem real dos nomes de classes não importa, mas também não importa se os elementos têm mais nomes de classe. Como usar o getElmentsByTagName, você também pode usar o getElementsBlassName e o GetElementById em combinação. Se você quiser saber quantos nomes de classe contêm itens de lista de testes em um elemento com compra de identificação, você pode encontrar esse objeto específico primeiro e depois ligar para getElementsbyclassName:
A cópia do código é a seguinte:
var shopping = document.getElementById ("compra");
var vendas = shopping.getElementsByClassName ("venda");
Dessa forma, a matriz de vendas contém apenas elementos com a classe "vendas" localizada na lista "Compra". Execute a seguinte linha de código e você verá que a matriz de vendas contém dois itens:
A cópia do código é a seguinte:
alerta (sales.length);
Esse método getSbyclassName é muito útil, mas apenas os navegadores mais novos (Safari 3.1, Chorme, Firefox 3 e Opera 9.5 ou acima) o apóiam. Para compensar essa falha, os programadores de scripts da DOM precisam usar os métodos DOM existentes para implementar seu próprio getSbyclassName, que é um pouco como um presente de maioridade. Na maioria dos casos, seu processo de implementação é aproximadamente semelhante ao seguinte getElementsBlassName, que pode ser aplicado a navegadores novos e antigos.
A cópia do código é a seguinte:
function getElementsbyclassName (nó, classe) {
if (node.getElementsByClassName) {
Return Node.getElementsByClassName (ClassName);
}outro{
var resulta = [];
var elems = node.getElementsByTagName ("*");
for (var i = 0; i <elems.length; i ++) {
if (elems [i] .className.indexOf (classeName)! =-1) {
Resultados [Results.Length] = elems [i];
}
}
RETORNO DE RECURSOS;
}
}
A função getElementsByClassName aceita dois parâmetros. O primeiro nó representa o ponto de partida da pesquisa na árvore Dom, e o segundo nome de classe é o nome da classe a ser pesquisado. Se a função GetElementsByClassName apropriada já existir no nó recebido, essa nova função retornará diretamente a lista de nós correspondente. Se a função GetElementsByClassName não existir, a nova função passará por todas as tags e procurará elementos com o nome da classe correspondente.
A desvantagem desse método é que ele não se aplica a vários nomes de classe.
Se você usar esta função para simular a operação anterior de obter a lista de compras, poderá escrever assim:
A cópia do código é a seguinte:
var shopping = document.getElementById ("compra");
var vendas = shopping.getElementsByClassName (compras, "teste");
console.log (vendas);
Portanto, para resolver o problema no início do artigo, o código usado é o seguinte:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Lista de compras </title>
</head>
<Body>
<H1> O que comprar </h1>
<p> Não se esqueça de comprar essas coisas. </p>
<ul id = "compra">
<li> Uma magra de feijão </li>
<li> queijo </li>
<li> Milk </li>
</ul>
<Cript>
function getElementsbyclassName (nó, classe) {
if (node.getElementsByClassName) {
Return Node.getElementsByClassName (ClassName);
}outro{
var resulta = [];
var elems = node.getElementsByTagName ("*");
for (var i = 0; i <elems.length; i ++) {
if (elems [i] .className.indexOf (classeName)! =-1) {
Resultados [Results.Length] = elems [i];
}
}
RETORNO DE RECURSOS;
}
}
var corpo = document.getElementsByTagName ("corpo") [0];
var vendas = getElementsByClassName (Body, "Sales");
console.log (vendas);
</script>
</body>
</html>
Solução2 Robert Nyman Solução
Existem muitas maneiras de procurar elementos DOM correspondentes, mas não são realmente eficientes. Uma desvantagem do método do tio Jeremy Keuth é que ele não pode ser usado para vários nomes de classe. Em 2008, Robert Nyman forneceu sua própria solução no artigo The Ultimate GetelementsByClassName, Anno 2008. Em 2005, o tio Robert já havia dado sua função GetElementsBlassName. Em 2008, ele modificou algum código e adicionou muitas novas funções:
1. Se o navegador atual suportar a função GetELEMENTSBYCLASSNAME, a função nativa será chamada;
2. Se o navegador atual suportar, use XPath; // xiaofeiyu: uma maneira poderosa de localizar documentos XML construídos no navegador, mas o suporte do navegador não é unificado
3. Suporta a busca de vários nomes de classe, independentemente da ordem;
4. Retorna a matriz de nó real, não uma lista de nodelas nativas. // xiaofeiyu: O método getselementsBlassName nativo retorna um objeto Nodelist, que é muito semelhante a uma matriz, com propriedades de comprimento e número de índices, mas não é uma matriz, e você não pode usar métodos exclusivos para estourar e empurrar etc. no código fornecido pelo Robert, o objeto nodelista é convertido em uma matriz. Métodos em que os objetos Nodelist podem ser convertidos em matrizes:
A cópia do código é a seguinte:
mylist = array.prototype.slice.call (mynodelist)
Este é o método do tio Robert. Não entendo algumas das coisas que ainda tenho que entender. Vou atualizá -lo depois de estudá -los.
A cópia do código é a seguinte:
/*
Desenvolvido por Robert Nyman, http://www.robertnyman.com
Code/Licensing: http://code.google.com/p/getElementsbyclassname/
*/
var getElementsByClassName = function (className, tag, Elm) {
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, Elm) {
Elm = Elm || documento;
var elements = elm.getElementsbyclassName (ClassName),
nodename = (tag)? novo regexp ("// b" + tag + "// b", "i"): null,
returnElements = [],
Atual;
for (var i = 0, il = elements.length; i <il; i+= 1) {
atual = elementos [i];
if (! nodename || nodename.test (current.nodename)) {
returnElements.push (atual);
}
}
retornar retornarlements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, Elm) {
tag = tag || "*";
Elm = Elm || documento;
var classes = ClassName.split (""),
Classestocheck = "",
xhtmlnamespace = "http://www.w3.org/1999/xhtml",
NamespaceResolver = (document.documentElement.namespaceuri === xhtmlNamespace)? xhtmlNamespace: null,
returnElements = [],
elementos,
nó;
for (var j = 0, jl = classes.length; j <jl; j+= 1) {
Classestocheck + = "[contém (concat ('', @class, ''), '" + classes [j] + "')]";
}
tentar {
elementos = document.Evaluate (".//" + tag + classiStocheck, elm, namespaceresolver, 0, null);
}
Catch (e) {
elementos = document.Evaluate (".//" + tag + classiStocheck, elm, null, 0, null);
}
while ((node = elements.iterateNext ())) {
returnElements.push (nó);
}
retornar retornarlements;
};
}
outro {
getElementsByClassName = function (className, tag, Elm) {
tag = tag || "*";
Elm = Elm || documento;
var classes = ClassName.split (""),
Classestocheck = [],
elementos = (tag === "*" && elm.all)? ElM.All: Elm.getElementsByTagName (TAG),
Atual,
returnElements = [],
corresponder;
for (var k = 0, kl = classes.length; k <kl; k+= 1) {
Classestocheck.push (novo regexp ("(^| // s)" + classes [k] + "(// s | $)"));
}
for (var l = 0, ll = elementos.length; l <ll; l+= 1) {
atual = elementos [l];
Match = false;
for (var m = 0, ml = classeSTocheck.length; m <ml; m+= 1) {
Match = Classestocheck [M] .Test (Current.ClassName);
if (! Match) {
quebrar;
}
}
if (correspondência) {
returnElements.push (atual);
}
}
retornar retornarlements;
};
}
retornar getElementsByClassName (ClassName, TAG, ELM);
};