Es gibt drei allgemeine Möglichkeiten, Elemente zu erhalten, nämlich, nämlich, nämlich den Namen durch Element -ID, den Namen durch Tag und Namen durch die Klasse.
GetelementById
DOM stellt eine Methode namens GetElementById bereit, die ein Knotenobjekt mit dem entsprechenden ID -Attribut zurückgibt. Bitte seien Sie vorsichtig, wenn Sie bei der Verwendung von Fall sensibel sein.
Es ist eine für das Dokumentobjekt einzigartige Funktion und kann nur durch sie aufgerufen werden. Die verwendeten Methoden sind wie folgt:
Die Codekopie lautet wie folgt:
document.getElementById ('Demo') // Demo ist die ID, die dem Element entspricht
Diese Methode ist mit Mainstream -Browsern kompatibel, auch einschließlich IE6+, und kann kühn verwendet werden.
GetElementsByTagName
Diese Methode gibt ein Array von Objekten zurück (um genau zu sein, htmlcollection -Sammlung, es ist kein echtes Array), jedes Objekt entspricht einem Element mit einem bestimmten Tag im Dokument. Ähnlich wie bei GetelementByID liefert diese Methode nur einen Parameter, und sein Parameter ist der Name des angegebenen Tags. Der Beispielcode lautet wie folgt:
Die Codekopie lautet wie folgt:
document.getElementsByTagName ('li') // li ist der Name des Tags
Es ist zu beachten, dass diese Methode auch von gewöhnlichen Elementen aufgerufen werden kann. Beispiele sind wie folgt:
Die Codekopie lautet wie folgt:
var Demo = document.getElementById ('Demo');
var lis = Demo.GetElementsByTagName ('li');
In ähnlicher Weise ist diese Methode mit Mainstream -Browsern kompatibel, auch einschließlich IE6+, und kann mutig verwendet werden.
GetElements ByclassName
Zusätzlich zum Erhalten von Elementen durch Angabe von Tags bietet das DOM auch die GetElements -By -ClassName -Methode, um das Element mit dem angegebenen Klassennamen zu erhalten. Da diese Methode jedoch relativ neu ist, unterstützen ältere Browser sie nicht wie IE6. Wir können jedoch die Mängel alter Browser durch Hack ausgleichen. Die Methode heißt wie folgt:
Die Codekopie lautet wie folgt:
document.getElements byclassName ('Demo') // Der von der Demo angegebene Klassenname ist
Wie GetElementsByTagName kann diese Methode von gewöhnlichen Elementen aufgerufen werden und von Dokumentobjekten aufgerufen werden.
Für ältere Browser wie IE6 und 7 können wir sie durch den folgenden Hack implementieren:
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;
}
}
expandieren
Wenn Sie nicht nur mit den oben genannten Elementauswahlmethoden zufrieden sind, möchten Sie Elemente über Selektoren wie JQuery erhalten, und die Implementierungsmethode ähnelt dem oben genannten GetElements -ByClassName. Wenn Sie interessiert sind, können Sie eine Reihe von Selektoren implementieren. Ich denke jedoch, dass die oben genannten drei Methoden in Kombination mit Ereignisblasen genug sind, schließlich sind diese drei Leistungen ausgezeichnet.
Das obige ist der gesamte Inhalt dieses Artikels, und ich hoffe, dass es für alle hilfreich sein wird.