Nos complace anunciar la nueva API de DOM moveBefore(), disponible en la versión 133 de Chrome, que facilita el movimiento de elementos en el DOM sin perder el estado. Sigue leyendo para descubrir cómo puedes usarlo en tus proyectos.
Pérdida de estado durante las mutaciones del DOM
¿Usas la API de appendChild() para insertar elementos nuevos en el DOM? Muchos lo hacen, pero ¿alguna vez intentaste llamarlo (o a insertBefore(), o a cualquier otra API de inserción) con un elemento que ya está en el DOM? Si es así, es posible que no hayas notado que esto funciona de forma silenciosa, ya que primero quitas el elemento de su elemento superior anterior y lo vuelves a insertar en el nuevo. Esto se debe a que el modelo de objetos de documentos solo tiene las primitivas de quitar y agregar desde que se presentó el primer borrador del estándar DOM en 1998. Cada vez que crees que estás “moviendo” algo en el DOM de un lugar a otro, en realidad estás quitando y agregando elementos.
El hecho de que un "mover" sea en realidad un "quitar y agregar" no suele tener ningún impacto en la experiencia del usuario. Por ejemplo, cuando se "mueve" un <p> en el DOM, estas dos operaciones no tienen efectos secundarios disruptivos, pero cuando se mueven nodos complejos que contienen un estado significativo, como elementos <iframe>, elementos en pantalla completa, animaciones CSS, etcétera, la operación de "eliminación" implícita restablece todo tipo de estado.
Esto puede tener efectos secundarios sorprendentemente disruptivos.
Puedes ver el tipo de estado que se restablece en nuestro sitio web de demostración que preserva el estado si juegas con los movimientos en el árbol DOM. En el siguiente ejemplo, se muestran las animaciones de CSS y el restablecimiento del estado <iframe> cuando se mueven elementos de un contenedor superior a otro.
Esta limitación puede dificultar o incluso imposibilitar la creación de experiencias del usuario dinámicas. Los usuarios se sienten frustrados y confundidos cuando el estado de la aplicación se restablece de forma misteriosa, y los autores de frameworks de JavaScript son los que más sufren por este problema, ya que pasan innumerables horas reestructurando su código de frontend en torno a este problema, creando bibliotecas complejas como MorphDOM o enviando informes de errores que destacan problemas que no pueden solucionar.
La nueva API de moveBefore()
Para solucionar este problema, agregamos una nueva operación primitiva al DOM. Se llama apropiadamente "primitive de movimiento" y se expone a los desarrolladores a través de la nueva API de DOM moveBefore().
moveBefore() toma los mismos argumentos que insertBefore(), pero en lugar de quitar y volver a insertar nodos cuando ya están conectados al DOM, esta nueva API mueve de forma atómica el nodo de destino al nuevo elemento superior sin restablecer la mayor parte del estado. Esto permite que los desarrolladores de JavaScript creen experiencias dinámicas con animaciones móviles, iframes, elementos de pantalla completa y mucho más. Para probarlo, habilita la marca experimental chrome://flags/#atomic-move y visita nuestro sitio de demostración, o bien usa la versión 133 de Chrome después de su lanzamiento el 4 de febrero de 2025.
Estos son algunos ejemplos de comportamientos que esta nueva primitiva permitirá a los autores de JavaScript lograr:
- Preserva el estado de reproducción de un video mientras un usuario navega por un sitio web (ya sea que el video se proporcione desde un elemento
<video>o<iframe>). - Conserva el enfoque de un campo de entrada del usuario a medida que se mueve en el DOM.
- Permite que las animaciones terminen sin problemas a medida que se agrega o quita contenido nuevo del DOM.
- Algoritmos de transformación de mayor fidelidad para conciliar los DOM existentes con el contenido nuevo
- Mantén abiertos los diálogos modales, los elementos emergentes y los de pantalla completa.
Estamos trabajando arduamente para incorporar esta API a la plataforma web con otros navegadores y nos complace que pronto esté disponible para los desarrolladores, lo que satisfará años de solicitudes de los desarrolladores y cubrirá una brecha significativa en la plataforma web.
Como siempre, comunícate con nosotros a través de Twitter o en los comentarios a continuación, y envía errores a crbug.com/new.