DOM देखने और उसे बदलने के साथ शुरू करें

Kayce Basques

Sofia Emelianova

Chrome DevTools की मदद से, किसी पेज के डीओएम को देखने और उसमें बदलाव करने की बुनियादी बातें जानने के लिए, वीडियो देखें और ये इंटरैक्टिव ट्यूटोरियल पूरे करें.

इस ट्यूटोरियल में यह मान लिया गया है कि आपको DOM और एचटीएमएल के बीच का अंतर पता है. अपेंडिक्स: एचटीएमएल बनाम डीओएम में जाकर, इसके बारे में ज़्यादा जानें.

डीओएम नोड देखना

Elements पैनल के डीओएम ट्री में, DevTools में डीओएम से जुड़ी सभी गतिविधियां की जाती हैं.

किसी नोड की जांच करना

अगर आपको किसी खास डीओएम नोड में दिलचस्पी है, तो जांच करें विकल्प का इस्तेमाल करके, DevTools को तुरंत खोला जा सकता है और उस नोड की जांच की जा सकती है.

1. इस सूची में, Michelangelo पर राइट क्लिक करें. मेन्यू में जाकर, जांच करें को चुनें.

   • माइकलऐंजलो
   • राफ़ेल

   DevTools का एलिमेंट पैनल खुल जाएगा. <li>Michelangelo</li> को डीओएम ट्री में हाइलाइट किया गया है.

   

2. कोई एलिमेंट चुनें पर क्लिक करें.

3. नीचे दी गई सूची में से टोक्यो चुनें.

   • टोक्यो
   • बैरूत

   <li>Tokyo</li> को डीओएम ट्री में हाइलाइट किया गया है.

नोड की जांच करना, नोड की स्टाइल और सीएसएस को देखने और बदलने की दिशा में पहला कदम है.

कीबोर्ड की मदद से डीओएम ट्री पर नेविगेट करना

डीओएम ट्री में कोई नोड चुनने के बाद, कीबोर्ड की मदद से डीओएम ट्री में नेविगेट किया जा सकता है.

1. नीचे दी गई सूची में, Ringo पर राइट क्लिक करें और जांच करें को चुनें. डीओएम ट्री में <li>Ringo</li> को चुना गया है.

   • George
   • रिंगो
   • पॉल

   • रमेश

     

2. अप ऐरो बटन को दो बार दबाएं. <ul> को चुना गया है.

   

3. लेफ़्ट ऐरो बटन दबाएं. <ul> की सूची छोटी हो जाती है.

4. लेफ़्ट ऐरो बटन को फिर से दबाएं. <ul> नोड का पैरंट चुना गया है. इस मामले में, यह <li> नोड है, जिसमें पहले चरण के निर्देश शामिल हैं.

5. डाउन ऐरो बटन को तीन बार दबाएं, ताकि आपने अभी-अभी जो <ul> सूची को छोटा किया है उसे फिर से चुना जा सके. यह इस तरह दिखना चाहिए: <ul>...</ul>

6. राइट ऐरो बटन दबाएं. सूची बड़ी हो जाती है.

स्क्रोल करके व्यू में लाएं

कभी-कभी डीओएम ट्री देखते समय, आपको ऐसा डीओएम नोड दिखेगा जो व्यूपोर्ट में नहीं है. उदाहरण के लिए, मान लें कि आपने पेज को सबसे नीचे तक स्क्रोल किया है और आपको पेज के सबसे ऊपर मौजूद <h1> नोड में दिलचस्पी है. स्क्रोल करके व्यू में लाएं की मदद से, व्यूपोर्ट की जगह को तुरंत बदला जा सकता है, ताकि आपको नोड दिख सके.

1. यहां दी गई सूची में, Magritte पर राइट क्लिक करें और जांच करें को चुनें.

   • मग्रीट
   • Soutine

