Dokument: getElementsByTagNameNS() 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.

Gibt eine Liste von Elementen mit dem angegebenen Tag-Namen zurück, die zum angegebenen Namensraum gehören. Das gesamte Dokument wird durchsucht, einschließlich des Wurzelknotens.

Syntax

getElementsByTagNameNS(namespace, name)

Parameter

namespace: Die Namensraum-URI der zu suchenden Elemente (siehe element.namespaceURI).
name: Entweder der lokale Name der zu suchenden Elemente oder der spezielle Wert *, der auf alle Elemente zutrifft (siehe element.localName).

Hinweis: Im Gegensatz zu document.getElementsByTagName() sind die Parameter für getElementsByTagNameNS() case-sensitiv.

Rückgabewert

Ein Live-HTMLCollection der gefundenen Elemente in der Reihenfolge, in der sie im Baum erscheinen.

Im folgenden Beispiel beginnt getElementsByTagNameNS von einem bestimmten Elternelement aus und durchsucht rekursiv von oben nach unten das DOM von diesem Elternelement aus, wobei nach Kindelementen gesucht wird, die dem Tag-name-Parameter entsprechen.

Beachten Sie, dass wenn der Knoten, auf dem getElementsByTagName aufgerufen wird, nicht der document-Knoten ist, tatsächlich die element.getElementsByTagNameNS Methode verwendet wird.

Um das folgende Beispiel zu verwenden, kopieren Sie es einfach und fügen Sie es in eine neue Datei ein, die mit der Erweiterung .xhtml gespeichert wird.

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;
}

function getAllParaElems() {
  const allParas = document.getElementsByTagNameNS(
    "http://www.w3.org/1999/xhtml",
    "p",
  );
  const num = allParas.length;
  alert(`There are ${num} &lt;p&gt; elements in this document`);
}

function div1ParaElems() {
  const div1 = document.getElementById("div1");
  const div1Paras = div1.getElementsByTagNameNS(
    "http://www.w3.org/1999/xhtml",
    "p",
  );
  const num = div1Paras.length;
  alert(`There are ${num} &lt;p&gt; elements in div1 element`);
}

function div2ParaElems() {
  const div2 = document.getElementById("div2");
  const div2Paras = div2.getElementsByTagNameNS(
    "http://www.w3.org/1999/xhtml",
    "p",
  );
  const num = div2Paras.length;
  alert(`There are ${num} &lt;p&gt; elements in div2 element`);
}

document.getElementById("btn1").addEventListener("click", getAllParaElems);
document.getElementById("btn2").addEventListener("click", div1ParaElems);
document.getElementById("btn3").addEventListener("click", div2ParaElems);

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Element.getElementsByTagNameNS()