DOMRectReadOnly.toJSON() — Methode · JavaScript-Referenz

Signatur

DOMRectReadOnly.prototype.toJSON()

Beschreibung

Die Methode toJSON() ist ein sogenannter Serialisierer: Sie wandelt ein DOMRectReadOnly-Objekt (und damit auch jedes DOMRect, etwa aus Element.getBoundingClientRect()) in ein gewöhnliches JavaScript-Objekt um. Dieses Objekt enthält alle acht geometrischen Werte als eigene, aufzählbare Eigenschaften.

Das ist nötig, weil die Eigenschaften eines DOMRect als Getter auf dem Prototyp definiert sind und keine eigenen Eigenschaften der Instanz sind. Object.keys(), der Spread-Operator {...rect} oder Object.assign() liefern deshalb ein leeres Objekt. JSON.stringify() ruft toJSON() dagegen automatisch auf und erzeugt so eine vollständige JSON-Zeichenkette.

Typische Einsatzfälle sind das Protokollieren von Element-Positionen, das Senden von Layoutdaten an einen Server (z. B. für Analysen oder Fehlerberichte), das Speichern in localStorage oder das Übertragen zwischen Kontexten, in denen ein einfaches Objekt benötigt wird.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt ({ x, y, width, height, top, right, bottom, left }) mit den aktuellen Zahlenwerten des Rechtecks. Es handelt sich nicht um einen JSON-String, sondern um ein Objekt, das von JSON.stringify() serialisiert werden kann.

Beispiele

Rechteck direkt in ein einfaches Objekt umwandeln

const rect = new DOMRectReadOnly(10, 20, 100, 50);
const plain = rect.toJSON();
console.log(plain);

{ x: 10, y: 20, width: 100, height: 50, top: 20, right: 110, bottom: 70, left: 10 }

Unterschied zwischen Spread-Operator und toJSON()

const rect = new DOMRect(0, 0, 200, 80);

// Getter liegen auf dem Prototyp – Spread liefert nichts
console.log({ ...rect });

// toJSON() liefert alle Werte als eigene Eigenschaften
console.log(Object.keys(rect.toJSON()));

{} ["x", "y", "width", "height", "top", "right", "bottom", "left"]

Element-Position per JSON.stringify an einen Server senden

const button = document.querySelector('#kaufen');
const rect = button.getBoundingClientRect();

// JSON.stringify ruft toJSON() automatisch auf
const payload = JSON.stringify({
  element: 'kaufen',
  position: rect,
  zeitpunkt: Date.now()
});

await fetch('/api/layout-log', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: payload
});

Rechteck in localStorage speichern und wiederherstellen

const box = document.querySelector('.panel');
localStorage.setItem('panelRect', JSON.stringify(box.getBoundingClientRect()));

// Später: aus den gespeicherten Daten wieder ein DOMRect erzeugen
const data = JSON.parse(localStorage.getItem('panelRect'));
const restored = DOMRect.fromRect(data);
console.log(restored instanceof DOMRect, restored.width === data.width);

true true

// Wichtig · Fallstricke

Momentaufnahme: Das zurückgegebene Objekt ist eine Kopie der Werte zum Zeitpunkt des Aufrufs. Spätere Layoutänderungen oder Änderungen an einem veränderbaren DOMRect werden nicht übernommen.
Kein String: Trotz des Namens liefert toJSON() ein Objekt, keinen JSON-Text. Für einen String JSON.stringify(rect) verwenden.
Spread/Object.keys: {...rect}, Object.assign({}, rect) und Object.entries(rect) ergeben leere Ergebnisse, da die Eigenschaften Prototyp-Getter sind – immer toJSON() nutzen.
Rückumwandlung: JSON.parse() liefert nur ein einfaches Objekt. Mit DOMRect.fromRect() bzw. DOMRectReadOnly.fromRect() lässt sich wieder ein echtes Rechteck erzeugen (dabei werden nur x, y, width, height berücksichtigt).
structuredClone: Für postMessage oder structuredClone() ist toJSON() nicht nötig – DOMRectReadOnly ist in modernen Browsern direkt klonbar.
Kompatibilität: In allen aktuellen Browsern verfügbar; sehr alte Browser (z. B. Internet Explorer) kennen DOMRectReadOnly und toJSON() nicht. In Node.js existiert die Klasse ohne DOM-Umgebung (z. B. jsdom) nicht.

Siehe auch

DOMRectReadOnly DOMRect DOMRectReadOnly.fromRect() Element.getBoundingClientRect() JSON.stringify() DOMPointReadOnly.toJSON() NotRestoredReasonDetails.toJSON()