SVGStringList.numberOfItems — Eigenschaft · JavaScript-Referenz

Signatur

SVGStringList.numberOfItems

Beschreibung

numberOfItems ist eine schreibgeschützte Eigenschaft der Schnittstelle SVGStringList. Sie gibt an, wie viele Einträge die Liste gerade enthält. Eine SVGStringList begegnet dir vor allem bei den bedingten Verarbeitungsattributen von SVG-Elementen, also bei systemLanguage und requiredExtensions (Schnittstelle SVGTests). Deren Attributwerte werden an Leerzeichen bzw. Kommas in einzelne Zeichenketten zerlegt.

Die Liste ist live: Änderst du das zugehörige Attribut per setAttribute() oder bearbeitest du die Liste mit appendItem(), removeItem(), clear() usw., passt sich numberOfItems sofort an. Die Eigenschaft ist deshalb die übliche Obergrenze für Schleifen über getItem(index).

Seit SVG 2 gibt es zusätzlich die gleichwertige Eigenschaft length. Beide liefern immer denselben Wert. numberOfItems stammt noch aus SVG 1.1 und passt zur Benennung der übrigen Methoden der Liste (getItem, insertItemBefore, …).

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative Ganzzahl (unsigned long) mit der aktuellen Anzahl der Einträge in der Liste. Ist die Liste leer, ist der Wert 0.

Beispiele

Anzahl der Sprachen in systemLanguage ermitteln

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
console.log(langs.numberOfItems);

3

Alle Einträge mit getItem() durchlaufen

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

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

Eintrag 0: de Eintrag 1: en

Die Live-Liste verändern und den Zähler beobachten

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

console.log(list.numberOfItems); // noch leer
list.appendItem('de');
list.appendItem('en');
console.log(list.numberOfItems);
console.log(rect.getAttribute('systemLanguage'));

list.clear();
console.log(list.numberOfItems, list.length);

0 2 de, en 0 0

// Wichtig · Fallstricke

Schreibgeschützt: Wenn du numberOfItems einen Wert zuweist, wird das ignoriert (im Strict Mode gibt es einen TypeError). Die Liste kürzt du nur mit removeItem() oder clear().
Live-Verhalten: Wenn du beim Iterieren Einträge entfernst, ändert sich numberOfItems mitten in der Schleife. Laufe in diesem Fall rückwärts von numberOfItems - 1 bis 0.
Kein Array: SVGStringList hat kein forEach() oder map(). Einige Browser erlauben den Indexzugriff list[i] und die Iteration mit for…of. Am sichersten sind aber getItem() zusammen mit numberOfItems.
Kompatibilität: Wird in allen aktuellen Browsern unterstützt. requiredFeatures wurde mit SVG 2 entfernt und ist in modernen Browsern meist nicht mehr als SVGStringList verfügbar. Nimm stattdessen systemLanguage oder requiredExtensions.
Ein ungültiger Index bei getItem(index) (Wert größer oder gleich numberOfItems) wirft eine IndexSizeError-DOMException.

Siehe auch

SVGStringList SVGStringList.length SVGStringList.getItem() SVGStringList.appendItem() SVGStringList.removeItem() SVGStringList.clear() SVGGraphicsElement.systemLanguage