Bei der Entwicklung einer Webseite müssen wir in vielen Fällen Elemente mit demselben Klassennamen bedienen, dh Elemente mit derselben Klasse. Ich habe gestern den schriftlichen Test gemacht und habe keine verwandte Frage beantwortet:
JavaScript erhält den Knoten mit Klassentest auf der Seite
Deshalb habe ich einige relevante Informationen gesammelt und zwei Methoden aufgeführt, die ich für besser halte. Die Mängel werden ebenfalls benötigt. Ich hoffe, jeder wird sie kritisieren und korrigieren. Wenn Sie einen besseren Weg haben, hoffe ich, dass Sie es teilen können.
Lösung1 Jeremy Keuth Lösung
Onkel Jeremy Kuth sprach über die Getelements-By-Class-Methode im dritten und vierten Abschnitt des Buches "JavaScript Dom Programming Art" (2. Ausgabe) (Englisch: DOM Scripting-Web-Design mit JavaScript und das Dokumentobjektmodell) und sprach darüber, wie diese Methode in Browser angewendet werden kann, die diese Eigenschaft unterstützen (dh ie6, ie7 und ie7 und ie7 und ie7 und ie7 und ie7 und ie7 und ie7 und ie7 und ie7 und ie7, let sie). Auszüge sind hier, und an einigen Stellen gibt es Modifikationen.
HTML5 DOM wurde eine neue Methode hinzugefügt, damit wir im Klassenattribut über den Klassennamen zugreifen können, nämlich: GetElmentsByClassName. Da die Methode relativ neu ist, haben einige DOM -Implementierungen sie noch nicht. Seien Sie also vorsichtig, wenn Sie sie verwenden. Schauen wir uns zuerst an, was uns diese Methode helfen kann, und diskutieren dann, wie diese Methode zuverlässig verwendet wird.
Ähnlich wie bei der GetElmentByTagName -Methode akzeptiert GetElementsByClassName auch nur einen Parameter, der der Klassenname ist:
Die Codekopie lautet wie folgt:
GetElements ByClassName (Klasse)
Der Rückgabewert dieser Methode ähnelt auch GetElementsByTagName. Beide sind eine Reihe von Elementen mit demselben Klassennamen. Die folgende Codezeile gibt ein Array zurück, das alle Elemente des Klassennamens "Verkauf" enthält:
Die Codekopie lautet wie folgt:
document.getElements byclassName ("sale")
Verwenden Sie diese Methode, um Elemente mit mehreren Klassennamen zu finden. Um mehrere Klassennamen anzugeben, trennen Sie einfach die Klassennamen mit Leerzeichen in den String -Parametern. Fügen Sie beispielsweise die folgende Codezeile zum <Script> -Tag hinzu:
Die Codekopie lautet wie folgt:
alert (document.getElementsByClassName ("Verkauf wichtig"). Länge);
Vollständiger Code
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> Einkaufsliste </title>
</head>
<body>
<h1> Was ist zu kaufen </h1>
<p> Vergiss nicht, dieses Zeug zu kaufen. </p>
<ul id = "kauf">
<li> Ein dünnes Bohnen </li>
<li> Käse </li>
<li> Milch </li>
</ul>
<Script>
alert (document.getElementsByClassName ("Verkauf wichtig"). Länge);
</script>
</body>
</html>
Sie sehen eine 1 im Warnbox, die darauf hinweist, dass nur ein Element übereinstimmt, da nur ein Element sowohl die "wichtigen" als auch "Verkaufs" -Kassennamen enthält. Beachten Sie, dass selbst im Klassenattribut eines Elements die Reihenfolge der Klassennamen eher "Verkauf" und nicht "wichtiger Verkauf" ist, der im Parameter angegeben ist, immer noch mit dem Element übereinstimmt. Die tatsächliche Reihenfolge der Klassennamen spielt nicht nur keine Rolle, es spielt keine Rolle, auch wenn die Elemente mehr Klassennamen haben. Wie die Verwendung von GetElmentsByTagName können Sie auch GetElements ByClassName und GetElementById in Kombination verwenden. Wenn Sie wissen möchten, wie viele Klassennamen Testlistenelemente in einem Element mit ID -Kauf enthalten, finden Sie zuerst dieses spezielle Objekt und rufen Sie GetElements ByClassName:
Die Codekopie lautet wie folgt:
var Shopping = document.getElementById ("Kauf");
var sales = copping.getElementsByClassName ("sale");
Auf diese Weise enthält das Verkaufsarray nur Elemente mit der "Verkaufs" -Kliste in der Liste "Kauf". Führen Sie die folgende Codezeile aus und Sie werden feststellen, dass das Verkaufsarray zwei Elemente enthält:
Die Codekopie lautet wie folgt:
Alert (Sales.Length);
Diese GetelmentByClassName -Methode ist sehr nützlich, aber nur neuere Browser (Safari 3.1, Chorme, Firefox 3 und Opera 9,5 oder höher) unterstützen dies. Um diesen Manko auszugleichen, müssen DOM-Skript-Programmierer vorhandenen DOM-Methoden verwenden, um ihre eigenen GetElements-ByClassName zu implementieren, was ein bisschen wie ein Geschenk des Alters ist. In den meisten Fällen ähnelt ihr Implementierungsprozess in etwa dem folgenden GetElements -By -ClassName, der auf neue und alte Browser angewendet werden kann.
Die Codekopie lautet wie folgt:
Funktion getElements byclassName (Knoten, KlasseName) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}anders{
var Ergebnisse = [];
var elems = node.getElementsByTagName ("*");
für (var i = 0; i <elems.length; i ++) {
if (elems [i] .className.indexof (className)! =-1) {
Ergebnisse [results.length] = Elems [i];
}
}
Rückgabeergebnisse;
}
}
Die Funktion "GetElements ByclassName" akzeptiert zwei Parameter. Der erste Knoten repräsentiert den Suchbegriff im DOM -Baum, und der zweite Klassenname ist der Klassenname, nach dem man gesucht werden soll. Wenn die angemessene Funktion von GetElements -ByClassName bereits auf dem eingehenden Knoten vorhanden ist, gibt diese neue Funktion die entsprechende Knotenliste direkt zurück. Wenn die Funktion von GetElements -By -Classname nicht vorhanden ist, wird die neue Funktion durch alle Tags durchläuft und nach Elementen mit dem entsprechenden Klassennamen sucht.
Der Nachteil dieser Methode ist, dass sie nicht für mehrere Klassennamen gilt.
Wenn Sie diese Funktion verwenden, um den vorherigen Betrieb der Einkaufsliste zu simulieren, können Sie sie so schreiben:
Die Codekopie lautet wie folgt:
var Shopping = document.getElementById ("Kauf");
var sales = copping.getElementsByClassName (Shopping, "Test");
console.log (Verkauf);
Um das Problem zu Beginn des Artikels zu lösen, lautet der verwendete Code wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> Einkaufsliste </title>
</head>
<body>
<h1> Was ist zu kaufen </h1>
<p> Vergiss nicht, dieses Zeug zu kaufen. </p>
<ul id = "kauf">
<li> Ein dünnes Bohnen </li>
<li> Käse </li>
<li> Milch </li>
</ul>
<Script>
Funktion getElements byclassName (Knoten, KlasseName) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}anders{
var Ergebnisse = [];
var elems = node.getElementsByTagName ("*");
für (var i = 0; i <elems.length; i ++) {
if (elems [i] .className.indexof (className)! =-1) {
Ergebnisse [results.length] = Elems [i];
}
}
Rückgabeergebnisse;
}
}
var body = document.getElementsByTagName ("Körper") [0];
var sales = getElements byclassName (Körper, "Vertrieb");
console.log (Verkauf);
</script>
</body>
</html>
Lösung2 Robert Nyman Lösung
Es gibt viele Möglichkeiten, nach passenden DOM -Elementen zu suchen, aber nicht viele sind wirklich effizient. Ein Nachteil der Methode von Onkel Jeremy Keuth ist, dass es nicht für mehrere Klassennamen verwendet werden kann. Im Jahr 2008 stellte Robert Nyman seine eigene Lösung in dem Artikel mit dem ultimativen GetElements -By -Classname, Anno 2008 zur Verfügung. Im Jahr 2005 hatte Onkel Robert bereits seine GetElements -By -ClassName -Funktion gegeben. 2008 modifizierte er einen Code und fügte viele neue Funktionen hinzu:
1. Wenn der aktuelle Browser die GetElements -By -ClassName -Funktion unterstützt, wird die native Funktion aufgerufen.
2. Wenn der aktuelle Browser es unterstützt, verwenden Sie XPath. // Xiaofeiyu: Eine leistungsstarke Möglichkeit, XML -Dokumente zu lokalisieren, die im Browser eingebaut sind, ist jedoch der Browserunterstützung nicht einheitlich
3.. Unterstützt die Suche nach mehreren Klassennamen unabhängig von der Reihenfolge;
4. Gibt das reale Knotenarray zurück, nicht einen nativen Nodelist. // xiaofeiyu: Die native getElements -byClassName -Methode gibt ein Nodelist -Objekt zurück, das einem Array sehr ähnlich ist, mit Längen- und Zahlenindexeigenschaften, aber es ist kein Array, und Sie können keine Methoden verwenden, die für Pop and Push usw. in dem von Robert bereitgestellten Code, das NodeList -Objekt, in ein Array konvertiert wird. Methoden, bei denen Nodelist -Objekte in Arrays umgewandelt werden können:
Die Codekopie lautet wie folgt:
myList = array.prototype.slice.call (mynodelist)
Dies ist die Methode von Onkel Robert. Ich verstehe einige der Dinge nicht, die ich noch nicht verstanden habe. Ich werde es aktualisieren, nachdem ich sie studiert habe.
Die Codekopie lautet wie folgt:
/*
Entwicklung von Robert Nyman, http://www.robertnyman.com
Code/Lizenzierung: http://code.google.com/p/getElementsByclassName/
*/
var getElements byclassName = function (className, tag, elm) {
if (document.getElementsByClassName) {
getElementsByClassName = Funktion (className, Tag, elm) {
ELM = ELM || dokumentieren;
var Elements = Elm.GetElementsByClassName (Klassenname),
nodEname = (tag)? neuer Regexp ("// B" + Tag + "// B", "I"): NULL,
returnElements = [],
Aktuell;
für (var i = 0, il = Elements.length; i <il; i+= 1) {
current = Elemente [i];
if (! nodhename || nodename.test (current.nodename)) {
returnElements.push (Strom);
}
}
Return ReturnElements;
};
}
sonst if (document.Valuate) {
getElementsByClassName = Funktion (className, Tag, elm) {
Tag = Tag || "*";
ELM = ELM || dokumentieren;
var classes = className.split (""),
klassifischstocheck = "",
xhtmlnamespace = "http://www.w3.org/1999/xhtml",
nameSpaceresolver = (document.documentElement XHTMLNAMEPACE: NULL,
returnElements = [],
Elemente,
Knoten;
für (var j = 0, jl = classes.length; j <jl; j+= 1) {{{
classSeToCheck + = "[enthält (concat ('', @class, '')," + classes [j] + "')]";
}
versuchen {
Elements = document.evaluate (".//" + tag + classestocheck, elm, nameSpaceresolver, 0, null);
}
fangen (e) {
elements = document.evaluate (".//" + tag + classEtocheck, elm, null, 0, null);
}
while ((node = elements.IterateNext ())) {
returnElements.push (Knoten);
}
Return ReturnElements;
};
}
anders {
getElementsByClassName = Funktion (className, Tag, elm) {
Tag = Tag || "*";
ELM = ELM || dokumentieren;
var classes = className.split (""),
klassifischstocheck = [],
Elements = (tag === "*" && elmall)? Elm.all: Elm.getElementsByTagName (Tag),
Aktuell,
returnElements = [],
übereinstimmen;
für (var k = 0, kl = classes.length; k <kl; k+= 1) {{
classStocheck.push (neuer regexp ("(^| // s)" + classes [k] + "(// s | $)"));
}
für (var l = 0, ll = Elements.Length; l <ll; l+= 1) {{
Strom = Elemente [l];
Match = false;
für (var m = 0, ml = classStocheck.length; m <ml; m+= 1) {
match = classStocheck [m] .Test (current.className);
if (! Match) {
brechen;
}
}
if (Match) {
returnElements.push (Strom);
}
}
Return ReturnElements;
};
}
return GetElementsByClassName (ClassName, Tag, Elm);
};