HTML DOM Element getElementsByTagName() Methode

Definition und Verwendung

getElementsByTagName() Die Methode gibt eine Sammlung von Elementen mit angegebenem Tagnamen als NodeList-Objekt zurück.

Hinweis:Parameterwert "*" Gibt alle untergeordneten Elemente des Elements zurück.

Weitere Informationen:

getElementsByClassName()-Methode

querySelector()-Methode

querySelectorAll()-Methode

NodeList

NodeList Ist eine ähnliche Array-Knotenmenge (Liste).

Sie können die Knoten in der Liste über Indizes (Index) ansprechen. Der Index beginnt bei 0.

length-AttributGibt die Anzahl der Knoten in der Liste zurück.

Beispiel

Beispiel 1

Ändern Sie den HTML-Inhalt des ersten <li>-Elements in der Liste:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

Versuchen Sie es selbst

Beispiel 2

Anzahl der <p>-Elemente in "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

Versuchen Sie es selbst

Beispiel 3

Ändern Sie die Zeichengröße des zweiten <p>-Elements in "myDIV":

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

Versuchen Sie es selbst

Beispiel 4

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

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

Versuchen Sie es selbst

Beispiel 5

Ändern Sie die Hintergrundfarbe des vierten Elements (Index 3) in "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Versuchen Sie es selbst

Beispiel 6

Verwenden Sie den "*"-Parameter, um die Hintergrundfarbe aller Elemente in "myDIV" zu ändern:

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Versuchen Sie es selbst

Syntax

element.getElementsByTagName(tagname)

Parameter

Parameter Beschreibung
tagname Erforderlich. Der Tagname des Unterelements.

Rückgabewert

Typ Beschreibung
NodeList

Nachkommenknoten von Elementen mit dem gegebenen Markennamen.

Elemente werden in der Reihenfolge ihrer Erscheinung im Quellcode sortiert.

Technische Details

getElementsByTagName() Diese Methode durchsucht die Nachkommenknoten eines angegebenen Elements und gibt eine Array (im Wesentlichen NodeList-Objekt) von Element-Knoten zurück, die alle Dokumentelemente mit dem angegebenen Tag-Namen darstellen. Die Reihenfolge der Elemente im Array entspricht ihrer Reihenfolge im Quellcode des Dokuments.

Achtung

Document-Schnittstelledefiniert auch getElementsByTagName() Methode, die der Methode ähnlich ist, aber das gesamte Dokument durchsucht, anstatt die Nachkommenknoten eines Elements zu durchsuchen.

Verwechseln Sie diese Methode nicht mit HTMLDocument.getElementsByName() Methode Kann verwechselt werden, letzteres basiert auf dem Wert der name-Attribut des Elements, um Elemente abzurufen, anstatt auf ihren Tag-Namen abzurufen.

Browserkompatibilität

Wird von allen Browsern unterstützt element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung