SVGStringList.clear() — Methode · JavaScript-Referenz

Signatur

SVGStringList.prototype.clear()

Beschreibung

Die Methode clear() der Schnittstelle SVGStringList entfernt alle Zeichenketten aus der Liste. Danach sind numberOfItems und length beide 0. Die Liste ist „live“: Die Änderung wird sofort in das zugehörige SVG-Attribut übernommen.

In der Praxis begegnet einem SVGStringList vor allem über die Eigenschaften requiredExtensions und systemLanguage der Schnittstelle SVGTests. Diese gibt es z. B. bei <text>, <g> und <circle> sowie bei den Kindelementen von <switch>. Mit clear() setzt du die Liste zurück, bevor du sie mit appendItem() neu befüllst.

Wenn du eine Liste komplett ersetzen willst, ist clear() und danach appendItem() meist gut lesbar. Brauchst du genau einen neuen Eintrag, geht es mit initialize(newItem) kürzer: Die Methode leert die Liste und fügt den Eintrag in einem Schritt ein.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Sprachliste eines SVG-Elements leeren

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

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

langs.clear();
console.log(langs.numberOfItems);
console.log(JSON.stringify(text.getAttribute('systemLanguage')));

3 0 ""

Liste zurücksetzen und neu befüllen (Sprachwahl in <switch>)

// <svg><switch>
//   <text id="gruss" systemLanguage="en">Hello</text>
//   <text>Hallo</text>
// </switch></svg>
const gruss = document.querySelector('#gruss');

const setLanguages = (el, codes) => {
  const list = el.systemLanguage;
  list.clear();
  codes.forEach((code) => list.appendItem(code));
};

setLanguages(gruss, ['de', 'de-AT', 'de-CH']);
console.log(gruss.getAttribute('systemLanguage'));

de de-AT de-CH

Alle Einträge mit clear() entfernen

const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('requiredExtensions', 'http://example.org/ext1 http://example.org/ext2');

const ext = circle.requiredExtensions;
console.log([...Array(ext.numberOfItems)].map((_, i) => ext.getItem(i)));

ext.clear();
console.log(ext.length);

["http://example.org/ext1", "http://example.org/ext2"] 0

// Wichtig · Fallstricke

Bedingte Verarbeitung: Nach clear() steht im Attribut ein leerer Wert. Ein vorhandenes, aber leeres systemLanguage- oder requiredExtensions-Attribut gilt laut Spezifikation als falsch. Das Element wird dann nicht dargestellt bzw. in <switch> übersprungen. Soll die Bedingung ganz wegfallen, entferne das Attribut mit removeAttribute('systemLanguage').
Ist die Liste schreibgeschützt, wirft clear() einen DOMException vom Typ NoModificationAllowedError.
Die Liste ist live: Elemente, die du vorher mit getItem() gelesen hast, sind einfache Zeichenketten. Sie bleiben in deinen Variablen erhalten, gehören aber nicht mehr zur Liste.
requiredFeatures wurde in SVG 2 entfernt. Verlass dich also nicht darauf, dass es als SVGStringList existiert.
Die Methode wird von allen modernen Browsern unterstützt. Die Eigenschaft length als Alias für numberOfItems gibt es erst seit SVG 2. Sehr alte Browser kennen sie eventuell nicht.

Siehe auch

SVGStringList SVGStringList.initialize() SVGStringList.appendItem() SVGStringList.removeItem() SVGStringList.getItem() SVGStringList.numberOfItems SVGGraphicsElement.systemLanguage SVGGraphicsElement.requiredExtensions