HTML DOM Document getElementsByTagName() - Methode

Definition und Verwendung

getElementsByTagName() Die Methode gibt die Sammlung aller Elemente mit dem angegebenen Markennamen zurück.

getElementsByTagName() Die Methode gibt zurück HTMLCollection.

getElementsByTagName() Das Attribut ist schreibgeschützt.

Anmerkung:getElementsByTagName("*") Gibt alle Elemente im Dokument zurück.

HTMLCollection

HTMLCollection Ist eine Sammlung ähnlich einem Array von HTML-Elementen (Liste).

Man kann auf die Elemente in der Sammlung über Index zugreifen (beginnend bei 0).

length Das Attribut gibt die Anzahl der Elemente in der Sammlung zurück.

Weitere Informationen:

getElementById() - Methode

getElementsByClassName() - Methode

querySelector() - Methode

querySelectorAll() - Methode

HTMLCollection-Objekt

Beispiel

Beispiel 1

Erhalten Sie alle Elemente mit dem Tag-Namen "li":

const collection = document.getElementsByTagName("li");

Versuchen Sie es selbst

Beispiel 2

Erhalten Sie alle Elemente im Dokument:

const collection = document.getElementsByTagName("*");

Versuchen Sie es selbst

Beispiel 3

Ändern Sie den inneren HTML des ersten <p>-Elements im Dokument:

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

Versuchen Sie es selbst

Beispiel 4

Anzahl der <li>-Elemente im Dokument:

let numb = document.getElementsByTagName("li").length;

Versuchen Sie es selbst

Beispiel 5

Ändern Sie die Hintergrundfarbe aller <p>-Elemente:

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Versuchen Sie es selbst

Syntax

document.getElementsByTagName(tagName)

Parameter

Parameter Beschreibung
tagName Erforderlich. Der Markennamen des Elements.

Rückgabewert

Typ Beschreibung
Objekt

HTMLCollection-Objekt.

Sammlung von Elementen mit angegebenem Tagnamen.

Sortiert nach der Reihenfolge der Elemente im Dokument.

Technische Details

Diese Methode gibt ein NodeList-Objekt zurück (kann als lesbare Liste behandelt werden), das alle Elemente mit dem angegebenen Tagnamen im Dokument enthält, die in der Reihenfolge gespeichert sind, in der sie im Quelldokument vorkommen.

Das NodeList-Objekt ist "lebendig", d.h. wenn im Dokument Elemente mit dem angegebenen Tagnamen hinzugefügt oder entfernt werden, werden die Inhalte automatisch notwendige Aktualisierungen durchführen.

HTML-Dokumente unterscheiden nicht zwischen Groß-/Kleinschreibung, daher kann jede beliebige Groß-/Kleinschreibweise verwendet werden, um tagNamees passt zu allen in dem Dokument vorhandenen Tags mit dem gleichen Namen, unabhängig davon, in welcher Groß-/Kleinschreibweise diese im Quelldokument verwendet werden. Aber XML-Dokumente unterscheiden zwischen Groß-/Kleinschreibung,tagName Es passt nur zu Tags, die im Quelldokument den gleichen Namen und die gleiche Groß-/Kleinschreibweise haben.

Tipp:Das Element Interface definiert eine Methode mit dem gleichen Namen, die nur das Dokumentesubtree durchsucht. Darüber hinaus definiert das HTMLDocument Interface getElementByName() Methodees basiert auf dem Wert der name-Eigenschaft (nicht auf dem Tag-Namen) zur Suche nach Elementen.

Browserunterstützung

document.getElementsByTagName() Es ist eine Eigenschaft von DOM Level 1 (1998).

Es wird von allen Browsern unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützt 9-11 Unterstützt Unterstützt Unterstützt Unterstützt

Verwandte Seiten

JavaScript-Referenzhandbuch:element.getElementsByTagName()

JavaScript-Tutorial:JavaScript HTML DOM Knotenliste