HTML-DOM -getElementsByTagName()- Methode
❮ Das Element-ObjektBeispiel
Ändern Sie den HTML-Inhalt des ersten <li>-Elements (Index 0) in einer Liste:
var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";
Definition und Verwendung
Die Methode getElementsByTagName() gibt eine Sammlung der untergeordneten Elemente eines Elements mit dem angegebenen Tag-Namen als NodeList-Objekt zurück.
Das NodeList-Objekt repräsentiert eine Sammlung von Knoten. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Tipp: Sie können die length -Eigenschaft des NodeList-Objekts verwenden, um die Anzahl der untergeordneten Knoten mit dem angegebenen Tag-Namen zu bestimmen, dann können Sie alle Knoten durchlaufen und die gewünschten Informationen extrahieren.
Tipp: Der Parameterwert „*“ gibt alle untergeordneten Elemente des Elements zurück.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByTagName() | 1.0 | 6.0 | 3.0 | 3.0 | 9.5 |
Syntax
element.getElementsByTagName(tagname)
Parameterwerte
| Parameter | Type | Description |
|---|---|---|
| tagname | String | Required. The tagname of the child elements you want to get |
Technische Details
| DOM-Version | Elementobjekt der Kernebene 1 |
|---|---|
| Rückgabewert: | Ein NodeList-Objekt, das eine Auflistung der untergeordneten Elemente des Elements mit dem angegebenen Tagnamen darstellt. Die Elemente in der zurückgegebenen Auflistung werden so sortiert, wie sie im Quellcode erscheinen. |
Mehr Beispiele
Beispiel
Finden Sie heraus, wie viele <p>-Elemente sich in einem <div>-Element befinden (unter Verwendung der length-Eigenschaft des NodeList-Objekts):
var x =
document.getElementById("myDIV").getElementsByTagName("P").length;
Beispiel
Ändern Sie die Hintergrundfarbe des zweiten <p>-Elements (Index 1) innerhalb eines <div>-Elements:
var x =
document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";
Beispiel
Ändern Sie die Hintergrundfarbe aller <p>-Elemente innerhalb eines <div>-Elements:
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("P");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Beispiel
Ändern Sie die Hintergrundfarbe des vierten Elements (Index 3) innerhalb eines <div>-Elements:
var x = document.getElementById("myDIV");
x.getElementsByTagName("*")[3].style.backgroundColor = "red";
Beispiel
Verwenden Sie den "*"-Parameter.
Ändern Sie die Hintergrundfarbe aller Elemente innerhalb eines <div>-Elements:
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Verwandte Seiten
JavaScript-Referenz: document.getElementsByTagName()
JavaScript-Tutorial: JavaScript-HTML-DOM-Knotenliste
❮ Das Element-Objekt