เรายินดีที่จะประกาศ moveBefore() DOM API ใหม่ที่มีให้ใช้งานใน Chrome เวอร์ชัน 133 ซึ่งช่วยให้ย้ายองค์ประกอบใน DOM ได้ง่ายขึ้นโดยไม่สูญเสียสถานะ อ่านต่อเพื่อดูวิธีใช้ฟีเจอร์นี้ในโปรเจ็กต์
สถานะหายไประหว่างการดัดแปลง DOM
คุณใช้ appendChild() API เพื่อแทรกองค์ประกอบใหม่ลงใน DOM หรือไม่ หลายคนก็เจอปัญหานี้เช่นกัน แต่คุณเคยลองเรียกใช้ insertBefore() หรือ Insertion API อื่นๆ กับองค์ประกอบที่อยู่ใน DOM อยู่แล้วไหม หากเป็นเช่นนั้น คุณอาจไม่ทราบว่าการดำเนินการนี้ทำงานอย่างเงียบๆ โดยนำองค์ประกอบออกจากองค์ประกอบหลักเดิมก่อน แล้วใส่กลับเข้าไปในองค์ประกอบหลักใหม่ นั่นเป็นเพราะ Document Object Model มีเพียงการดำเนินการแบบพื้นฐานของการนำออกและแทรกตั้งแต่ที่มีการเปิดตัวฉบับร่างมาตรฐาน DOM ฉบับแรกในปี 1998 เมื่อใดก็ตามที่คุณคิดว่า "ย้าย" องค์ประกอบใน DOM จากตำแหน่งหนึ่งไปยังอีกตำแหน่งหนึ่ง จริงๆ แล้วคุณกำลังนำออกและแทรกอยู่เบื้องหลัง
ความจริงที่ว่า "ย้าย" นั้นคือ "นำออกและแทรก" มักจะไม่ส่งผลต่อประสบการณ์ของผู้ใช้ ตัวอย่างเช่น เมื่อ "ย้าย" <p> ใน DOM การดำเนินการ 2 รายการนี้จะไม่มีผลข้างเคียงที่รบกวน แต่เมื่อย้ายโหนดที่ซับซ้อนซึ่งเก็บสถานะที่สำคัญ เช่น องค์ประกอบ <iframe>, องค์ประกอบแบบเต็มหน้าจอ, ภาพเคลื่อนไหว CSS และอื่นๆ การดำเนินการ "การนำออก" โดยนัยจะรีเซ็ตสถานะทุกประเภท
ซึ่งอาจทำให้เกิดผลข้างเคียงที่ก่อกวนอย่างน่าประหลาดใจ
คุณสามารถดูประเภทสถานะที่รีเซ็ตได้ในเว็บไซต์เดโมที่เก็บสถานะไว้โดยลองย้ายข้อมูลในต้นไม้ DOM ตัวอย่างต่อไปนี้แสดงภาพเคลื่อนไหว CSS และสถานะ <iframe> ที่จะรีเซ็ตเมื่อย้ายองค์ประกอบจากคอนเทนเนอร์หลักหนึ่งไปยังอีกคอนเทนเนอร์หนึ่ง
ข้อจํากัดนี้อาจทําให้การสร้างประสบการณ์ของผู้ใช้แบบไดนามิกเป็นเรื่องยากหรือเป็นไปไม่ได้ ผู้ใช้จะรู้สึกหงุดหงิดและงงงวยเมื่อสถานะแอปพลิเคชันรีเซ็ตอย่างลึกลับ และนักเขียนเฟรมเวิร์ก JavaScript จะเป็นผู้รับผลกระทบมากที่สุดจากปัญหานี้ โดยต้องใช้เวลานับไม่ถ้วนในการปรับโครงสร้างโค้ดส่วนหน้าใหม่เพื่อแก้ไขปัญหานี้ เขียนไลบรารีที่ซับซ้อน เช่น MorphDOM หรือต้องจัดการกับรายงานข้อบกพร่องที่ไฮไลต์ปัญหาที่แก้ไขไม่ได้
moveBefore() API ใหม่
เราจึงพยายามแก้ไขปัญหานี้ด้วยการเพิ่มการดำเนินการพื้นฐานใหม่ลงใน DOM การดำเนินการนี้เรียกว่า "move" พรีเมียม และแสดงให้นักพัฒนาแอปเห็นผ่าน moveBefore() DOM API ใหม่
moveBefore() ใช้อาร์กิวเมนต์เดียวกับ insertBefore() แต่แทนที่จะนําโหนดออกและแทรกโหนดอีกครั้งเมื่อแนบกับ DOM อยู่แล้ว API ใหม่นี้จะย้ายโหนดเป้าหมายไปยังโหนดหลักใหม่โดยไม่ต้องรีเซ็ตสถานะส่วนใหญ่ ในที่สุดนักพัฒนา JavaScript ก็สามารถสร้างประสบการณ์การใช้งานแบบไดนามิกด้วยภาพเคลื่อนไหวที่เคลื่อนย้ายได้, iframe, องค์ประกอบแบบเต็มหน้าจอ และอื่นๆ คุณลองใช้ฟีเจอร์นี้ได้ด้วยการเปิดใช้ Flag ทดลอง chrome://flags/#atomic-move และไปที่เว็บไซต์เดโม หรือใช้ Chrome เวอร์ชัน 133 หลังจากเปิดตัวในวันที่ 4 กุมภาพันธ์ 2025
ตัวอย่างลักษณะการทำงานที่ผู้เขียน JavaScript สามารถทำได้ด้วยพรอมต์แบบใหม่นี้ ได้แก่
- รักษาสถานะการเล่นของวิดีโอขณะที่ผู้ใช้ไปยังส่วนต่างๆ ของเว็บไซต์ (ไม่ว่าจะแสดงวิดีโอจากองค์ประกอบ
<video>หรือ<iframe>) - รักษาโฟกัสของช่องป้อนข้อมูลของผู้ใช้ขณะที่ย้ายใน DOM
- อนุญาตให้ภาพเคลื่อนไหวเล่นจนจบอย่างราบรื่นเมื่อมีการเพิ่มหรือนำเนื้อหาใหม่ออกจาก DOM
- อัลกอริทึมการเปลี่ยนรูปแบบที่เที่ยงตรงยิ่งขึ้นสำหรับการปรับยอด DOM ที่มีอยู่ให้สอดคล้องกับเนื้อหาใหม่
- เก็บกล่องโต้ตอบแบบโมดัล ป๊อปอัป และองค์ประกอบแบบเต็มหน้าจอไว้
เรากําลังพยายามอย่างเต็มที่เพื่อเปิดตัว API นี้ในแพลตฟอร์มเว็บร่วมกับเบราว์เซอร์อื่นๆ และยินดีที่จะได้ส่งมอบ API นี้ให้นักพัฒนาซอฟต์แวร์ในเร็วๆ นี้ เพื่อตอบสนองคําขอของนักพัฒนาซอฟต์แวร์มาหลายปีและเติมเต็มช่องโหว่ที่สําคัญในแพลตฟอร์มเว็บ
และเช่นเคย โปรดแจ้งให้เราทราบว่าคุณคิดอย่างไรผ่าน Twitter หรือแสดงความคิดเห็นด้านล่าง และส่งข้อบกพร่องไปยัง crbug.com/new