Prefácio
Alibaba, os estagiários do front-end da Web vão fazer o exame on-line. De fato, gostaria de adicionar algum conhecimento ao novato. Portanto, o Baidu e o Google tiveram as perguntas anteriores de teste escrito do front-end para o recrutamento do campus do Alibaba e sentiram que eram realmente desprezadas e não conseguiram entendê-las. Ah, o front-end da Web de Ribaba é um teste escrito on-line.
Quando vi essa pergunta, senti que de fato deveria encapsular alguns de seus métodos comumente usados, assim como o jQuery. Alguns métodos são feitos para obter classes de compatibilidade ou ferramentas do navegador, que são realmente benéficas para o desenvolvimento futuro.
Html
Por uma questão de explicação, vamos escrever o HTML primeiro
A cópia do código é a seguinte:
<p> Encontre -me </p>
<div> Também me encontre </div>
Nós omitimos o CSS.
Métodos de implementação
1 getElementsbyclassName
A cópia do código é a seguinte:
console.log (document.getElementsByClassName ("A"));
console.log (document.getElementsByClassName ("ab"));
Os resultados aparecem (Firefox 27.0)
De fato, acho que esse método deve ser capaz de resolver o problema acima, mas depois de analisar sua compatibilidade, acho que deveria ser melhor encontrar outro método.
2 QuerySelectorAll
A cópia do código é a seguinte:
console.log (document.QuerySelectorAll (".a"));
console.log (document.QuerySelectorAll (".b, .a"));
Vamos ver qual é o resultado? Qual é a diferença do exposto?
O resultado do segundo é diferente.
Na verdade, a compatibilidade desse método não é muito boa
Com base nos problemas de compatibilidade acima (afinal, ainda respondi pela maioria do navegador chinês IE6/7/8), eu também poderia fazer uma maneira de alcançá -lo.
3 Querynodesbyclass
Eu acho que devo falar sobre minhas idéias primeiro
(1) Pegue a página inteira primeiro
(2) iterar através de cada nó e obtenha sua string de nome de classe
(3) Opere a sequência de nome da classe, primeiro divida -a em uma matriz com espaços e depois use um objeto para definir sua chave para cada elemento da matriz; em seguida, o valor correspondente é verdadeiro
(4) O problema agora é baseado nos parâmetros em que você passou (por exemplo, um parâmetro é "seletor", dois são "Selector_1 Selector_2" e assim por diante) e depois convertem em uma matriz, e cada elemento da matriz é Usado como anteriormente, o valor da chave do objeto correspondente à string de nome da classe em nosso nó antes, se corresponde, é verdadeiro e, se não o fizer, é indefinido.
Agora damos nosso código
A cópia do código é a seguinte:
function stringtoobj (string) {
var arr = string.split ("") .sort ();
var resultado = {};
for (var i = arr.length-1; arr [i]; i-) {
resultado [arr [i]] = true;
}
resultado de retorno;
}
A cópia do código é a seguinte:
function stringtoarray (string) {
var arr = string.split ("") .sort ();
var resultado = [];
for (var i = arr.length-1; arr [i]; i-) {
resultado.push (arr [i]);
}
resultado de retorno;
}
A cópia do código é a seguinte:
função querynodesbyclass (className) {
// pensamentos (1)
var all = document.getElementsByTagName ("*"), len = all.length, resultado = [];
var cname = stringtoarray (classe); // pensamentos (4)
for (var i = 0; i <len; i ++) {// transfira as idéias correspondentes de cada nó (2)
// O correspondente é a idéia (3), ou seja, o papel do método stringtoobj
var dom_cname = stringtoobj (todos [i] .className), cname_len = cname.length;
for (var j = 0; j <cname_len; j ++) {
if (! dom_cname [cname [j]])
quebrar;
}
if (j == cname_len)
{
resultado.push (todos [i]);
}}
resultado de retorno;
}