Für JS denke ich, dass sich jeder, der neu ist, sich beschweren sollte: Warum es keine Möglichkeit gibt, Elemente durch den Unterricht zu bekommen. Obwohl höhere Versionen von Browsern jetzt die Funktion getElements byclassName () unterstützen, ist sie immer noch für niedrigere Versionen von Browsern nicht kompatibel. Wenn Sie andere Bibliotheken verlassen, müssen Sie immer noch selbst eine Methode zusammenfassen.
Methode 1
Funktion getbyClass1 (übergeordnet, cls) {var res = []; // Array, in dem die entsprechenden Ergebnisse gespeichert sind var ele = parent.getElementsByTagName ('*'); für (var i = 0; i <ele.length; i ++) {if (ele [i] .className == cls) {res.push (ele [i]); }} return res;}Wenn es in der Klasse nur einen Wert gibt, ist die obige Methode natürlich in Ordnung, aber wenn mehrere Werte vorhanden sind, treten Probleme auf.
<div> </div> <div> </div> <script> getbyClass1 (Dokument, 'test'); // Erhalten Sie nur den ersten Div </script>
Methode 2
Wenn Probleme auftreten, werden wir versuchen, sich zu verbessern. Für Multi-Class-Namen können wir reguläre Übereinstimmungen verwenden, um festzustellen, ob der Klassenname enthalten ist. Daher wird die folgende Schreibmethode angezeigt:
Funktion getbyClass2 (übergeordnet, cls) {var res = []; var reg = new regexp ('// b' + cls + '// b', 'i'); // Übereinstimmung CLS ist ein unabhängiges Wort var ele = parent.getElementsByTagName ('*'); für (var i = 0; i <ele.Length; i ++) {if (reg.test (ele [i] .className)) {res.push (ele [i]); }} return res;}Diese Methode scheint in Ordnung zu sein und das Problem von getbyClass1 () zu lösen. Ich habe es schon lange benutzt, aber es gibt immer noch einen versteckten Fehler. Siehe das folgende Beispiel:
<div> </div> <div> </div> <div> </div> <script> getbyClass2 (Dokument, Test '); // Das Ergebnis ist das erste Div und der dritte Div </script>
Theoretisch sollten wir nur den ersten bekommen, aber es unterscheidet sich von dem, was wir erwartet haben. Dieser Fehler stammt aus /b im folgenden Code
var reg = new regexp ('// b' + cls + '// b', 'i');Schauen wir uns zuerst die Bedeutung von /b in der regulären an
/B ist ein spezieller Code, der durch einen regulären Ausdruck angegeben ist, der den Beginn oder Ende eines Wortes darstellt, dh die Grenze eines Wortes.
Einfach gesagt: /b soll ein Wort übereinstimmen (von der linken Rande bis zur rechten Grenze).
Das Problem liegt hier. /B betrachtet alle anderen Zeichen außer Buchstaben, Zahlen und Unterstreichung als Grenzen. Für das obige Beispiel ist der Wert der dritten Klasse die Test-Box. Wenn /b übereinstimmt, wird der Bindestrich (-) als Wortgrenze angesehen, sodass er auch mit der dritten Div übereinstimmt.
Methode 3
Daher müssen wir weitere Verbesserungen der obigen Methode vornehmen. Hier beziehen wir uns auf eine Methode, die auf Stackoverflow erwähnt wird:
Wie bekomme ich Element per Klasse in JavaScript?
Der verbesserte Code lautet wie folgt:
Funktion getbyClass3 (übergeordnet, cls) {var res = []; var reg = neuer regexp ('' + cls + '', 'i'); // Bei der Übereinstimmung von CLS müssen auf beiden Seiten Räume auf beiden Seiten vorhanden sein. für (var i = 0; i <ele.length; i ++) {if (reg.test ('' + ele [i] .className + '')) {res.push (ele [i]); }} return res;}Diese Methode verlässt die Verwendung von /b und verwendet Leerzeichen, um den Grenzen zu entsprechen. Fügen Sie zunächst Räume zu beiden Seiten des erhaltenen Klassennamenwerts hinzu, wodurch sichergestellt wird, dass es auf beiden Seiten jedes Wertes im Klassennamen Räume gibt, und dann regelmäßig übereinstimmen.
Es wurde noch kein Problem mit dieser Methode gefunden, aber bei der Verwendung dürfen die Räume in einzelnen Zitaten in der Methode nicht fallen gelassen werden.
Methode 4
Funktion getbyClass3 (übergeordnet, cls) {var res = []; var reg = new regexp ('(^| // s)' + cls + '($ | // s)', 'i'); var ele = parent.getElementsByTagName ('*'); für (var i = 0; i <ele.Length; i ++) {if (reg.test (ele [i] .className)) {res.push (ele [i]); }} return res;}Die Räume werden regelmäßig vollständig behandelt, wodurch das Problem der einfachen Räume fällt und der Code schöner und einfacher ist.
Ist diese Methode relativ perfekt? Tatsächlich ist es nicht. Schauen wir uns eine bessere Lösung an.
Methode 5 (perfekte Ausgabe)
Wie zu Beginn des Artikels erwähnt, unterstützen höhere Versionen von Browsern bereits die Methode GetElements byclassName (). Aus Leistungsgründen ist es sicher, native Methoden für unterstützte Browser zu verwenden. Verwenden Sie für niedrigere Versionen von Browsern die obige Methode vier.
Funktion getbyClass (übergeordnet, cls) {if (parent.getElementsByClassName) {return parent.getElementsByClassName (cls); } else {var res = []; var reg = new regexp ('' + cls + '', 'i') var ele = parent.getElementsByTagName ('*'); für (var i = 0; i <ele.length; i ++) {if (reg.test ('' + ele [i] .className + '')) {res.push (ele [i]); }} return res; }}Natürlich wird Methode 5 als relativ gute Lösung angesehen. Wenn es eine bessere Methode gibt, hinterlassen Sie bitte eine Nachricht, um sie hinzuzufügen.