2. ज़्यादा निर्देशों के लिए, अपेंडिक्स सेक्शन स्क्रोल करके देखें पर जाएं.

यह प्रोसेस पूरी करने के बाद, आपको इस सेक्शन पर वापस आना चाहिए.

पैमाना दिखाएं

व्यू पोर्ट में मौजूद रूलर की मदद से, तत्व पैनल में किसी एलिमेंट पर कर्सर घुमाकर, उसकी चौड़ाई और ऊंचाई मेज़र की जा सकती है.

रूलर को चालू करने के लिए, इनमें से कोई एक तरीका अपनाएं:

• कमांड मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (macOS) दबाएं. इसके बाद, Show rulers on hover टाइप करें और Enter दबाएं.
• सेटिंग देखें सेटिंग > प्राथमिकताएं > एलिमेंट > कर्सर घुमाने पर रूलर दिखाएं.

रूलर की साइज़िंग यूनिट पिक्सल होती है.

नोड खोजें

स्ट्रिंग, सीएसएस सिलेक्टर या XPath सिलेक्टर की मदद से, DOM ट्री को खोजा जा सकता है.

1. अपने कर्सर को Elements पैनल पर रखें.
2. Control+F या Command+F (macOS) दबाएं. खोज बार, डीओएम ट्री के सबसे नीचे खुलता है.

3. The Moon is a Harsh Mistress टाइप करें. आखिरी वाक्य को डीओएम ट्री में हाइलाइट किया गया है.

   

खोज बार में सीएसएस और XPath सिलेक्टर भी इस्तेमाल किए जा सकते हैं.

तत्व पैनल, डीओएम ट्री में मिलते-जुलते पहले नतीजे को चुनता है और उसे व्यूपोर्ट में दिखाता है. डिफ़ॉल्ट रूप से, ऐसा टाइप करते समय होता है. अगर आपको हमेशा लंबी सर्च क्वेरी के साथ काम करना पड़ता है, तो DevTools को इस तरह से सेट किया जा सकता है कि वह Enter दबाने पर ही खोज करे.

नोड के बीच ग़ैर-ज़रूरी जंप से बचने के लिए, सेटिंग सेटिंग > प्राथमिकताएं > ग्लोबल > टाइप करते समय खोजें चेकबॉक्स से सही का निशान हटाएं.

DOM में बदलाव करना

आपके पास डीओएम में तुरंत बदलाव करने का विकल्प होता है. साथ ही, यह भी देखा जा सकता है कि इन बदलावों से पेज पर क्या असर पड़ता है.

कॉन्टेंट में बदलाव करें

किसी नोड के कॉन्टेंट में बदलाव करने के लिए, डीओएम ट्री में कॉन्टेंट पर दो बार क्लिक करें.

1. नीचे दी गई सूची में, Michelle पर राइट क्लिक करें और जांच करें को चुनें.

   • फ़्राई
   • अवंतिका

2. डीओएम ट्री में, Michelle पर दो बार क्लिक करें. दूसरे शब्दों में कहें, तो <li> और </li> के बीच मौजूद टेक्स्ट पर दो बार क्लिक करें. टेक्स्ट को नीले रंग से हाइलाइट किया गया है, ताकि यह पता चल सके कि इसे चुना गया है.

   

3. Michelle को मिटाएं, Leela टाइप करें, और फिर बदलाव की पुष्टि करने के लिए Enter दबाएं. टेक्स्ट Michelle से बदलकर Leela हो जाता है.

विशेषताएं संपादित करें

एट्रिब्यूट में बदलाव करने के लिए, एट्रिब्यूट के नाम या वैल्यू पर दो बार क्लिक करें. किसी नोड में एट्रिब्यूट जोड़ने का तरीका जानने के लिए, इन निर्देशों का पालन करें.

1. यहां दी गई सूची में, Howard पर राइट क्लिक करें और जांच करें को चुनें.

   • Howard
   • विंस

