Met trots kondigen we de nieuwe moveBefore() DOM API aan, beschikbaar in Chrome versie 133, die het gemakkelijker maakt om elementen in de DOM te verplaatsen zonder de status te verliezen. Blijf lezen om erachter te komen hoe u het in uw projecten kunt gebruiken!
Verliezende toestand tijdens DOM-mutaties
Gebruikt u de appendChild() API om nieuwe elementen in de DOM in te voegen? Velen doen dat ook, maar heb je ooit geprobeerd het aan te roepen (of insertBefore() , of welke andere invoeg-API dan ook) met een element dat al in de DOM staat? Als dat zo is, heb je je misschien niet gerealiseerd dat dit stilletjes werkt door eerst het element van de oude ouder te verwijderen en het opnieuw in de nieuwe in te voegen. Dat komt omdat het Document Object Model pas over de verwijder- en invoegprimitieven beschikt sinds de eerste DOM-standaardversie in 1998 werd geïntroduceerd. Telkens wanneer u denkt dat u iets in de DOM van de ene plaats naar de andere "verplaatst", verwijdert u in werkelijkheid iets uit de DOM. en onder de motorkap plaatsen .
Het feit dat een "verplaatsing" in werkelijkheid een "verwijderen en invoegen" is, heeft meestal geen invloed op de gebruikerservaring. Als u bijvoorbeeld een <p> in de DOM "verplaatst", hebben deze twee bewerkingen geen verstorende bijwerkingen, maar bij het verplaatsen van complexe knooppunten die belangrijke statuselementen bevatten, zoals <iframe> -elementen, elementen op volledig scherm, CSS-animaties, enzovoort on - de impliciete "verwijderings" -operatie reset allerlei soorten statussen.
Dit kan verrassend ontwrichtende bijwerkingen hebben
Je kunt zien welk soort status wordt gereset op onze demo-website met behoud van de status door te spelen met zetten in de DOM-boom. In het volgende voorbeeld ziet u hoe CSS-animaties en <iframe> -status worden gereset wanneer elementen van de ene bovenliggende container naar de andere worden verplaatst.
Deze beperking kan het bouwen van dynamische gebruikerservaringen moeilijk of zelfs onmogelijk maken. Gebruikers raken gefrustreerd en in de war wanneer de applicatiestatus op mysterieuze wijze wordt gereset, en auteurs van het JavaScript-framework worden hiervan het zwaarst getroffen door talloze uren te besteden aan het opnieuw ontwerpen van hun frontend-code rond dit probleem, het schrijven van complexe bibliotheken zoals MorphDOM of door het opstellen van bugrapporten die problemen benadrukken die ze kunnen oplossen. t repareren .
De nieuwe moveBefore() API
We probeerden dit probleem op te lossen door een nieuwe primitieve bewerking aan de DOM toe te voegen. Het wordt toepasselijk de primitief "move" genoemd en is beschikbaar voor ontwikkelaars via de nieuwe moveBefore() DOM API .
moveBefore() gebruikt dezelfde argumenten als insertBefore() , maar in plaats van knooppunten te verwijderen en opnieuw in te voegen wanneer ze al aan de DOM zijn gekoppeld, verplaatst deze nieuwe API het doelknooppunt atomair naar het nieuwe bovenliggende knooppunt zonder de meeste state te resetten . Hierdoor kunnen JavaScript-ontwikkelaars eindelijk dynamische ervaringen bouwen met verplaatsbare animaties, iframes, elementen op volledig scherm en meer. U kunt dit zelf uitproberen door de experimentele vlag chrome://flags/#atomic-move in te schakelen en onze demosite te bezoeken, of door versie 133 van Chrome te gebruiken na de release op 4 februari 2025.
Voorbeelden van gedrag dat JavaScript-auteurs met deze nieuwe primitief kunnen bereiken zijn:
- Behoud de afspeelstatus van een video terwijl een gebruiker door een website navigeert (ongeacht of de video wordt geleverd vanuit een
<video>of<iframe>-element). - Behoud de focus van een gebruikersinvoerveld terwijl dit in de DOM wordt verplaatst.
- Zorg ervoor dat animaties soepel eindigen wanneer nieuwe inhoud wordt toegevoegd aan of verwijderd uit de DOM.
- Hogere betrouwbaarheids-morphing-algoritmen voor het afstemmen van bestaande DOM's met nieuwe inhoud.
- Houd modale dialogen, popovers en volledig schermelementen open.
We werken er hard aan om deze API met andere browsers op het webplatform te introduceren, en we zijn blij dat we hem binnenkort in handen van ontwikkelaars kunnen krijgen, waarmee we kunnen voldoen aan jarenlange verzoeken van ontwikkelaars en een aanzienlijk gat in het webplatform kunnen opvullen.
Laat ons zoals altijd weten wat je ervan vindt via Twitter of de reacties hieronder, en stuur bugs naar crbug.com/new .