Javascript-Methode zum Abrufen von Elementen

So erhalten Sie Elemente in JavaScript: 1. Rufen Sie das Knotenobjekt mit dem id-Attribut über getElementById ab. 2. Rufen Sie das Objektarray über getElementsByTagName ab. 3. Rufen Sie das Element mit dem angegebenen Klassennamen über getElementsByClassName ab.

Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

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 kann nur über sie aufgerufen werden. Die verwendete Methode lautet wie folgt:

Der Code lautet wie folgt:

document.getElementById('demo') //demo是元素对应的ID

Diese Methode ist mit Mainstream-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). Jedes Objekt entspricht einem Element mit einem bestimmten Tag im Dokument. Ähnlich wie getElementById stellt diese Methode nur einen Parameter bereit und ihr Parameter ist der Name des angegebenen Tags. Der Beispielcode lautet wie folgt:

document.getElementsByTagname('li')  //li是标签的名字

Es ist zu beachten, dass zusätzlich zum Aufruf Durch das Dokumentobjekt kann diese Methode auch durch das Dokumentobjekt aufgerufen werden. Kann auch durch gewöhnliche Elemente aufgerufen werden. Das Beispiel lautet wie folgt:

Der Code lautet wie folgt:

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

Ebenso ist diese Methode mit Mainstream-Browsern, sogar IE6+, kompatibel und kann problemlos verwendet werden.

getElementsByClassName

Zusätzlich zum Abrufen von Elementen durch Angabe von Tags stellt DOM auch die Methode getElementsByClassName bereit, um Elemente mit angegebenen Klassennamen abzurufen. 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 zum Aufrufen dieser Methode lautet wie folgt:

Der Code lautet wie folgt:

document.getElementsByClassName('demo')    //demo为元素指定的class名

Gleiche wie getElementsByTagname. Diese Methode wird nicht nur vom Dokumentobjekt aufgerufen, sondern kann auch von gewöhnlichen Elementen aufgerufen werden.

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

Der Code lautet wie folgt:

function getElementsByClassName(node,classname){
        if(node.getElementsByClassName) {
            return node.getElementsByClassName(classname);
        }else {
            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];
                }
            }
            return results;
        }
    }

Erweiterung

Wenn Sie mit den oben genannten Elementauswahlmethoden nicht nur zufrieden sind, möchten Sie Um mit JQuery identisch zu sein, können Elemente über Selektoren abgerufen werden. Die Implementierungsmethode ähnelt 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.

Empfohlenes Lernen: „

Javascript-Tutorial für Fortgeschrittene“

Das obige ist der detaillierte Inhalt vonJavascript-Methode zum Abrufen von Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!