Préface
Alibaba, les stagiaires en fronts Web vont passer l'examen en ligne. En effet, je voudrais ajouter des connaissances à la recrue. Donc, Baidu et Google avaient les précédentes questions de test écrit frontal pour le recrutement du campus d'Alibaba, et ont estimé qu'ils étaient vraiment méprisés et ne pouvaient pas les comprendre du tout. Ah, le Front-end de Ribaba est un test écrit en ligne.
Quand j'ai vu cette question, je sentais que je devrais en effet encapsuler certaines de vos méthodes couramment utilisées, tout comme jQuery. Certaines méthodes sont conçues pour obtenir une compatibilité des navigateurs ou des classes d'outils, qui sont en effet bénéfiques pour le développement futur.
Html
Par souci d'explication, écrivons d'abord HTML
La copie de code est la suivante:
<p> Trouvez-moi </p>
<div> me trouve aussi </div>
Nous avons omis CSS.
Méthodes de mise en œuvre
1 GetElementsByClassName
La copie de code est la suivante:
console.log (document.getElementsByClassName ("A"));
console.log (document.getElementsByClassName ("AB"));
Les résultats apparaissent (Firefox 27.0)
En effet, je pense que cette méthode devrait être en mesure de résoudre le problème ci-dessus, mais après avoir examiné sa compatibilité, je pense qu'il devrait être préférable de trouver une autre méthode.
2 queySelectorall
La copie de code est la suivante:
console.log (document.QuerySelectorAll (".a"));
console.log (document.QuerySelectorAll (".b, .a"));
Voyons quel est le résultat? Quelle est la différence par rapport à ce qui précède?
Le résultat du second est différent.
En fait, la compatibilité de cette méthode n'est pas très bonne
Sur la base des problèmes de compatibilité ci-dessus (après tout, je représente toujours la majorité du navigateur chinois IE6 / 7/8), je pourrais aussi bien faire un moyen d'y parvenir moi-même.
3 querynodesbyclass
Je pense que je devrais d'abord parler de mes idées
(1) Obtenez d'abord la page entière
(2) itérer dans chaque nœud et obtenir sa chaîne de nom de classe
(3) Faites fonctionner la chaîne de nom de classe, divisez-la d'abord en un tableau avec des espaces, puis utilisez un objet pour définir sa clé sur chaque élément de tableau, puis la valeur correspondante est vraie
(4) Le problème est maintenant basé sur les paramètres que vous avez transmis (par exemple, un paramètre est "sélecteur", deux sont "Selector_1 Selector_2", et ainsi de suite), puis le convertir en un tableau, et chaque élément de tableau est Utilisé comme précédemment, la valeur de clé de l'objet correspondant à la chaîne ClassName dans notre nœud avant, si elle correspond, c'est vrai, et si ce n'est pas le cas, il n'est pas défini.
Maintenant, nous donnons notre code
La copie de code est la suivante:
fonction stringtoobj (string) {
var arr = string.split ("") .sort ();
var result = {};
for (var i = arr.length-1; arr [i]; i -) {
résultat [arr [i]] = true;
}
Résultat de retour;
}
La copie de code est la suivante:
fonction 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;
}
La copie de code est la suivante:
fonction queryNodesByClass (className) {
// Réflexions (1)
var all = document.getElementsByTagName ("*"), len = all.length, result = [];
var cname = stringToArray (className); // pensées (4)
pour (var i = 0; i <len; i ++) {// transférer les idées correspondantes de chaque nœud (2)
// Le correspondant est l'idée (3), c'est-à-dire le rôle de la méthode stringtoobj
var dom_cname = stringtoobj (all [i] .classname), cname_len = cname.length;
pour (var j = 0; j <cname_len; j ++) {
if (! dom_cname [cname [j]])
casser;
}
if (j == cname_len)
{
result.push (all [i]);
}}
Résultat de retour;
}