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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

3. नीचे दिए गए टोक्यो टेक्स्ट पर क्लिक करें.

   • टोक्यो

   • बैरूत

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

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

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

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

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

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

   • रमेश

     

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

   

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

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

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

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

देखने के लिए स्क्रोल करें

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

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

   • Magritte
   • Soutine

2. इस पेज पर सबसे नीचे, अनुबंध: स्क्रोल करके देखें सेक्शन पर जाएं. इसके बाद, निर्देशों का पालन करें.

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

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

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

रूलर की सुविधा को इनमें से किसी एक तरीके से चालू करें:

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

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

नोड खोजना

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

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

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

   

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

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

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

डीओएम में बदलाव करना

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

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

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

1. नीचे मिशेल पर राइट क्लिक करें और जांच करें को चुनें.

   • तलना
   • मिशेल

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

   

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

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

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

1. नीचे हॉवर्ड पर राइट क्लिक करें और जांच करें को चुनें.

   • Howard
   • विंस

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

   

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

   

इसके अलावा, राइट क्लिक करके एट्रिब्यूट में बदलाव करें विकल्प का भी इस्तेमाल किया जा सकता है.

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

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

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

   • डीन
   • सारा भाई वरसिस सारा भाई
   • थैडियस
   • Brock

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

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

   

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

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

1. नीचे लियोनार्ड पर राइट क्लिक करें और जांच करें को चुनें.

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

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

   

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

   

   ध्यान दें: इसके अलावा, DevTools में डीओएम प्रॉपर्टी अपने-आप पूरी हो सकती हैं.

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

   

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

   

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

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

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

   • Bonfire of the Vanities
   • नाना
   • ऑरलैंडो
   • White Noise

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

   

3. पेज पर वापस जाएं. सूची के आइटम का डुप्लीकेट तुरंत बन गया है.

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

नोड का स्क्रीनशॉट लेना

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

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

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

   

3. स्क्रीनशॉट आपके डाउनलोड में सेव हो जाएगा.

   

DevTools की मदद से स्क्रीनशॉट लेने के अन्य तरीकों के बारे में जानने के लिए, DevTools की मदद से स्क्रीनशॉट लेने के चार तरीके लेख पढ़ें.

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

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

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

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

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

   

फ़ोर्स स्टेटस

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

1. नीचे दिए गए द लॉर्ड ऑफ़ द फ़्लाइज़ पर कर्सर घुमाएं. बैकग्राउंड का रंग नारंगी हो जाता है.

   • लॉर्ड ऑफ़ द फ़्लाइस
   • क्राइम एंंड पनिशमेंट
   • Moby Dick

2. ऊपर दिए गए The Lord of the Flies पर राइट क्लिक करें और जांच करें को चुनें.

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

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

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

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

   • द काउंट ऑफ़ मॉन्ट क्रिस्टो
   • The Stars My Destination

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

   

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

कोई नोड मिटाना

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

1. नीचे मौजूद फ़ाउंडेशन पर राइट क्लिक करें और जांच करें को चुनें.

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

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

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

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

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

फ़िलहाल चुने गए नोड को 0 डॉलर के साथ रेफ़रंस करना

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

1. नीचे दिए गए The Left Hand of Darkness पर राइट क्लिक करें और जांच करें को चुनें.

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

2. कंसोल ड्रॉअर खोलने के लिए, Escape बटन दबाएं.

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

   

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

5. डीओएम ट्री में <li>Dune</li> पर क्लिक करें. इसके बाद, Console में फिर से $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 पर राइट क्लिक करें और जांच करें को चुनें.

   • The Brothers Karamazov
   • क्राइम एंंड पनिशमेंट

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

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

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

   

DOM में होने वाले बदलावों पर ब्रेक

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

अगले चरण

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

DevTools की मदद से और क्या-क्या किया जा सकता है, यह जानने के लिए Chrome 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

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

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

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

html
  head
    title
  body
    p
    script
    p

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

ज़्यादा जानने के लिए, DOM के बारे में जानकारी देखें.

ज़्यादा जानकारी: देखने के लिए स्क्रोल करना

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

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

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

   

परिशिष्ट: मौजूद नहीं होने वाले विकल्प

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