Element.namespaceURI — Eigenschaft · JavaScript-Referenz

Signatur

Element.namespaceURI

Beschreibung

Mit namespaceURI lesen Sie aus, zu welchem XML-Namensraum ein Element gehört. Das ist nützlich, wenn HTML, SVG und MathML im selben Dokument vorkommen. Ein <svg>-Element in einer HTML-Seite hat zum Beispiel den Namensraum http://www.w3.org/2000/svg, ein <div> dagegen http://www.w3.org/1999/xhtml.

Der Wert wird beim Erzeugen des Elements festgelegt und lässt sich danach nicht mehr ändern. Elemente, die der HTML-Parser oder document.createElement() in einem HTML-Dokument erzeugt, bekommen immer den XHTML-Namensraum. Mit document.createElementNS() legen Sie den Namensraum selbst fest. Übergeben Sie dort null oder einen leeren String, gehört das Element keinem Namensraum an und namespaceURI ist null.

Typische Einsatzfälle:

Beim Durchlaufen des DOM-Baums zwischen SVG-, MathML- und HTML-Elementen unterscheiden.
XML-Dokumente mit mehreren Namensräumen verarbeiten, etwa Atom-Feeds, SOAP-Nachrichten oder XSLT.
In Bibliotheken prüfen, ob ein Element mit createElementNS() erzeugt wurde.

Der Namensraum wird nicht aus dem Präfix im Tag-Namen abgeleitet, sondern bei der Erzeugung vergeben. Den Präfix liefert prefix, den lokalen Namen ohne Präfix liefert localName.

Rückgabewert

Typ

string | null

Beschreibung

Die Namensraum-URI des Elements als String, z. B. "http://www.w3.org/1999/xhtml" oder "http://www.w3.org/2000/svg". Gehört das Element keinem Namensraum an, ist der Wert null.

Beispiele

Namensräume von HTML- und SVG-Elementen vergleichen

// HTML-Seite mit <div id="box"></div> und <svg id="icon"><circle r="5"/></svg>
const div = document.getElementById('box');
const svg = document.getElementById('icon');
const circle = svg.querySelector('circle');

console.log(div.namespaceURI);
console.log(svg.namespaceURI);
console.log(circle.namespaceURI);

http://www.w3.org/1999/xhtml http://www.w3.org/2000/svg http://www.w3.org/2000/svg

createElement() und createElementNS() im Vergleich

const SVG_NS = 'http://www.w3.org/2000/svg';

// Falsch: erzeugt ein unbekanntes HTML-Element, das nicht gezeichnet wird
const wrong = document.createElement('circle');
// Richtig: echtes SVG-Element
const right = document.createElementNS(SVG_NS, 'circle');
// Ohne Namensraum
const plain = document.createElementNS(null, 'item');

console.log(wrong.namespaceURI);
console.log(right.namespaceURI);
console.log(plain.namespaceURI);
console.log(right instanceof SVGCircleElement);

http://www.w3.org/1999/xhtml http://www.w3.org/2000/svg null true

Elemente eines XML-Dokuments nach Namensraum filtern

const xml = `<feed xmlns="http://www.w3.org/2005/Atom"
      xmlns:media="http://search.yahoo.com/mrss/">
  <title>Blog</title>
  <media:thumbnail url="bild.jpg"/>
</feed>`;

const doc = new DOMParser().parseFromString(xml, 'application/xml');
const MEDIA_NS = 'http://search.yahoo.com/mrss/';

const mediaElements = [...doc.documentElement.children]
  .filter((el) => el.namespaceURI === MEDIA_NS)
  .map((el) => `${el.prefix}:${el.localName}`);

console.log(mediaElements);

["media:thumbnail"]

Hilfsfunktion: Ist ein Element ein SVG-Element?

const isSvgElement = (el) => el.namespaceURI === 'http://www.w3.org/2000/svg';

document.addEventListener('click', (event) => {
  if (isSvgElement(event.target)) {
    console.log(`SVG-Element angeklickt: <${event.target.localName}>`);
  }
});

SVG-Element angeklickt: <path>

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie el.namespaceURI = '...' wird still ignoriert und wirft im Strict Mode einen TypeError. Wenn Sie einen anderen Namensraum brauchen, erzeugen Sie das Element mit createElementNS() neu.
Häufiger Fehler bei SVG: document.createElement('svg') oder createElement('path') erzeugt HTML-Elemente. Diese werden nicht gezeichnet. Für SVG und MathML ist immer createElementNS() mit der richtigen URI nötig.
Präfix ist nicht gleich Namensraum: Vergleichen Sie immer die URI, nicht den Präfix. Präfixe können beliebig gewählt werden, zum Beispiel m: statt media:.
HTML-Parser: In HTML-Dokumenten erkennt der Parser nur SVG und MathML als fremde Namensräume. Andere xmlns-Attribute im HTML-Quelltext haben keine Wirkung.
Historisch: Seit DOM4 ist namespaceURI auf Element definiert. Vorher lag die Eigenschaft auf Node, und sehr alte Browser (Firefox ≤ 3.5) lieferten für HTML-Elemente null. Heute liefern alle Browser dasselbe Ergebnis.
Auch Attr-Knoten haben eine eigene namespaceURI-Eigenschaft, etwa für xlink:href.

Siehe auch

Element.prefix ElementInternals.ariaPressed Element.ariaBusy Element.ariaLabel Element.ariaLevel