</> programmierung.net
Start · Sprachen · JavaScript · Referenz · Element.getAttributeNS()

Element.getAttributeNS()

Methode

Gibt den Wert eines Attributs mit bestimmtem Namespace-URI und lokalem Namen als Zeichenkette zurück oder <code>null</code>, wenn es nicht existiert.

seit JavaScript Baseline: alle Browser (DOM Level 2) Kategorie: webapi

Signatur

Element.prototype.getAttributeNS(namespace, localName)

Beschreibung

getAttributeNS() liest ein Attribut anhand von Namespace-URI und lokalem Namen aus, statt anhand des qualifizierten Namens (z. B. xlink:href). So wird das Attribut unabhängig vom Präfix gefunden, das im Dokument tatsächlich verwendet wird: Ob dort xlink:href oder xl:href steht, spielt keine Rolle, solange der Namespace-URI stimmt.

Gebraucht wird die Methode vor allem bei XML-Dokumenten (z. B. aus DOMParser oder XMLHttpRequest.responseXML), bei SVG mit älteren xlink:-Attributen und bei MathML oder eigenen XML-Vokabularen, in denen Attribute aus verschiedenen Namespaces vorkommen.

Wichtig: Normale Attribute ohne Präfix, etwa class, id oder width auf einem SVG-Element, haben keinen Namespace. Man übergibt dann null (oder "") als ersten Parameter und nicht den SVG-Namespace. Für reine HTML-Attribute ist getAttribute() einfacher und völlig ausreichend.

Parameter

Name Typ Default Beschreibung
$namespace Pflicht string | null Namespace-URI des gesuchten Attributs, z. B. "http://www.w3.org/1999/xlink". null oder "" steht für Attribute ohne Namespace.
$localName Pflicht string Lokaler Name des Attributs ohne Präfix, z. B. "href" statt "xlink:href". Groß-/Kleinschreibung wird beachtet.

Rückgabewert

Typ
string | null
Beschreibung
Wert des Attributs als Zeichenkette oder null, wenn am Element kein passendes Attribut existiert. Ein vorhandenes, aber leeres Attribut liefert "".

Beispiele

xlink:href eines SVG-&lt;use&gt;-Elements auslesen

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

const use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(XLINK_NS, 'xlink:href', '#icon-star');

// Nur der lokale Name ohne Präfix wird übergeben
console.log(use.getAttributeNS(XLINK_NS, 'href'));
// Mit falschem Namespace gibt es keinen Treffer
console.log(use.getAttributeNS(null, 'href'));
#icon-star null

Namespaced-Attribute in einem geparsten XML-Dokument

const xml = `<katalog xmlns:p="urn:example:preise">
  <artikel id="a1" p:waehrung="EUR" p:betrag="19.99">Buch</artikel>
</katalog>`;

const doc = new DOMParser().parseFromString(xml, 'application/xml');
const artikel = doc.querySelector('artikel');
const NS = 'urn:example:preise';

const betrag = Number(artikel.getAttributeNS(NS, 'betrag'));
const waehrung = artikel.getAttributeNS(NS, 'waehrung');
// Attribut ohne Präfix -> kein Namespace -> null
const id = artikel.getAttributeNS(null, 'id');

console.log(`${id}: ${betrag.toFixed(2)} ${waehrung}`);
a1: 19.99 EUR

Präfix-unabhängige Abfrage mit Rückfallwert

const doc = new DOMParser().parseFromString(
  '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink">' +
  '<a xl:href="https://example.com" xl:title="Beispiel"/></svg>',
  'image/svg+xml'
);

const link = doc.querySelector('a');
const XLINK_NS = 'http://www.w3.org/1999/xlink';

// Das Präfix ist hier "xl", nicht "xlink" – trotzdem ein Treffer
const href = link.getAttributeNS(XLINK_NS, 'href') ?? '#';
const ziel = link.getAttributeNS(XLINK_NS, 'show') ?? 'replace';

console.log(href, ziel);
console.log(link.getAttribute('xlink:href')); // qualifizierter Name passt nicht
https://example.com replace null

// Wichtig · Fallstricke

  • Kein Präfix übergeben: getAttributeNS(ns, 'xlink:href') findet nichts. Der zweite Parameter ist immer der lokale Name, also 'href'.
  • Attribute ohne Präfix haben keinen Namespace: Auch auf SVG-Elementen gilt für width, class usw. getAttributeNS(null, 'width'). Mit dem SVG-Namespace ist das Ergebnis null.
  • null statt "": Laut aktueller DOM-Spezifikation ist der Rückgabewert null, wenn das Attribut fehlt. Sehr alte Browser haben teilweise "" geliefert. Wer sicher prüfen will, ob ein Attribut existiert, nimmt hasAttributeNS().
  • Groß-/Kleinschreibung: Anders als getAttribute() bei HTML-Elementen wandelt getAttributeNS() den Namen nicht in Kleinbuchstaben um.
  • xlink ist veraltet: SVG 2 unterstützt einfaches href ohne Namespace, und alle modernen Browser verstehen es. Für Kompatibilität lohnt es sich, beides zu prüfen: el.getAttribute('href') ?? el.getAttributeNS(XLINK_NS, 'href').
  • Browser-Unterstützung: Die Methode steht in allen gängigen Browsern seit vielen Jahren zur Verfügung. In Node.js gibt es sie nur über DOM-Implementierungen wie jsdom.

Siehe auch

Element.getAttribute() Element.setAttributeNS() Element.hasAttributeNS() Element.removeAttributeNS() Element.getAttributeNodeNS() Document.createElementNS()
← Vorheriger Eintrag Element.getAttributeNodeNS()