Wir freuen uns, die neue moveBefore() DOM API anzukündigen, die in Chrome-Version 133 verfügbar ist. Mit dieser API können Sie Elemente im DOM einfacher verschieben, ohne den Status zu verlieren. Lies weiter, um zu erfahren, wie du sie in deinen Projekten einsetzen kannst.
Verlust des Status bei DOM-Mutationen
Verwenden Sie die appendChild() API, um neue Elemente in das DOM einzufügen? Das tun viele. Aber haben Sie schon einmal versucht, sie – oder insertBefore() oder eine andere Einfüge-API – mit einem Element aufzurufen, das sich bereits im DOM befindet? In diesem Fall haben Sie möglicherweise nicht bemerkt, dass das Element zuerst aus dem alten übergeordneten Element entfernt und dann in das neue eingefügt wird. Das liegt daran, dass das Document Object Model erst seit der Einführung des ersten DOM-Standardentwurfs im Jahr 1998 die Primitiven „remove“ und „insert“ hat. Wenn Sie glauben, etwas im DOM von einem Ort an einen anderen zu verschieben, wird es tatsächlich entfernt und eingefügt.
Die Tatsache, dass ein „Verschieben“ in Wirklichkeit ein „Entfernen und Einfügen“ ist, hat in der Regel keine Auswirkungen auf die Nutzerfreundlichkeit. Wenn Sie beispielsweise ein <p> im DOM „verschieben“, haben diese beiden Vorgänge keine störenden Nebenwirkungen. Wenn Sie jedoch komplexe Knoten mit einem wichtigen Status verschieben, z. B. <iframe>-Elemente, Elemente im Vollbildmodus, CSS-Animationen usw., werden durch den impliziten Vorgang „Entfernen“ alle Status zurückgesetzt.
Das kann überraschende Auswirkungen haben.
Auf unserer Demowebsite mit Statuserhaltung können Sie sehen, welche Art von Status zurückgesetzt wird, indem Sie im DOM-Baum herumspielen. Im folgenden Beispiel werden CSS-Animationen und das Zurücksetzen des <iframe>-Status beim Verschieben von Elementen von einem übergeordneten Container in einen anderen gezeigt.
Diese Einschränkung kann die Erstellung dynamischer Nutzererfahrungen erschweren oder sogar unmöglich machen. Nutzer sind frustriert und verwirrt, wenn der Anwendungsstatus aus unerklärlichen Gründen zurückgesetzt wird. Die Entwickler von JavaScript-Frameworks tragen die Hauptlast davon, da sie unzählige Stunden damit verbringen, ihren Frontend-Code aufgrund dieses Problems neu zu strukturieren, komplexe Bibliotheken wie MorphDOM zu erstellen oder Fehlerberichte zu bearbeiten, in denen Probleme beschrieben werden, die sie nicht beheben können.
Die neue moveBefore() API
Wir haben uns daher entschieden, dem DOM einen neuen primitiven Vorgang hinzuzufügen, um dieses Problem zu beheben. Es wird treffend als „move“-Primitive bezeichnet und Entwicklern über die neue moveBefore() DOM API zur Verfügung gestellt.
moveBefore() nimmt dieselben Argumente wie insertBefore() an. Anstatt Knoten zu entfernen und wieder einzufügen, wenn sie bereits mit dem DOM verbunden sind, verschiebt diese neue API den Zielknoten atomisch in das neue übergeordnete Element, ohne den Großteil des Zustands zurückzusetzen. So können JavaScript-Entwickler endlich dynamische Websites mit beweglichen Animationen, Iframes, Vollbildelementen und mehr erstellen. Sie können das selbst ausprobieren, indem Sie das experimentelle Flag chrome://flags/#atomic-move aktivieren und unsere Demo-Website besuchen oder Version 133 von Chrome verwenden, sobald sie am 4. Februar 2025 veröffentlicht wird.
Beispiele für Verhaltensweisen, die JavaScript-Entwickler mit diesem neuen Primitiven erzielen können:
- Der Wiedergabestatus eines Videos wird beibehalten, während sich ein Nutzer auf einer Website bewegt, unabhängig davon, ob das Video über ein
<video>- oder<iframe>-Element bereitgestellt wird. - Der Fokus eines Eingabefelds für Nutzer bleibt erhalten, wenn es im DOM verschoben wird.
- Sorgen Sie dafür, dass Animationen reibungslos ablaufen, wenn dem DOM neue Inhalte hinzugefügt oder daraus entfernt werden.
- Morphing-Algorithmen mit höherer Wiedergabetreue zur Abgleichung vorhandener DOMs mit neuen Inhalten
- Modale Dialogfelder, Pop-ups und Vollbildelemente sollten geöffnet bleiben.
Wir arbeiten intensiv daran, diese API in der Webplattform mit anderen Browsern einzuführen. Wir freuen uns, sie bald Entwicklern zur Verfügung stellen zu können, um langjährige Anfragen von Entwicklern zu erfüllen und eine erhebliche Lücke in der Webplattform zu schließen.
Wie immer freuen wir uns über Feedback auf Twitter oder in den Kommentaren unten. Fehler können Sie unter crbug.com/new melden.