Zusammenfassung gängiger Methoden zum Abrufen von Elementen in JavaScript_Javascript-Kenntnissen

Es gibt drei gängige Möglichkeiten, Elemente zu erhalten, nämlich über die Element-ID, über den Tag-Namen und über den Klassennamen.

getElementById

DOM stellt eine Methode namens getElementById bereit, die ein Knotenobjekt zurückgibt, das dem id-Attribut entspricht. Bitte achten Sie bei der Verwendung auf die Groß-/Kleinschreibung.

Es handelt sich um eine Funktion, die nur für das Dokumentobjekt gilt und diese Methode nur über dieses aufgerufen werden kann. Die Verwendungsmethode ist wie folgt:

Code kopieren Der Code lautet wie folgt:

document.getElementById('demo') //demo ist die ID, die dem Element entspricht

Diese Methode ist mit gängigen Browsern, sogar IE6, kompatibel und kann problemlos verwendet werden.

getElementsByTagName

Diese Methode gibt ein Array von Objekten zurück (HTMLCollection um genau zu sein, es ist kein Array im eigentlichen Sinne), wobei jedes Objekt einem Element mit einem bestimmten Tag im Dokument entspricht. Ähnlich wie getElementById stellt diese Methode nur einen Parameter bereit und sein Parameter ist der Name des angegebenen Tags. Der Beispielcode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

document.getElementsByTagname('li') //li ist der Name des Tags

Es ist zu beachten, dass diese Methode nicht nur vom Dokumentobjekt, sondern auch von gewöhnlichen Elementen aufgerufen werden kann. Ein Beispiel ist wie folgt:

Code kopieren Der Code lautet wie folgt:

var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');

In ähnlicher Weise ist diese Methode mit gängigen Browsern, sogar IE6, kompatibel und kann problemlos verwendet werden.

getElementsByClassName

Zusätzlich zum Abrufen von Elementen durch Angabe von Tags bietet DOM auch die Methode getElementsByClassName zum Abrufen von Elementen mit angegebenen Klassennamen. Da diese Methode jedoch relativ neu ist, wird sie von älteren Browsern, wie beispielsweise IE6, noch nicht unterstützt. Wir können jedoch Hacks verwenden, um die Mängel alter Browser auszugleichen. Die Methode wird wie folgt aufgerufen:

Code kopieren Der Code lautet wie folgt:

document.getElementsByClassName('demo') //demo ist der für das Element angegebene Klassenname

Diese Methode kann wie getElementsByTagname auch von gewöhnlichen Elementen zusätzlich zum Dokumentobjekt aufgerufen werden.

Für ältere Browser wie IE6 und 7 können wir den folgenden Hack verwenden:

Code kopieren Der Code lautet wie folgt:

Funktion getElementsByClassName(node,classname){
If(node.getElementsByClassName) {
                return node.getElementsByClassName(classname);
         }sonst {
          var results = [];
              var elems = node.getElementsByTagName("*");
for(var i = 0; i < elems.length; i ){
If(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
                }
            }
             Ergebnisse zurückgeben;
}
}  

Erweitern

Wenn Sie nicht nur mit den oben genannten Elementauswahlmethoden zufrieden sind, sondern auch Elemente über Selektoren wie JQuery erhalten möchten, ähnelt die Implementierungsmethode der oben genannten getElementsByClassName. Wenn Sie interessiert sind, können Sie eine Reihe von Selektoren selbst implementieren . Ich denke jedoch, dass die oben genannten drei Methoden in Kombination mit Event-Bubbling ausreichen. Schließlich gelten diese drei Methoden hinsichtlich der Leistung als ausgezeichnet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er kann für alle hilfreich sein.