Méthode pour trouver tous les nœuds avec test de classe dans les compétences page_javascript

Avant-propos

Alibaba, les stagiaires web front-end passent des examens en ligne. En effet, en tant que débutant, je ferais mieux de reconstituer mes connaissances d’abord. Baidu Google a donc recherché les questions du test écrit initial pour le recrutement scolaire précédent d'Alibaba et a senti que j'étais vraiment méprisé et que je ne pouvais pas le comprendre du tout. Ah, le front-end Web d'Alibaba est un test écrit en ligne, cela nous donne-t-il l'opportunité de Baidu et de Google ?

Quand j'ai vu cette question, j'ai senti que je devais encapsuler certaines de vos méthodes couramment utilisées, tout comme jquery. Créer des méthodes pour assurer la compatibilité des navigateurs ou des outils sera en effet bénéfique pour le développement futur.

HTML

Pour faciliter l'explication, nous écrivons d'abord HTML

Copier le code Le code est la suivante :

trouve-moi

trouve-moi aussi

🎜>

Nous avons omis le CSS. Notre objectif n'est pas de savoir comment écrire le style CSS. Ce que nous voulons, c'est utiliser javascript pour trouver la collection de nœuds via le nom du style.

Méthode implémentée

1 getElementsByClassName

Copier le code Le code est le suivant :

console.log(document.getElementsByClassName("A"));
console.log(document.getElementsByClassName("A B")); apparaître (firefox 27.0)

En effet, je pense que cette méthode devrait pouvoir résoudre le problème ci-dessus, mais après avoir regardé sa compatibilité, je pense que je devrais trouver une autre méthode.



2 querySelectorAll




Copier le code

Le code est tel suit : console.log(document.querySelectorAll (".A")); console.log(document.querySelectorAll (".B,.A"));

Voyons quel est le résultat ? Quelle est la différence avec ce qui précède ?

Le deuxième résultat est différent. Il s'avère que s'il y a deux paramètres querySelectorAll, ils doivent être séparés par des virgules. En fait, cela signifie qu'il y a un style ou. Style B. Tous les nœuds peuvent être assortis.

En fait, la compatibilité de cette méthode n'est pas très bonne



Basé sur les problèmes de compatibilité ci-dessus (après tout, dans le navigateur chinois ie6/7/ 8 représente toujours la plupart d'entre eux), autant créer une méthode pour l'implémenter moi-même.

3 queryNodesByClass
Je pense que je devrais d'abord parler de mon idée

(1) Obtenez d'abord chaque nœud de la page entière
(2) Parcourez chaque nœud, Obtenez sa chaîne className
(3) Pour utiliser la chaîne className, divisez-la d'abord en un tableau avec des espaces, puis utilisez un objet pour définir sa clé sur chaque élément du tableau, puis la valeur correspondante est vraie
(4 )Le problème est maintenant de le convertir en un tableau en fonction des paramètres que vous avez transmis (par exemple, un paramètre est "sélecteur", deux paramètres sont "sélecteur_1 sélecteur_2", et ainsi de suite), et chaque élément du tableau est utilisé comme avant. . La valeur clé de l'objet correspondant à la chaîne du nœud className. Si elle correspond, elle est vraie. Sinon, elle n'est pas définie.

Maintenant nous donnons notre code




Copiez le code

Le code est le suivant : function StringToObj(string){ var arr = string.split(" ").sort(); var result = {}

for(var i=arr.length-1; arr [i];i--){

result[arr[i]] = true;
}
retour du résultat
}

Copier le code

Le code est le suivant : function StringToArray(string){ var arr = string.split( " "). sort(); var result = [];

for(var i=arr.length-1;arr[i];i--){

result.push(arr[ i]);
}
résultat de retour
}

Copier le code

Le code est le suivant :

function queryNodesByClass(classname){
//Idea (1)
var all = document.getElementsByTagName("*"),len = all.length,result = []; var cname = StringToArray(classname);//Idea (4)
for(var i=0;i//Le correspondant is Idea (3) est le rôle de la méthode StringToObj
var dom_cname = StringToObj(all[i].className),cname_len = cname.length
for(var j=0;jif(!dom_cname[cname[j]])
break;
}
if(j == cname_len)
{
result.push(all[i]) ;
}}
retour du résultat
}