Dokument: `getElementsByTagName()` Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die getElementsByTagName Methode des Document Interface gibt eine HTMLCollection von Elementen mit dem angegebenen Tag-Namen zurück.

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

Syntax

js
getElementsByTagName(name)

Parameter

name

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

Rückgabewert

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

Beispiele

Im folgenden Beispiel beginnt getElementsByTagName() von einem bestimmten Elternelement 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-Parameter name übereinstimmen. Dies demonstriert sowohl document.getElementsByTagName() als auch das funktional identische Element.getElementsByTagName(), das die Suche bei einem bestimmten Element im DOM-Baum beginnt.

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

html
<p>Some outer text</p>
<p>Some outer text</p>

<div id="div1">
  <p>Some div1 text</p>
  <p>Some div1 text</p>
  <p>Some div1 text</p>

  <div id="div2">
    <p>Some div2 text</p>
    <p>Some div2 text</p>
  </div>
</div>

<p>Some outer text</p>
<p>Some outer text</p>

<button id="btn1">Show all p elements in document</button>
<br />
<button id="btn2">Show all p elements in div1 element</button>
<br />
<button id="btn3">Show all p elements in div2 element</button>
css
body {
  border: solid green 3px;
}

#div1 {
  border: solid blue 3px;
}

#div2 {
  border: solid red 3px;
}
js
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 von getElementsByTagName() 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 auch Firefox Bug 499656.

document.getElementsByTagName() ist ähnlich wie Element.getElementsByTagName(), außer dass seine Suche das gesamte Dokument umfasst.

Spezifikationen

Specification
DOM
# ref-for-dom-document-getelementsbytagname①

Browser-Kompatibilität

Siehe auch