Vorwort
Alibaba, die Web-Front-End-Praktikanten werden die Online-Prüfung ablegen. In der Tat möchte ich dem Anfänger etwas Wissen hinzufügen. Daher hatten Baidu und Google die vorherigen Front-End-Testfragen für die Rekrutierung von Alibaba von Alibaba und hatten das Gefühl, dass sie wirklich verachtet wurden und sie überhaupt nicht verstehen konnten. Ah, Ribabas Web-Front-End ist ein schriftlicher Online-Test.
Als ich diese Frage sah, hatte ich das Gefühl, dass ich tatsächlich einige Ihrer häufig verwendeten Methoden zusammenfassen sollte, genau wie JQuery. Einige Methoden werden vorgenommen, um Browserkompatibilität oder Werkzeugklassen zu erreichen, die in der Tat für die zukünftige Entwicklung von Vorteil sind.
Html
Um die Erklärung willen, schreiben wir zuerst HTML auf
Die Codekopie lautet wie folgt:
<p> finde mich </p>
<Div> finde mich auch </div>
Wir haben CSS weggelassen.
Implementierungsmethoden
1 GetElements ByClassName
Die Codekopie lautet wie folgt:
console.log (document.getElementsByClassName ("a"));
console.log (document.getElementsByClassName ("ab"));
Ergebnisse erscheinen (Firefox 27.0)
In der Tat denke ich, dass diese Methode in der Lage sein sollte, das obige Problem zu lösen, aber nachdem ich ihre Kompatibilität angesehen habe, sollte es meiner Meinung nach besser sein, eine andere Methode zu finden.
2 QuerySelectorall
Die Codekopie lautet wie folgt:
console.log (document.querySelectorAll (".a"));
console.log (document.querySelectorAll (".b, .a"));
Mal sehen, was das Ergebnis ist? Was ist der Unterschied zu den oben genannten?
Das Ergebnis des zweiten ist anders.
Tatsächlich ist die Kompatibilität dieser Methode nicht sehr gut
Basierend auf den oben genannten Kompatibilitätsproblemen (schließlich berücksichtige ich immer noch die Mehrheit des chinesischen Browsers, IE6/7/8), könnte ich genauso gut einen Weg tun, um es selbst zu erreichen.
3 QuernodesbyClass
Ich denke, ich sollte zuerst über meine Ideen sprechen
(1) Holen Sie sich zuerst die gesamte Seite
(2) Durch jeden Knoten iterieren und seine Klassenname -Zeichenfolge erhalten
(3) Betreiben Sie die Klassenname -Zeichenfolge, teilen Sie sie zuerst in ein Array mit Leerzeichen auf und verwenden Sie dann ein Objekt, um seine Taste auf jedes Array -Element festzulegen, und dann ist der entsprechende Wert wahr
(4) Das Problem basiert nun auf den Parametern, die Sie übergeben haben (z. B. ein Parameter ist "Selektor", zwei sind "selector_1 selector_2" und so weiter) und umwandeln es dann in ein Array, und jedes Array -Element ist Der Schlüsselwert des Objekts, das der Klassenname -Zeichenfolge in unserem Knoten zuvor entspricht, ist, wenn es übereinstimmt, und wenn dies nicht der Fall ist, ist es nicht definiert.
Jetzt geben wir unseren Code
Die Codekopie lautet wie folgt:
Funktion StringToobj (String) {
var arr = string.split ("") .sort ();
var result = {};
für (var i = arr.length-1; arr [i]; i-) {
Ergebnis [arr [i]] = true;
}
Rückgabeergebnis;
}
Die Codekopie lautet wie folgt:
Funktion StringToArray (String) {
var arr = string.split ("") .sort ();
var result = [];
für (var i = arr.length-1; arr [i]; i-) {
result.push (arr [i]);
}
Rückgabeergebnis;
}
Die Codekopie lautet wie folgt:
Funktion querynodesbyClass (className) {
// Gedanken (1)
var alle = document.getElementsByTagName ("*"), len = All.length, result = [];
var cname = stringToArray (className); // Gedanken (4)
für (var i = 0; i <len; i ++) {// Übertragen Sie die entsprechenden Ideen jedes Knotens (2)
// Die entsprechende ist die Idee (3), dh die Rolle der StringToobj -Methode
var dom_cname = stringToobj (alle [i] .className), cname_len = cname.length;
für (var j = 0; j <cname_len; j ++) {
if (! dom_cname [cname [j]])
brechen;
}
if (j == cname_len)
{
result.push (alle [i]);
}}
Rückgabeergebnis;
}