DiegetElementsByTagName Methode desDocument Interface gibt eineHTMLCollection von Elementen mit dem angegebenen Tag-Namen zurück.

Das gesamte Dokument wird durchsucht, einschließlich des Wurzelknotens. Die zurückgegebeneHTMLCollectionist live, das bedeutet, dass sie sich automatisch aktualisiert, um mit dem DOM-Baum synchron zu bleiben, ohnedocument.getElementsByTagName() erneut aufrufen zu müssen.

Syntax

getElementsByTagName(name)

Parameter

name

Ein String, der den Namen der Elemente repräsentiert. Der spezielleString* repräsentiert alle Elemente.

Rückgabewert

Eine liveHTMLCollection der gefundenen Elemente in der Reihenfolge, in der sie im Baum erscheinen.

Beispiele

Im folgenden Beispiel beginntgetElementsByTagName() von einem bestimmtenElternelement und durchsucht rekursiv von oben nach unten den DOM-Baum von diesem Elternelement aus, um eine Sammlung aller Nachkommenelemente zu erstellen, die mit dem Tag-Parametername übereinstimmen. Dies demonstriert sowohldocument.getElementsByTagName() als auch das funktional identischeElement.getElementsByTagName(), das die Suche bei einem bestimmtenElement im DOM-Baum beginnt.

Das Klicken der Schaltflächen verwendetgetElementsByTagName(), um die Nachkommen-Paragraphenelemente eines bestimmten Elternteils zu zählen (entweder das Dokument selbst oder eines von zwei verschachtelten<div> Elementen).

<p>Some outer text</p><p>Some outer text</p><div>  <p>Some div1 text</p>  <p>Some div1 text</p>  <p>Some div1 text</p>  <div>    <p>Some div2 text</p>    <p>Some div2 text</p>  </div></div><p>Some outer text</p><p>Some outer text</p><button>Show all p elements in document</button><br /><button>Show all p elements in div1 element</button><br /><button>Show all p elements in div2 element</button>

body {  border: solid green 3px;}#div1 {  border: solid blue 3px;}#div2 {  border: solid red 3px;}

function getAllParaElems() {  const allParas = document.getElementsByTagName("p");  const num = allParas.length;  alert(`There are ${num} paragraph in this document`);}function div1ParaElems() {  const div1 = document.getElementById("div1");  const div1Paras = div1.getElementsByTagName("p");  const num = div1Paras.length;  alert(`There are ${num} paragraph in #div1`);}function div2ParaElems() {  const div2 = document.getElementById("div2");  const div2Paras = div2.getElementsByTagName("p");  const num = div2Paras.length;  alert(`There are ${num} paragraph in #div2`);}document.getElementById("btn1").addEventListener("click", getAllParaElems);document.getElementById("btn2").addEventListener("click", div1ParaElems);document.getElementById("btn3").addEventListener("click", div2ParaElems);

Anmerkungen

Wenn es auf ein HTML-Dokument angewendet wird, wird das Argument vongetElementsByTagName() vor dem Fortfahren in Kleinbuchstaben umgewandelt. Dies ist unerwünscht, wenn man versucht,camel case SVG-Elemente in einem Unterbaum in einem HTML-Dokument abzugleichen.document.getElementsByTagNameNS() ist in diesem Fall nützlich. Siehe auchFirefox Bug 499656.

document.getElementsByTagName() ist ähnlich wieElement.getElementsByTagName(), außer dass seine Suche dasgesamte Dokument umfasst.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Element.getElementsByTagName()
• document.getElementById() um eine Referenz auf ein Element nach seinerid zurückzugeben
• document.getElementsByName() um eine Referenz auf ein Element nachseinemname zurückzugeben
• document.querySelector() für leistungsstarke Selektoren durch Abfragen wie'div.myclass'