हमें यह बताते हुए खुशी हो रही है कि Chrome के वर्शन 133 में नया moveBefore() DOM API उपलब्ध है. इसकी मदद से, एलिमेंट की स्थिति में बदलाव किए बिना, उन्हें DOM में आसानी से एक से दूसरी जगह ले जाया जा सकता है. इसे अपने प्रोजेक्ट में इस्तेमाल करने का तरीका जानने के लिए, पढ़ना जारी रखें!
डीओएम में बदलाव होने के दौरान, स्टेटस का हट जाना
क्या डीओएम में नए एलिमेंट डालने के लिए, appendChild() एपीआई का इस्तेमाल किया जाता है? कई लोग ऐसा करते हैं, लेकिन क्या आपने कभी इसे, insertBefore() या किसी अन्य इंसर्शन एपीआई को, पहले से ही डीओएम में मौजूद किसी एलिमेंट के साथ कॉल करने की कोशिश की है? अगर ऐसा है, तो हो सकता है कि आपको यह पता न हो कि यह प्रोसेस, एलिमेंट को उसके पुराने पैरंट से हटाकर, नए पैरंट में फिर से डालकर काम करती है. इसकी वजह यह है कि Document Object Model में, 1998 में DOM स्टैंडर्ड ड्राफ़्ट के पेश होने के बाद से, सिर्फ़ remove और insert प्राइमिटिव हैं. जब भी आपको लगता है कि आपने डीओएम में किसी एलिमेंट को एक जगह से दूसरी जगह "मूव" किया है, तो असल में आपने उसे हटाया और डाला है.
आम तौर पर, "मूव" करने की प्रोसेस में, "हटाएं और डालें" करने की प्रोसेस का इस्तेमाल किया जाता है. हालांकि, इससे उपयोगकर्ता अनुभव पर कोई असर नहीं पड़ता. उदाहरण के लिए, जब किसी <p> को डीओएम में "एक जगह से दूसरी जगह" ले जाया जाता है, तो इन दोनों कार्रवाइयों से कोई असर नहीं पड़ता. हालांकि, <iframe> एलिमेंट, फ़ुलस्क्रीन में दिखने वाले एलिमेंट, सीएसएस ऐनिमेशन वगैरह जैसे अहम स्टेटस वाले जटिल नोड को एक जगह से दूसरी जगह ले जाने पर, "हटाने" की कार्रवाई से सभी तरह के स्टेटस रीसेट हो जाते हैं.
इससे, अचानक से रुकावट पैदा करने वाले साइड इफ़ेक्ट हो सकते हैं
स्टेट को बनाए रखने वाली डेमो वेबसाइट में, DOM ट्री में बदलाव करके, यह देखा जा सकता है कि किस तरह की स्थिति रीसेट हो जाती है. इस उदाहरण में, एलिमेंट को एक पैरंट कंटेनर से दूसरे में ले जाने पर, सीएसएस ऐनिमेशन और <iframe> स्टेटस रीसेट होने की जानकारी दी गई है.
इस सीमा की वजह से, उपयोगकर्ताओं को डाइनैमिक अनुभव देना मुश्किल या असंभव हो सकता है. जब ऐप्लिकेशन की स्थिति अचानक से रीसेट हो जाती है, तो उपयोगकर्ता परेशान हो जाते हैं और उन्हें भ्रम की स्थिति का सामना करना पड़ता है. इस समस्या की वजह से, JavaScript फ़्रेमवर्क के लेखकों को भी परेशानी होती है. वे इस समस्या को ठीक करने के लिए, अपने फ़्रंटएंड कोड को फिर से बनाने में कई घंटे बिताते हैं. इसके अलावा, वे MorphDOM जैसी जटिल लाइब्रेरी बनाते हैं या गड़बड़ी की ऐसी रिपोर्ट तैयार करते हैं जिनमें ऐसी समस्याएं हाइलाइट होती हैं जिन्हें ठीक नहीं किया जा सकता.
नया moveBefore() एपीआई
हमने इस समस्या को ठीक करने के लिए, DOM में एक नया प्राइमिटिव ऑपरेशन जोड़ा है. इसे सही तरीके से "move" प्राइमिटिव कहा जाता है. यह डेवलपर के लिए, नए moveBefore() DOM API के ज़रिए उपलब्ध है.
moveBefore(), insertBefore() जैसे ही आर्ग्युमेंट लेता है. हालांकि, जब एलिमेंट पहले से ही DOM से जुड़े होते हैं, तो उन्हें हटाने और फिर से डालने के बजाय, यह नया एपीआई टारगेट एलिमेंट को नए पैरंट में एक साथ ले जाता है. ऐसा ज़्यादातर स्टेटस को रीसेट किए बिना किया जाता है. इससे JavaScript डेवलपर, मूव किए जा सकने वाले ऐनिमेशन, iframes, फ़ुलस्क्रीन एलिमेंट वगैरह की मदद से डाइनैमिक अनुभव बना सकते हैं. chrome://flags/#atomic-move एक्सपेरिमेंटल फ़्लैग को चालू करके और हमारी डेमो साइट पर जाकर, इसे खुद आज़माया जा सकता है. इसके अलावा, 4 फ़रवरी, 2025 को रिलीज़ होने के बाद, Chrome के वर्शन 133 का इस्तेमाल करके भी इसे आज़माया जा सकता है.
इस नए प्राइमिटिव की मदद से, JavaScript के लेखक ये काम कर पाएंगे:
- जब कोई उपयोगकर्ता किसी वेबसाइट पर नेविगेट करता है, तो वीडियो की चलने की स्थिति को बनाए रखना. भले ही, वीडियो
<video>या<iframe>एलिमेंट से दिया गया हो. - डीओएम में उपयोगकर्ता इनपुट फ़ील्ड को मूव करने पर, उस पर फ़ोकस बनाए रखना.
- DOM में नया कॉन्टेंट जोड़ने या हटाने पर, ऐनिमेशन को आसानी से पूरा होने दें.
- मौजूदा डीओएम को नए कॉन्टेंट के साथ मिलाने के लिए, बेहतर फ़िडेलिटी वाले मॉर्फ़िंग एल्गोरिदम.
- मॉडल डायलॉग, पॉपओवर, और फ़ुलस्क्रीन एलिमेंट खुले रखें.
हम इस एपीआई को वेब प्लैटफ़ॉर्म पर, दूसरे ब्राउज़र के साथ उपलब्ध कराने के लिए कड़ी मेहनत कर रहे हैं. हमें यह बताते हुए खुशी हो रही है कि यह एपीआई जल्द ही डेवलपर के लिए उपलब्ध हो जाएगा. इससे डेवलपर के कई सालों के अनुरोध पूरे होंगे और वेब प्लैटफ़ॉर्म में एक अहम कमी को पूरा किया जा सकेगा.
हमेशा की तरह, Twitter पर हमें अपनी राय दें या यहां दी गई टिप्पणियों में बताएं. साथ ही, crbug.com/new पर गड़बड़ियां सबमिट करें.