Common GetElementById, GetElementsByName, GetElementsByTagName. Aber Ausländer waren mit diesen APIs nicht zufrieden, so dass sie GetElements by ClassName erstellten, und später erschien ein JQuery -Selektor nach und nach, und nur die ursprüngliche JS -Auswahl wird hier erwähnt.
1.GetElementById
Dies ist der am häufigsten verwendete Selektor und wird durch ID positioniert:
Beispiel:
var test = document.getElementById ("Test"). Wert; // Erhalten Sie den Wert des Elements mit ID -Test im Dokument und weisen Sie den Wert der Testgesichtsänderung zu
2.GetElementsByName
Beispiel:
var test = document.getElementByName ("test"); // den Knoten des Elements erhalten, dessen Name im Dokument testet wird und es der Testvariable zuweisen.
3.GetElementsByTagName
Beispiel:
var test = document.getElementsByTagName ("Test"); // den Knoten des Elements im Dokument mit Klassentest abrufen und zu diesem Zeitpunkt zuweisen. , 7, 8 nicht verfügbar
4. GetElements ByClassName
Dieser Selektor kann nicht in der JS -API gefunden werden, wenn Sie sie verwenden möchten, müssen Sie die Methode selbst definieren. Finden Sie es mit regelmäßigen Ausdrücken Die passenden Elemente werden in einem Array zurückgegeben. Es gibt viele Programmierer im Internet, die diesen Selektor implementieren, und die folgenden Beispiele sind zwei Beispiele:
(1) Die ultimative GetElements -By -Classname -Lösung, die von Robert Nyman verfasst wurde, wurde 2005 umgesetzt. Es ist zu sehen, dass viele Dinge von Ausländern vor langer Zeit sehr weit gegangen sind.
Die Codekopie lautet wie folgt:
// Die drei Parameter sind alle erforderlich.
// IE6 ist 4610 ~ 6109 Millisekunden, ff3.5 beträgt 46 ~ 48 Millisekunden, Opera10 beträgt 31 ~ 32 Millisekunden, Chrom beträgt 23 ~ 26 Millisekunden,
// Safari4 ist 19 ~ 20 Millisekunden
Funktion getElements byclassName (oelm, strtagname, strclassName) {
var arrelements = (strtagname == "*" && oelm.all)?
oelm.getElementsByTagName (Strtagname);
var arrReturnelements = new Array ();
strcassName = strclassName.replace (//-/g, "//-");
var oregexp = new Regexp ("(^| // s)" + strcassname + "(// s | $)");
var oelement;
für (var i = 0; i <arrelements.length; i ++) {
oelement = Arrelements [i];
if (oregexp.test (oelement.className)) {
arreturnelements.push (oelement);
}
}
Rückgabe (ArrReturnelements)
}
(2) Bereitstellung von Dustin Diaz (Autor von "JavaScript -Design -Mustern", aber die Kompatibilität ist nicht so gut wie oben und unterstützt IE5 nicht.
Die Codekopie lautet wie folgt:
// Die letzten beiden Parameter sind zuverlässig.
//Ff3.5 ist 42 ~ 48 ms, Opera10 ist 31 ms, Chrom ist 22 ~ 25 ms, Safari4 ist 18 ~ 19 ms
var getElementsByclass = Funktion (SearchClass, Knoten, Tag) {
var classelements = new Array ();
if (node == null)
node = document;
if (tag == null)
Tag = '*';
var els = node.getElementsByTagName (Tag);
var elslen = elsgth;
var muster = new regexp ("(^| // s)"+SearchClass+"(// s | $)");
für (i = 0, j = 0; i <elslen; i ++) {
if (muster.test (els [i] .className)) {
Klasse [j] = els [i];
J ++;
}
}
Return Classels;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------------
Hinweis: Dies kann den Knoten des aktuellen Elements darstellen.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------------
Hier sind einige häufig verwendete Methoden zur Verwendung von Wissenspunkten wie Ereignissen:
Die Codekopie lautet wie folgt:
// Senden Sie ein Formular mit ID -Test ein
document.getElementById ("test"). subled ();
// Setzen Sie den Rand mit ID als Testelement auf 2 Pixel, fest, rot
document.getElementById ("test"). style.border = "2px solide rot";
// Bewegen oder bewegen Sie das Element mit dem ID -Test, um seine Hintergrundfarbe zu ändern
Funktionstest () {
document.getElementById ("test"). onmouseover = function () {document.getElementById ("test2"). style.backgroundcolor = "rot"};
document.getElementById ("test"). onmouseout = function () {document.getElementById ("test2"). style.backgroundcolor = "blau"};
}
// Die Anzahl der Elemente im Popup-Dokument mit Namenstest
Funktionstest ()
{
var test = document.getElementsByName ("test");
alert (test.length);
}