SVGStringList.length — Eigenschaft · JavaScript-Referenz

Signatur

SVGStringList.length

Beschreibung

Die schreibgeschützte Eigenschaft length liefert die Anzahl der Zeichenketten in einer SVGStringList. Solche Listen erhalten Sie vor allem über die bedingten Verarbeitungsattribute von SVG-Elementen, also element.requiredExtensions und element.systemLanguage. Dort bildet die Liste den Inhalt des gleichnamigen Attributs ab.

length gibt denselben Wert zurück wie SVGStringList.numberOfItems. Die Eigenschaft wurde mit SVG 2 eingeführt, damit sich SVG-Listen wie normale JavaScript-Sammlungen verhalten: Sie können mit einer klassischen for-Schleife und getItem(i) oder mit dem Indexzugriff list[i] über alle Einträge laufen.

Die Liste ist live. Ändern Sie das zugrunde liegende Attribut (zum Beispiel mit setAttribute("systemLanguage", …)) oder rufen Sie appendItem(), removeItem() oder clear() auf, passt sich length sofort an. Umgekehrt schreiben diese Methoden ihre Änderungen auch zurück in das Attribut.

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative Ganzzahl (unsigned long) mit der Anzahl der Einträge in der Liste. Bei leerer Liste ist der Wert 0.

Beispiele

Anzahl der Sprachen in systemLanguage ermitteln

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

const langs = text.systemLanguage; // SVGStringList
console.log(langs.length);
console.log(langs.length === langs.numberOfItems);

3 true

Alle Einträge mit length und getItem() durchlaufen

const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("systemLanguage", "de, en");

const list = text.systemLanguage;
for (let i = 0; i < list.length; i++) {
  console.log(`${i}: ${list.getItem(i)}`);
}

0: de 1: en

length ändert sich live beim Bearbeiten der Liste

const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
const list = g.systemLanguage;

console.log(list.length);          // leer
list.appendItem("de");
list.appendItem("en");
console.log(list.length);
console.log(g.getAttribute("systemLanguage"));

list.removeItem(0);
console.log(list.length);
list.clear();
console.log(list.length);

0 2 de, en 1 0

// Wichtig · Fallstricke

Schreibgeschützt: Wenn Sie list.length = 0 zuweisen, passiert nichts (im Strict Mode wird ein TypeError ausgelöst). Zum Leeren der Liste verwenden Sie clear().
Kein echtes Array: Eine SVGStringList hat weder map() noch forEach(). Für Array-Methoden wandeln Sie die Liste zuerst um, zum Beispiel mit Array.from({ length: list.length }, (_, i) => list.getItem(i)).
Trennzeichen: Die Anzahl hängt davon ab, wie das Attribut zerlegt wird. systemLanguage wird an Kommas getrennt, requiredExtensions an Leerzeichen. Leere oder falsch getrennte Attributwerte führen daher zu unerwarteten Werten für length.
Kompatibilität: length ist neu in SVG 2. Sehr alte Browser kennen nur numberOfItems. Als robuste Lösung eignet sich list.length ?? list.numberOfItems. requiredFeatures wurde aus SVG 2 entfernt und steht in modernen Browsern nicht mehr zur Verfügung.

Siehe auch

SVGStringList SVGStringList.numberOfItems SVGStringList.getItem() SVGStringList.appendItem() SVGStringList.clear() SVGGraphicsElement.systemLanguage ImageTrackList.length