Studio एडिटर: DOM ऑर्डर के साथ काम करना
डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) से पता चलता है कि साइट के पेज किस तरह स्ट्रक्चर किए गए हैं। यह एलिमेंट्स की टैबिंग और लोडिंग का ऑर्डर तय करता है। साइट का DOM ऑर्डर व्यवस्थित करने से उसकी एक्सेसिबिलिटी और परफ़ॉर्मेंस बेहतर हो सकती है और विज़िटर्स को बेहतर अनुभव मिलता है।
जानकारी के लिए:
किसी साइट पर स्टैक्स और फ्लेक्सबॉक्स जैसे ज्यादा कॉम्प्लेक्स लेआउट टूल्स इस्तेमाल करते समय, एलिमेंट्स को DOM ऑर्डर के हिसाब से व्यवस्थित करना खास तौर पर जरूरी है।
DOM ऑर्डर क्यों जरूरी है
DOM ऑर्डर तय करता है कि किसी पेज पर एलिमेंट्स किस क्रम में लोड और रीड होंगे और उनकी टैबिंग किस क्रम में होगी। इसका असर साइट की इन चीजों पर पड़ सकता है:
- एक्सेसिबिलिटी: कुछ विज़िटर्स साइट पर नेविगेट करने के लिए स्क्रीन रीडर और/या Tab की जैसे असिस्टिव टेक्नोलॉजी का इस्तेमाल कर सकते हैं। साइट का DOM तय करता है कि स्क्रीन रीडर उसे किस क्रम में पढ़ेंगे और टैबिंग किस क्रम में होगी। DOM और एक्सेसिबिलिटी के बारे में ज्यादा जानें।
- परफ़ॉर्मेंस: DOM तय करता है कि साइट पर एलिमेंट्स किस क्रम में लोड होंगे। इसलिए, DOM ऑर्डर को एलिमेंट्स के विज़ुअल ऑर्डर से मैच करने पर लोडिंग का अनुभव ज्यादा व्यवस्थित होता है। DOM और परफ़ॉर्मेंस के बारे में ज्यादा जानें।
- SEO रैंकिंग: एक व्यवस्थित और सही स्ट्रक्चर से एक्सेसिबिलिटी और साइट लोडिंग बेहतर हो सकती है। इससे साइट की SEO रैंकिंग भी बढ़ सकती है।
इसलिए, एक व्यवस्थित DOM ऑर्डर जरूरी है, क्योंकि इससे साइट विज़िटर्स को बेहतर अनुभव मिलता है। उदाहरण के लिए, साइट मेन्यू सबसे पहले होना चाहिए। इसके बाद शीर्षलेख के बाकी एलिमेंट्स, फिर पेज का शीर्षक, पेज का कंटेंट वगैरह होने चाहिए।
ऑटो DOM ऑर्डर
ऑटोमैटिक (ऑटो) DOM, पेज पर एलिमेंट्स के विज़ुअल ऑर्डर पर आधारित होता है—बाएं से दाएं और ऊपर से नीचे। एलिमेंट्स को जोड़ने, संरेखित करने और उनका साइज बदलने पर DOM ऑर्डर अपने-आप फिर से व्यवस्थित हो जाता है। इससे काम करते समय वह ऑप्टिमाइज्ड रहता है।
ऑटो DOM को बंद करना
अगर आपको किसी साइट पर काम करते समय उसके DOM ऑर्डर में कोई समस्या दिखती है, तो आप इसे पूरी साइट के लिए बंद कर सकते हैं। अगर समस्या सिर्फ कुछ एलिमेंट्स में है, तो आप इसे अलग-अलग अनुभागों और कंटेनर्स के साथ-साथ किसी अनुभाग की ग्रिड सेल्स के लिए भी बंद कर सकते हैं।
ऑटो DOM को बंद करने का तरीका जानने के लिए, कोई विकल्प चुनें:
पूरी साइट
अनुभाग और कंटेनर्स
किसी अनुभाग में ग्रिड सेल्स
स्टिकी एलिमेंट और सेक्शन के साथ काम कर रहे हैं?
एलिमेंट का DOM ऑर्डर मैन्युअल रूप से बदलना
ऑटो DOM ऑर्डर बंद करने के बाद, आप इसे मैन्युअल रूप से बदल सकते हैं, ताकि यह एलिमेंट के विजुअल ऑर्डर (बाएं से दाएं, ऊपर से नीचे) से मैच करे।
DOM ऑर्डर मैन्युअल रूप से बदलने के लिए:
- एडिटर के बाईं ओर लेयर्स
पर क्लिक करें। - चुनें कि आप क्या ऑर्गनाइज करना चाहते हैं:
- अनुभाग के अंदर मौजूद एलिमेंट:
- अनुभाग खोलने के लिए, उसे चुनें।
- एलिमेंट को ड्रैग और ड्रॉप करके सही पोजिशन पर रखें।
- अनुभाग:
- सबसे ऊपर वाले अनुभाग पर होवर करें और मोर एक्शंस आइकन
पर क्लिक करें। - अरेंज पर क्लिक करें।
- ब्रिंग टू फ्रंट पर क्लिक करें।
- पैनल में ऊपर से नीचे जाते हुए, बाकी सभी अनुभागों के लिए स्टेप i-iii दोहराएं।
- सबसे ऊपर वाले अनुभाग पर होवर करें और मोर एक्शंस आइकन
- अनुभाग के अंदर मौजूद एलिमेंट:

DOM ऑर्डर को फिर से ऑर्गनाइज करना
आप एक क्लिक में किसी अनुभाग, फ्लेक्सबॉक्स या स्टैक के एलिमेंट या पूरे पृष्ठ का DOM ऑर्डर फिर से अरेंज कर सकते हैं। ऑर्डर को एलिमेंट के विजुअल ऑर्डर (बाएं से दाएं और ऊपर से नीचे) से मैच करने के लिए ऑप्टिमाइज किया जाता है।
पृष्ठ का DOM ऑर्डर फिर से ऑर्गनाइज करने के लिए:
- एडिटर के बाईं ओर पेजेज
पर क्लिक करें। - संबंधित पृष्ठ चुनें।
- मोर एक्शंस आइकन
पर क्लिक करें। - रीऑर्गनाइज DOM ऑर्डर पर क्लिक करें।

एलिमेंट का DOM ऑर्डर फिर से ऑर्गनाइज करने के लिए:
- एडिटर के बाईं ओर लेयर्स
पर क्लिक करें। - संबंधित अनुभाग, फ्लेक्सबॉक्स या स्टैक चुनें।
- मोर ऐक्शंस आइकन
पर क्लिक करें। - रीऑर्गनाइज़ DOM ऑर्डर पर क्लिक करें।

अक्सर पूछे जाने वाले सवाल
साइट पर DOM ऑर्डर के बारे में और जानने के लिए कोई सवाल चुनें।
मैं जिस साइट को बना रहा हूं, उसका DOM ऑर्डर कैसे चेक करूं?
साइट पृष्ठों पर ऑटो DOM कैसे काम करता है?
मैं ऑटो DOM को और कहां इनेबल कर सकता हूं?
क्या ऑटो DOM कहीं और भी लागू होता है?
अगर मैं लेयर्स पैनल में एलिमेंट का क्रम बदलूं, तो ऑटो DOM का क्या होता है?
साइट की भाषाओं के साथ DOM कैसे काम करता है?


पर क्लिक करें।