2. <ul> को बड़ा करें. इसके बाद, बदलाव करने के लिए <li> पर दो बार क्लिक करें. टेक्स्ट को हाइलाइट किया जाता है, ताकि पता चल सके कि नोड चुना गया है.

   

3. राइट ऐरो बटन दबाएं, स्पेस जोड़ें, style="background-color:gold" टाइप करें, और फिर Enter दबाएं. नोड के बैकग्राउंड का रंग बदलकर गोल्ड हो जाता है.

   

नोड टाइप में बदलाव करना

किसी नोड के टाइप में बदलाव करने के लिए, टाइप पर दो बार क्लिक करें. इसके बाद, नया टाइप डालें.

1. यहां दी गई सूची में, Hank पर राइट क्लिक करें और जांच करें को चुनें.

   • डीन
   • सारा भाई वरसिस सारा भाई
   • थैडडियस
   • ब्रॉक

2. <li> पर दो बार क्लिक करें. li टेक्स्ट को हाइलाइट किया गया है.

3. li को मिटाएं, button टाइप करें, और फिर Enter दबाएं. <li> नोड, <button> नोड में बदल जाता है.

   

एचटीएमएल के तौर पर बदलाव करना

सिंटैक्स हाइलाइट करने और ऑटोकंप्लीट की सुविधा के साथ नोड में एचटीएमएल के तौर पर बदलाव करने के लिए, नोड के ड्रॉप-डाउन मेन्यू से एचटीएमएल के तौर पर बदलाव करें को चुनें.

1. नीचे दिए गए Leonard पर राइट क्लिक करें और जांच करें को चुनें.

   • पैनी
   • Howard
   • राजेश
   • Leonard

2. एलिमेंट पैनल में, मौजूदा नोड पर राइट क्लिक करें. इसके बाद, ड्रॉप-डाउन मेन्यू से एचटीएमएल के तौर पर बदलाव करें को चुनें.

   

3. नई लाइन शुरू करने के लिए, Enter दबाएं और <l टाइप करना शुरू करें. DevTool, एचटीएमएल सिंटैक्स को हाइलाइट करता है और टैग को ऑटोकंप्लीट करने के लिए सुझाव देता है.

   

4. अपने-आप पूरा होने की सुविधा वाले मेन्यू से li एलिमेंट चुनें और > टाइप करें. DevTools, कर्सर के बाद क्लोज़िंग </li> टैग को अपने-आप जोड़ देता है.

   

5. टैग के अंदर Sheldon टाइप करें. इसके बाद, बदलाव लागू करने के लिए Control या Command + Enter दबाएं.

किसी नोड का डुप्लीकेट बनाना

राइट क्लिक करके, एलिमेंट का डुप्लीकेट बनाएं विकल्प का इस्तेमाल करके, किसी एलिमेंट का डुप्लीकेट बनाया जा सकता है.

1. इस सूची में मौजूद Nana पर राइट क्लिक करें और जांच करें को चुनें.

   • Bonfire of the Vanities
   • नाना
   • ऑरलैंडो
   • लगातार एक जैसी आवाज़ (वाइट नॉइज़)

2. तत्व पैनल में, <li>Nana</li> पर राइट क्लिक करें और ड्रॉप-डाउन मेन्यू से तत्व डुप्लीकेट करें चुनें.

   

3. पेज पर वापस जाएं. सूची में शामिल आइटम की कॉपी बनाई गई है.

इन कीबोर्ड शॉर्टकट का भी इस्तेमाल किया जा सकता है: Shift + Alt + डाउन ऐरो (Windows और Linux) और Shift + Option + डाउन ऐरो (macOS).

नोड का स्क्रीनशॉट कैप्चर करना

डीओएम ट्री में मौजूद किसी भी नोड का स्क्रीनशॉट लिया जा सकता है.

1. इस पेज पर मौजूद किसी भी इमेज पर राइट क्लिक करें और जांच करें को चुनें.

