Element.prefix — Eigenschaft · JavaScript-Referenz

Signatur

get Element.prefix

Beschreibung

Die schreibgeschützte Eigenschaft Element.prefix liefert den Teil des qualifizierten Namens eines Elements, der vor dem Doppelpunkt steht. Bei einem Element <xsl:template> ist prefix also "xsl", localName ist "template" und namespaceURI ist die URI, an die das Präfix gebunden ist.

Wichtig ist die Eigenschaft vor allem bei der Arbeit mit XML-Dokumenten (z. B. aus DOMParser mit "application/xml", SOAP-, RSS-, Atom- oder XSLT-Daten) und mit Elementen, die per document.createElementNS() mit einem qualifizierten Namen wie "svg:rect" erzeugt wurden. Wenn du einen Elementnamen verlustfrei rekonstruieren oder ein Dokument serialisieren willst, kombinierst du prefix und localName.

In normalen HTML-Dokumenten ist prefix praktisch immer null: HTML-, SVG- und MathML-Elemente, die der HTML-Parser erzeugt, bekommen zwar den passenden Namensraum, aber kein Präfix. Für den Vergleich von Namensräumen solltest du deshalb immer namespaceURI verwenden – das Präfix ist nur ein frei wählbarer Kurzname und kann sich zwischen Dokumenten unterscheiden.

Rückgabewert

Typ

string | null

Beschreibung

Das Namensraum-Präfix als Zeichenkette (ohne Doppelpunkt) oder null, wenn das Element kein Präfix besitzt.

Beispiele

Präfixe in einem geparsten XML-Dokument auslesen

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

const doc = new DOMParser().parseFromString(xml, 'application/xml');

for (const el of doc.querySelectorAll('*')) {
  console.log(el.tagName, '→ prefix:', el.prefix, '| localName:', el.localName);
}

feed → prefix: null | localName: feed entry → prefix: null | localName: entry title → prefix: null | localName: title media:thumbnail → prefix: media | localName: thumbnail

Präfix bei createElementNS mit qualifiziertem Namen

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

const mitPraefix = document.createElementNS(SVG_NS, 'svg:rect');
const ohnePraefix = document.createElementNS(SVG_NS, 'rect');

console.log(mitPraefix.prefix, mitPraefix.localName);
console.log(ohnePraefix.prefix, ohnePraefix.localName);

// Namensraum ist in beiden Fällen identisch
console.log(mitPraefix.namespaceURI === ohnePraefix.namespaceURI);

svg rect null rect true

HTML-Elemente haben kein Präfix

const div = document.createElement('div');
console.log(div.prefix); // null

// Auch ein Doppelpunkt im HTML-Markup erzeugt KEIN Präfix
const host = document.createElement('div');
host.innerHTML = '<svg:rect></svg:rect>';
const el = host.firstElementChild;
console.log(el.prefix, '|', el.localName);

null null | svg:rect

Qualifizierten Namen sicher rekonstruieren

const qualifiedName = (el) =>
  el.prefix ? `${el.prefix}:${el.localName}` : el.localName;

const doc = new DOMParser().parseFromString(
  '<root xmlns:x="urn:beispiel"><x:item/><plain/></root>',
  'application/xml'
);

const namen = [...doc.documentElement.children].map(qualifiedName);
console.log(namen);

["x:item", "plain"]

// Wichtig · Fallstricke

Schreibgeschützt: In älteren DOM-Spezifikationen (DOM Level 2/3) lag prefix auf Node und war beschreibbar. Heute steht die Eigenschaft nur noch auf Element und Attr und ist schreibgeschützt. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Das Präfix kannst du nur beim Erzeugen über createElementNS() festlegen.
Nicht zum Namensraum-Vergleich verwenden: Präfixe sind frei wählbar (svg:, s:, …). Prüfe stattdessen el.namespaceURI.
HTML-Parser: In HTML-Dokumenten erzeugt Markup wie <svg:rect> kein Präfix. Der Doppelpunkt wird Teil von localName.
Groß-/Kleinschreibung: prefix gibt die Schreibweise unverändert zurück, anders als tagName, das in HTML-Dokumenten für HTML-Elemente in Großbuchstaben steht.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Die Verschiebung von Node auf Element kam mit Chrome 46 und Firefox 48. Sehr alter Code, der node.prefix bei Text- oder anderen Nicht-Element-Knoten abfragt, bekommt heute undefined.

Siehe auch

Element.localName Element.namespaceURI Element.tagName Document.createElementNS() Node.lookupPrefix() Node.lookupNamespaceURI() Attr.prefix