编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

2025年 Chrome 和 React 双双宣布支持 moveBefore() ?

wxchong 2025-03-13 21:13:01 开源技术 15 ℃ 0 评论

1. 传统 DOM 操作丢失元素状态

自 1998 年推出第一个 DOM 标准草案以来,文档对象模型(DOM)就只有移除和插入原语。因此,每当开发者将 DOM 中的某个元素从一个地方 “移动” 到另一个地方时,实际上是在后台进行移除和插入操作。例如,典型的 appendChild() 或 insertBefore() API 都是先从旧父元素中移除元素,然后再将其重新插入到新元素。

因此,所谓的 “移动” 操作实际上是在 “移除和插入”,而这通常不会影响用户体验。例如,在 DOM 中 “移动”

时,这两个操作不会产生任何破坏性副作用,但在移动保存重要状态的复杂节点,例如: