Start · Sprachen · JavaScript · Referenz · SVGStringList.getItem()

SVGStringList.getItem()

Methode

Gibt den Zeichenketten-Eintrag an der angegebenen Position einer <code>SVGStringList</code> zurück.

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

SVGStringList.prototype.getItem(index)

Beschreibung

Die Methode getItem() liest einen einzelnen Eintrag aus einer SVGStringList. Solche Listen begegnen dir vor allem bei den Bedingungs-Attributen von SVG-Elementen, also bei element.systemLanguage und element.requiredExtensions (Schnittstelle SVGTests). Jeder Eintrag ist ein einfacher String, zum Beispiel ein Sprachcode wie "de" oder "en-US".

Der Index beginnt bei 0. Die gültigen Positionen reichen bis numberOfItems - 1 (bzw. length - 1). Liegt der Index außerhalb dieses Bereichs, wirft die Methode eine DOMException vom Typ IndexSizeError. Sie gibt also nicht wie bei einem Array undefined zurück.

Die Liste ist live: Änderungen am zugehörigen Attribut, etwa über setAttribute("systemLanguage", …), wirken sich sofort auf die Liste aus. Das gilt auch umgekehrt. Über Methoden wie appendItem(), replaceItem() oder removeItem() änderst du das Attribut direkt. getItem() selbst liest nur und verändert nichts.

Parameter

Name Typ Default Beschreibung
$index Pflicht number Nullbasierte Position des gewünschten Eintrags. Wird intern in eine vorzeichenlose 32-Bit-Ganzzahl (unsigned long) umgewandelt.

Rückgabewert

Typ
string
Beschreibung
Der String an der angegebenen Position. Ist index ≥ numberOfItems, wird ein IndexSizeError geworfen.

Beispiele

Sprachcodes aus systemLanguage auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const text = document.createElementNS(svgNS, 'text');
text.setAttribute('systemLanguage', 'de, en-US, fr');

const langs = text.systemLanguage; // SVGStringList
for (let i = 0; i < langs.numberOfItems; i++) {
  console.log(i, langs.getItem(i));
}
0 de 1 en-US 2 fr

Sicherer Zugriff mit Fehlerbehandlung

const getSafe = (list, index) => {
  try {
    return list.getItem(index);
  } catch (err) {
    if (err.name === 'IndexSizeError') return null;
    throw err;
  }
};

const el = document.createElementNS('http://www.w3.org/2000/svg', 'g');
el.setAttribute('systemLanguage', 'de');

console.log(getSafe(el.systemLanguage, 0));
console.log(getSafe(el.systemLanguage, 5));
de null

Live-Verhalten nach Attributänderung

const svgNS = 'http://www.w3.org/2000/svg';
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('systemLanguage', 'en');

const list = rect.systemLanguage;
console.log(list.getItem(0));

// Attribut ändern – die Liste aktualisiert sich automatisch
rect.setAttribute('systemLanguage', 'ja, ko');
console.log(list.numberOfItems, list.getItem(1));
en 2 ko

// Wichtig · Fallstricke

  • Index außerhalb des Bereichs: Anders als bei Arrays erhältst du nicht undefined, sondern eine IndexSizeError-Ausnahme. Prüfe den Index deshalb vorher gegen numberOfItems oder fange den Fehler ab.
  • In SVG 2 unterstützen moderne Browser zusätzlich die Eigenschaft length und den Zugriff per Index (list[0]). Dieser liefert bei ungültigem Index undefined. getItem() ist die ältere, überall verfügbare Variante.
  • requiredFeatures ist seit SVG 2 entfernt. Verlass dich in neuem Code nicht mehr darauf und nutze stattdessen systemLanguage oder requiredExtensions.
  • Wie genau die Einträge getrennt werden (Komma oder Leerzeichen) und wie Leerraum abgeschnitten wird, war in älteren Browserversionen nicht immer gleich. Teste deshalb, wenn es auf exakte Strings ankommt.