אנחנו שמחים להודיע על ממשק ה-API החדש של DOM moveBefore(), שזמין בגרסת Chrome 133. בעזרת ה-API הזה קל יותר להעביר רכיבים ב-DOM בלי לאבד את המצב שלהם. בהמשך מוסבר איך אפשר להשתמש בו בפרויקטים.
אובדן המצב במהלך מוטציות ב-DOM
האם אתם משתמשים ב-API appendChild() כדי להוסיף רכיבים חדשים ל-DOM? כך עושים רבים, אבל האם ניסיתם פעם להפעיל אותו – או את insertBefore(), או כל ממשק API אחר להוספה – עם רכיב שכבר נמצא ב-DOM? אם כן, יכול להיות שלא הבנתם שהפעולה הזו מתבצעת בשקט, על ידי הסרת הרכיב מההורה הישן והוספה מחדש להורה החדש. הסיבה לכך היא שב-Document Object Model יש רק את הפונקציות הבסיסיות remove ו-insert מאז שנוסח טיוטת התקן הראשון של DOM בשנת 1998. בכל פעם שאתם חושבים שאתם 'מעבירים' משהו ב-DOM ממקום אחד למקום אחר, אתם בעצם מסירים ומוסיפים מתחת למכסה המנוע.
בדרך כלל אין השפעה על חוויית המשתמש מהעובדה ש'העברה' היא למעשה 'הסרה והוספה'. לדוגמה, כש"מעבירים" <p> ב-DOM, לשתי הפעולות האלה אין תופעות לוואי מפריעות, אבל כשמעבירים צמתים מורכבים שמכילים מצב משמעותי – כמו רכיבי <p>, רכיבים במסך מלא, אנימציות CSS וכו' – פעולת ההסרה המשתמעת מאפסת כל מיני מצבים.<iframe>
לכך יכולות להיות השפעות צדדיות מפריעות באופן מפתיע
כדי לראות את סוג המצב שמתאפס באתר הדגמה לשמירת מצב, אפשר להתנסות בתנועות בעץ ה-DOM. בדוגמה הבאה מוצגות אנימציות CSS והחזרת המצב של <iframe> למצב ברירת המחדל כשעוברים רכיבים ממאגר הורה אחד למאגר הורה אחר.
המגבלה הזו עלולה להקשות על בניית חוויות משתמש דינמיות, או אפילו להפוך אותה לבלתי אפשרית. משתמשים מתוסכלים ומבולבלים כשמצב האפליקציה מתאפס באופן מסתורי, וכותבי מסגרות JavaScript נושאים בעיקר הנטל הזה. הם מבזבזים שעות רבות בתכנון מחדש של קוד הקצה הקדמי שלהם סביב הבעיה הזו, כותבים ספריות מורכבות כמו MorphDOM או מטפלים בדוחות באגים שמדגישים בעיות שהם לא יכולים לפתור.
ה-API החדש של moveBefore()
כדי לפתור את הבעיה הזו, הוספנו ל-DOM פעולה פרימיטיבית חדשה. הוא נקרא 'move' (העברה) והוא זמין למפתחים דרך moveBefore() DOM API החדש.
moveBefore() מקבל את אותם ארגומנטים כמו insertBefore(), אבל במקום להסיר צמתים ולהוסיף אותם מחדש כשהם כבר מחוברים ל-DOM, ה-API החדש מקדם באופן אטומי את צומת היעד להורה החדש בלי לאפס את רוב המצבים. כך, מפתחי JavaScript יכולים סוף סוף ליצור חוויות דינמיות עם הנפשות שניתן להזיז, iframe, רכיבים במסך מלא ועוד. אתם יכולים לנסות את זה בעצמכם על ידי הפעלת הדגל הניסיוני chrome://flags/#atomic-move וביקור באתר הדגמה שלנו, או על ידי שימוש בגרסה 133 של Chrome אחרי שהיא תפורסם ב-4 בפברואר 2025.
דוגמאות להתנהגויות שמאפשרת האפשרות החדשה הזו למפתחי JavaScript להשיג:
- לשמור על מצב ההפעלה של סרטון בזמן שהמשתמש מנווט באתר (בין שהסרטון מסופק מרכיב
<video>ובין שהוא מסופק מרכיב<iframe>). - שמירה על המיקוד של שדה קלט של משתמש בזמן שהוא מועבר ב-DOM.
- מאפשרים לאנימציות להסתיים בצורה חלקה כשתוכן חדש מתווסף או מוסר מ-DOM.
- אלגוריתמים משופרים של טרנספורמציה (morphing) לצורך התאמה בין DOMs קיימים לתוכן חדש.
- משאירים פתוחות תיבות דו-שיח מודאליות, חלונות קופצים ורכיבים במסך מלא.
אנחנו עובדים קשה כדי להוסיף את ממשק ה-API הזה לפלטפורמת האינטרנט בדפדפנים אחרים, ואנחנו שמחים להעביר אותו בקרוב לידי המפתחים. כך נוכל לענות על בקשות של מפתחים שנשלחו במשך שנים ולסגור פער משמעותי בפלטפורמת האינטרנט.
כמו תמיד, נשמח לשמוע את דעתכם ב-Twitter או בתגובות בהמשך, ולקבל דיווחים על באגים בכתובת crbug.com/new.