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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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 पर राइट क्लिक करें और जांच करें को चुनें.

   • Magritte
   • सोटीन

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. नीचे दिए गए हैंक पर राइट क्लिक करें और जांच करें को चुनें.

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

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

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

   

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

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

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

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

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

   

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

   

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

   

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

   

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

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

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

   • 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 पर राइट क्लिक करें और जांच करें को चुनें.

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

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

   

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

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

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

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

   • द इलस्ट्रेटेड मैन
   • थ्रू द लुकिंग-ग्लास
   • दानशील संस्था

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 दबाएं.

   

डीओएम में किए गए बदलावों को लागू करें

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

अगले चरण

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

DevTools की मदद से क्या-क्या किया जा सकता है, यह जानने के लिए Chrome DevTools का होम पेज देखें.

अगर आपको DevTools की टीम से संपर्क करना है या DevTools कम्यूनिटी से मदद चाहिए, तो कम्यूनिटी पर जाएं.

परिशिष्ट: एचटीएमएल बनाम डीओएम

यह सेक्शन एचटीएमएल और DOM के बीच का अंतर तेज़ी से बताता है.

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 नोड देख सकें. अगर आपको स्क्रोल इन व्यू का विकल्प नहीं दिख रहा है, तो अपेंडिक्स: विकल्प मौजूद नहीं है देखें.

   

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

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