Detaillierte Beispiele für drei Methoden zum Abrufen von Elementen in JavaScript

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:

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

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 (genauer gesagt handelt es sich bei der HTMLCollection-Sammlung nicht um ein Array im eigentlichen Sinne. Jedes Objekt entspricht dem Objekt). im Dokument. Ein Element mit dem angegebenen Tag. Ähnlich wie getElementById stellt diese Methode nur einen Parameter bereit und sein Parameter ist der Name des angegebenen Tags. Der Beispielcode lautet wie folgt:

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

Es sollte sein Beachten Sie, dass Methoden nicht nur von Dokumentobjekten aufgerufen werden, sondern auch von gewöhnlichen Elementen aufgerufen werden können. Ein Beispiel ist wie folgt:

Für natives DOM erhalten Sie zuerst das Tag-Objekt, die ID oder den Namen oder anderes

Beispiel:

<p id="targetp" >2333333</p>
<script>
  var element = document.getElementById("targetp");
  var tagname = element.tagName;
  alert(tagname);
</script>

jQuery ruft ab

$("#content-header").get(0).tagName

Wenn das Objekt abgerufen wurde, können Sie es direkt abrufen Tag-Name

<p onclick="alert(&#39;您单击的是：&#39;+this.tagName);">中华人民共和国</p>

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

In ähnlicher Weise ist diese Methode mit Mainstream-Browsern, sogar IE6+, kompatibel und kann mutig 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:

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

Wie getElementsByTagname kann diese Methode nicht nur vom Dokumentobjekt aufgerufen werden, sondern auch normal aufgerufen werden Elemente.

Für ältere Browser wie IE6 und 7 können wir die folgende Hack-Methode verwenden:

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;
    }
  }

Wenn Sie es nicht nur Erfüllt die oben genannten Elementauswahlmethoden, möchte aber auch Elemente über Selektoren wie JQuery abrufen können. 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.

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für drei Methoden zum Abrufen von Elementen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!