2. एलिमेंट पैनल में, इमेज के यूआरएल पर राइट क्लिक करें. इसके बाद, ड्रॉप-डाउन मेन्यू से नोड का स्क्रीनशॉट कैप्चर करें को चुनें.

   

3. स्क्रीनशॉट, आपके डाउनलोड (Windows और macOS) में सेव हो जाता है.

DevTools की मदद से स्क्रीनशॉट लेने के चार तरीकों के बारे में ज़्यादा जानें.

डीओएम नोड का क्रम बदलना

नोड का क्रम बदलने के लिए, उन्हें खींचें और छोड़ें.

1. नीचे दी गई सूची में, एल्विस प्रेस्ली पर राइट क्लिक करें और जांच करें को चुनें. यह सूची का आखिरी आइटम है.

   • स्टीवी वंडर
   • टॉम वेट्स
   • क्रिस थाइल
   • एल्विस प्रेज़ली

2. डीओएम ट्री में, <li>Elvis Presley</li> को सूची में सबसे ऊपर खींचें और छोड़ें.

फ़ोर्स स्टेट

नोड को :active, :hover, :focus, :visited, और :focus-within जैसी स्थितियों में रहने के लिए मजबूर किया जा सकता है.

1. The Lord of the Flies सूची के आइटम पर कर्सर घुमाएं. बैकग्राउंड का रंग नारंगी हो जाता है.

   • लॉर्ड ऑफ़ द फ़्लाइज़
   • जुर्म और सज़ा
   • मोबी डिक

2. The Lord of the Flies सूची के आइटम पर राइट क्लिक करें और जांच करें को चुनें.

3. <li class="demo--hover">The Lord of the Flies</li> पर राइट क्लिक करें और स्टेट बदलें > :hover को चुनें. अगर आपको यह विकल्प नहीं दिखता है, तो विकल्प मौजूद न होने के बारे में जानकारी देने वाला अपेंडिक्स पढ़ें.

   बैकग्राउंड का रंग नारंगी ही रहता है, भले ही आपने नोड पर कर्सर न घुमाया हो.

किसी नोड को छिपाना

किसी नोड को छिपाने के लिए, H दबाएं.

1. यहां दी गई सूची में, The Stars My Destination पर राइट क्लिक करें और जांच करें को चुनें.

   • द काउंट ऑफ़ मॉन्टे क्रिस्टो
   • द स्टार्स माय डेस्टिनेशन

2. H बटन दबाएं. नोड छिपा हुआ है. नोड पर राइट क्लिक करके भी, एलिमेंट छिपाएं विकल्प का इस्तेमाल किया जा सकता है.

   

3. H बटन को फिर से दबाएं. नोड फिर से दिखता है.

किसी नोड को मिटाना

किसी नोड को मिटाने के लिए, Delete दबाएं.

1. नीचे दी गई सूची में, Foundation पर राइट क्लिक करें और जांच करें को चुनें.

   • The Illustrated Man
   • थ्रू द लुकिंग-ग्लास
   • दानशील संस्था

2. Delete बटन दबाएं. नोड मिटा दिया जाता है. नोड पर राइट क्लिक करके, एलिमेंट मिटाएं विकल्प का इस्तेमाल भी किया जा सकता है.

3. Control+Z या Command+Z (macOS) दबाएं. पिछली कार्रवाई को पहले जैसा कर दिया जाता है और नोड फिर से दिखने लगता है.

कंसोल में नोड ऐक्सेस करना

DevTools, Console से डीओएम नोड ऐक्सेस करने या उनके लिए JavaScript रेफ़रंस पाने के लिए कुछ शॉर्टकट उपलब्ध कराता है.

$0 की मदद से, चुने गए मौजूदा नोड को रेफ़रंस करें

