Nous sommes ravis de vous annoncer la nouvelle API DOM moveBefore(), disponible dans la version 133 de Chrome. Elle permet de déplacer plus facilement des éléments dans le DOM sans perdre l'état. Poursuivez votre lecture pour découvrir comment l'utiliser dans vos projets.
Perte d'état lors des mutations DOM
Utilisez-vous l'API appendChild() pour insérer de nouveaux éléments dans le DOM ? C'est le cas de beaucoup d'entre vous, mais avez-vous déjà essayé de l'appeler (ou insertBefore(), ou toute autre API d'insertion d'ailleurs) avec un élément qui se trouve déjà dans le DOM ? Si c'est le cas, vous n'avez peut-être pas réalisé que cette opération fonctionne en supprimant d'abord l'élément de son ancien parent, puis en le réinsérant dans le nouveau. En effet, le Document Object Model ne comporte que les primitives de suppression et d'insertion depuis la première ébauche de la norme DOM en 1998. Chaque fois que vous pensez "déplacer" quelque chose dans le DOM d'un endroit à un autre, vous supprimez et insérez en réalité.
Le fait qu'une "mouvement" soit en réalité une "suppression et insertion" n'a généralement aucun impact sur l'expérience utilisateur. Par exemple, lorsque vous "déplacez" un <p> dans le DOM, ces deux opérations n'ont pas d'effets secondaires perturbateurs. Toutefois, lorsque vous déplacez des nœuds complexes qui contiennent un état important (comme des éléments <iframe>, des éléments en plein écran, des animations CSS, etc.), l'opération de "suppression" implicite réinitialise toutes sortes d'états.
Cela peut avoir des effets secondaires surprenants.
Vous pouvez voir le type d'état qui est réinitialisé dans notre site Web de démonstration préservant l'état en essayant des mouvements dans l'arborescence DOM. L'exemple suivant montre comment les animations CSS et l'état <iframe> sont réinitialisés lorsque vous déplacez des éléments d'un conteneur parent vers un autre.
Cette limitation peut rendre la création d'expériences utilisateur dynamiques difficile, voire impossible. Les utilisateurs sont frustrés et confus lorsque l'état de l'application est mystérieusement réinitialisé. Les auteurs de frameworks JavaScript en font les frais en passant d'innombrables heures à réorganiser leur code front-end autour de ce problème, à créer des bibliothèques complexes comme MorphDOM ou à traiter des rapports de bugs qui soulignent des problèmes qu'ils ne peuvent pas résoudre.
Nouvelle API moveBefore()
Nous avons cherché à résoudre ce problème en ajoutant une nouvelle opération primitive au DOM. Elle est appelée "primitive de déplacement" et est exposée aux développeurs via la nouvelle API DOM moveBefore().
moveBefore() accepte les mêmes arguments que insertBefore(), mais au lieu de supprimer et de réinsérer des nœuds lorsqu'ils sont déjà associés au DOM, cette nouvelle API déplace de manière atomique le nœud cible dans le nouveau parent sans réinitialiser la plupart des états. Les développeurs JavaScript peuvent ainsi créer des expériences dynamiques avec des animations mobiles, des iFrames, des éléments en plein écran, etc. Vous pouvez tester cette fonctionnalité vous-même en activant le flag expérimental chrome://flags/#atomic-move et en accédant à notre site de démonstration, ou en utilisant la version 133 de Chrome après sa sortie le 4 février 2025.
Voici quelques exemples de comportements que cette nouvelle primitive permettra aux auteurs JavaScript d'obtenir:
- Maintenez l'état de lecture d'une vidéo lorsque l'utilisateur navigue sur un site Web (que la vidéo soit fournie à partir d'un élément
<video>ou<iframe>). - Maintenez le focus sur un champ de saisie utilisateur lorsqu'il est déplacé dans le DOM.
- Permet aux animations de se terminer correctement lorsque du contenu est ajouté ou supprimé du DOM.
- Algorithmes de morphing plus fidèles pour concilier les DOM existants avec le nouveau contenu.
- Laissez les boîtes de dialogue modales, les pop-ups et les éléments en plein écran ouverts.
Nous mettons tout en œuvre pour intégrer cette API à la plate-forme Web avec d'autres navigateurs. Nous sommes ravis de la mettre bientôt à la disposition des développeurs, ce qui répondra à leurs demandes depuis des années et comblera une lacune importante de la plate-forme Web.
Comme toujours, n'hésitez pas à nous faire part de vos commentaires sur Twitter ou dans les commentaires ci-dessous, et signalez les bugs sur crbug.com/new.