DOMStringList — Schnittstelle · JavaScript-Referenz

Signatur

interface DOMStringList

Beschreibung

DOMStringList ist ein altes, nur lesbares Listen-Interface für Zeichenketten. Man legt es nie selbst an. Man bekommt es von bestimmten Plattform-APIs zurück, vor allem aus IndexedDB (IDBDatabase.objectStoreNames, IDBObjectStore.indexNames, IDBTransaction.objectStoreNames) und von Location.ancestorOrigins.

Das Interface ist bewusst klein gehalten:

length: Anzahl der Einträge (nur lesbar).
item(index): gibt den String an Position index zurück, bei ungültigem Index null. Man kann auch mit eckigen Klammern zugreifen (list[0]), dann bekommt man bei ungültigem Index undefined.
contains(string): gibt true zurück, wenn der String in der Liste steht.

Eine DOMStringList ist kein echtes Array. Methoden wie map, filter oder includes fehlen. In aktuellen Browsern lässt sie sich mit for...of durchlaufen. Für Array-Methoden wandelt man sie zuerst mit Array.from() oder dem Spread-Operator um.

Die WHATWG-Spezifikation stuft das Interface als veraltet ein. Neue APIs geben stattdessen normale Arrays zurück (sequence<DOMString> bzw. FrozenArray). Aus Kompatibilitätsgründen bleibt DOMStringList aber erhalten und wird in allen Browsern unterstützt.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Parameter von `item(index)`: nullbasierte Position des gewünschten Strings.
$string Pflicht	string		Parameter von `contains(string)`: der String, nach dem gesucht wird. Groß- und Kleinschreibung zählen, es wird exakt verglichen.

Beispiele

IndexedDB: prüfen, ob ein Object Store existiert

const request = indexedDB.open('shop', 2);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // objectStoreNames ist eine DOMStringList
  if (!db.objectStoreNames.contains('produkte')) {
    db.createObjectStore('produkte', { keyPath: 'id' });
  }
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log(db.objectStoreNames.length);
  console.log(db.objectStoreNames.item(0));
  console.log(db.objectStoreNames.contains('produkte'));
};

1 produkte true

In ein echtes Array umwandeln und weiterverarbeiten

const db = await new Promise((resolve, reject) => {
  const req = indexedDB.open('shop');
  req.onsuccess = () => resolve(req.result);
  req.onerror = () => reject(req.error);
});

// DOMStringList hat kein map/filter – daher umwandeln
const storeNames = Array.from(db.objectStoreNames);
const sichtbar = storeNames.filter((name) => !name.startsWith('_'));
console.log(sichtbar);

// Durchlaufen mit for...of klappt in aktuellen Browsern direkt
for (const name of db.objectStoreNames) {
  console.log(`Store: ${name}`);
}

["produkte"] Store: _meta Store: produkte

Location.ancestorOrigins: Einbettung in einem iframe prüfen

const erlaubteHosts = ['https://partner.example.com'];

const origins = window.location.ancestorOrigins; // DOMStringList oder undefined

if (origins && origins.length > 0) {
  const direkterParent = origins.item(0);
  const erlaubt = erlaubteHosts.includes(direkterParent);
  console.log(`Eingebettet von ${direkterParent}, erlaubt: ${erlaubt}`);
} else {
  console.log('Nicht eingebettet oder API nicht verfügbar');
}

Eingebettet von https://partner.example.com, erlaubt: true

item() und Klammerzugriff im Vergleich

const list = db.objectStoreNames; // z. B. ["produkte"]

console.log(list.item(5)); // ungültiger Index
console.log(list[5]);      // ungültiger Index
console.log(typeof list.includes); // keine Array-Methode

null undefined undefined

// Wichtig · Fallstricke

Kein Array: Array.isArray(list) gibt false zurück. includes, map, forEach und ähnliche Methoden gibt es nicht. Stattdessen contains() verwenden oder die Liste mit Array.from() umwandeln.
Nicht selbst erzeugbar: new DOMStringList() wirft einen TypeError. Es gibt keinen öffentlichen Konstruktor.
Momentaufnahme bei IndexedDB: IDBTransaction.objectStoreNames und die Listen außerhalb von onupgradeneeded ändern sich während der Laufzeit nicht. Wenn man Werte länger behalten will, speichert man sie am besten als Array.
Kompatibilität: Das Interface selbst wird in allen Browsern unterstützt. Location.ancestorOrigins fehlt aber in Firefox, deshalb immer auf undefined prüfen. DataTransfer.types war früher eine DOMStringList, ist heute aber ein eingefrorenes Array. Alter Code mit types.contains() funktioniert deshalb nicht mehr zuverlässig, besser ist types.includes().
Veraltet: In eigenen APIs keine DOMStringList nachbauen, sondern normale Arrays verwenden.

Siehe auch

IDBDatabase IDBObjectStore IDBTransaction Location.ancestorOrigins DOMTokenList Array.from() DataTransfer.types