किसी नोड (इसमें ::before या ::after जैसे सूडो-एलिमेंट शामिल हैं) की जांच करने पर, नोड के बगल में मौजूद == $0 टेक्स्ट का मतलब है कि Console में इस नोड को वैरिएबल $0 के साथ रेफ़रंस के तौर पर इस्तेमाल किया जा सकता है.

1. The Left Hand of Darkness सूची आइटम पर राइट क्लिक करें और जांच करें को चुनें.

   • द लेफ़्ट हैंड ऑफ़ डार्कनेस
   • डून

2. कंसोल पैनल खोलने के लिए, Escape बटन दबाएं. इसे खोलने के लिए, आपको Console को चुनना पड़ सकता है.

3. $0 टाइप करें और Enter बटन दबाएं. एक्सप्रेशन का नतीजा यह है कि $0 का आकलन <li>The Left Hand of Darkness</li> के तौर पर किया जाता है.

   

4. नतीजे पर कर्सर घुमाएं. नोड को व्यूपोर्ट में हाइलाइट किया जाता है.

5. डीओएम ट्री में <li>Dune</li> पर क्लिक करें. इसके बाद, कंसोल में फिर से $0 टाइप करें और Enter को फिर से दबाएं. अब $0 की वैल्यू <li>Dune</li> हो जाती है.

   

ग्लोबल वैरिएबल के तौर पर सेव करें

अगर आपको किसी नोड को कई बार रेफ़र करना है, तो उसे ग्लोबल वैरिएबल के तौर पर सेव करें.

1. नीचे दी गई सूची में, The Big Sleep पर राइट क्लिक करें और जांच करें को चुनें.

   • The Big Sleep
   • The Long Goodbye

2. डीओएम ट्री में <li>The Big Sleep</li> पर राइट क्लिक करें और ग्लोबल वैरिएबल के रूप में स्टोर करें को चुनें. अगर आपको यह विकल्प नहीं मिलता है, तो विकल्पों के न दिखने के बारे में पढ़ें.

3. कंसोल में temp1 टाइप करें. इसके बाद, Enter दबाएं. एक्सप्रेशन के नतीजे से पता चलता है कि वैरिएबल, नोड का आकलन करता है. सूची में मौजूद आइटम को बड़ा करने के लिए, नोड पर क्लिक करें.

   

JS पाथ कॉपी करें

किसी नोड के JavaScript पाथ को कॉपी करें, ताकि उसे ऑटोमेटेड टेस्ट में रेफ़रंस के तौर पर इस्तेमाल किया जा सके.

1. नीचे दी गई सूची में, The Brothers Karamazov पर राइट क्लिक करें और जांच करें को चुनें.

   • द ब्रदर्स कारामाज़ोव
   • जुर्म और सज़ा

2. डीओएम ट्री में <li>The Brothers Karamazov</li> पर राइट क्लिक करें. इसके बाद, कॉपी करें > जेएस पाथ कॉपी करें को चुनें. नोड को रिज़ॉल्व करने वाला document.querySelector() एक्सप्रेशन, आपके क्लिपबोर्ड पर कॉपी हो गया है.

3. एक्सप्रेशन को कंसोल में चिपकाने के लिए, Control+V या Command+V (macOS) दबाएं.

4. एक्सप्रेशन का आकलन करने के लिए, Enter दबाएं.

   

डीओएम में बदलाव होने पर ब्रेक करें

DevTools की मदद से, किसी पेज की JavaScript को तब रोका जा सकता है, जब JavaScript, डीओएम में बदलाव करती है. डीओएम में बदलाव करने वाले ब्रेकपॉइंट के बारे में पढ़ें.

अगले चरण

इसमें DevTools में डीओएम से जुड़ी ज़्यादातर सुविधाएं शामिल हैं. डीओएम ट्री में नोड पर राइट क्लिक करके, बाकी के विकल्पों के बारे में जाना जा सकता है. साथ ही, उन विकल्पों को आज़माया जा सकता है जिनके बारे में इस ट्यूटोरियल में नहीं बताया गया है.

पढ़ना जारी रखें:

• एलिमेंट पैनल के कीबोर्ड शॉर्टकट के बारे में पढ़ें.
• DevTools की अन्य सुविधाओं के बारे में जानने के लिए, DevTools का दस्तावेज़ पढ़ें.

DevTools की टीम से संपर्क करने या अन्य डेवलपर से मदद पाने के लिए, DevTools कम्यूनिटी में शामिल हों.

अपेंडिक्स

किसी विषय के बारे में ज़्यादा जानें.

एचटीएमएल बनाम डीओएम

इस सेक्शन में, एचटीएमएल और डीओएम के बीच के अंतर को कम शब्दों में बताया गया है.

जब किसी वेब ब्राउज़र का इस्तेमाल करके, https://example.com जैसे किसी पेज का अनुरोध किया जाता है, तो सर्वर एक एचटीएमएल दस्तावेज़ दिखाता है:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

ब्राउज़र, एचटीएमएल को पार्स करता है और ऑब्जेक्ट का एक ट्री बनाता है:

html
  head
    title
  body
    h1
    p
    script

ऑब्जेक्ट या नोड का यह ट्री, पेज के कॉन्टेंट को दिखाता है. इसे दस्तावेज़ ऑब्जेक्ट मॉडल या डीओएम कहा जाता है. फ़िलहाल, डीओएम और एचटीएमएल, दोनों में ऑब्जेक्ट एक जैसे हैं.

मान लें कि एचटीएमएल के सबसे नीचे मौजूद script.js फ़ाइल में ये फ़ंक्शन शामिल हैं:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

यह स्क्रिप्ट, h1 नोड को हटा देती है और डीओएम में दूसरा p नोड जोड़ देती है. अब DOM ऐसा दिखता है:

html
  head
    title
  body
    p
    script
    p

पेज का एचटीएमएल अब उसके DOM से अलग है.

एचटीएमएल, पेज के शुरुआती कॉन्टेंट को दिखाता है. वहीं, DOM, पेज के ऐक्टिव और मौजूदा कॉन्टेंट को दिखाता है. जब JavaScript, नोड जोड़ता है, हटाता है या उनमें बदलाव करता है, तो डीओएम, एचटीएमएल से अलग हो जाता है.

MDN के डॉम के बारे में जानकारी में ज़्यादा जानें.

स्क्रोल करके व्यू में लाना

यह स्क्रोल करके व्यू में लाएं सेक्शन का अगला हिस्सा है. इस सेक्शन को पूरा करने के लिए, निर्देशों का पालन करें.

1. आपके डीओएम ट्री में <li>Magritte</li> नोड अब भी चुना हुआ होना चाहिए. अगर ऐसा नहीं होता है, तो स्क्रोल करके व्यू में लाएं पर वापस जाएं और फिर से शुरू करें.

2. <li>Magritte</li> नोड पर राइट क्लिक करें और स्क्रोल करके देखें को चुनें. आपका व्यूपोर्ट वापस ऊपर की ओर स्क्रोल हो जाता है, ताकि आपको Magritte नोड दिख सके. अगर स्क्रोल करके व्यू में लाएं विकल्प मौजूद नहीं है, तो मौजूद नहीं होने वाले विकल्पों के बारे में पढ़ें.

   

विकल्प मौजूद नहीं थे

इस ट्यूटोरियल में दिए गए कई निर्देशों में, आपको डीओएम ट्री में किसी नोड पर राइट क्लिक करने और फिर पॉप-अप होने वाले कॉन्टेक्स्ट मेन्यू से कोई विकल्प चुनने के लिए कहा जाता है. अगर आपको कॉन्टेक्स्ट मेन्यू में यह विकल्प नहीं दिखता है, तो नोड टेक्स्ट से दूर राइट क्लिक करके देखें.