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

कायस बैस्क

Twitter GitHub Glitch

सोफ़िया इमेलियानोवा

GitHub

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

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

DOM नोड देखें

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

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

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

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

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

   • टोक्यो

   • बेरूत

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

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

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

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

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

   • George
   • रिंगो
   • Paul

   • रमेश

     

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

   

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

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

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

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

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

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

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

   • मग्रीट
   • सौटिन

2. इस पेज पर सबसे नीचे मौजूद, अपेंडिक्स: स्क्रोल करके व्यू सेक्शन पर जाएं. निर्देश वहीं जारी रहते हैं.

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

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

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

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

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

रूलर के साइज़ की यूनिट पिक्सल है.

नोड खोजना

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

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

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

   

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

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

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

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

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

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

नोड के कॉन्टेंट में बदलाव करने के लिए, DOM ट्री में मौजूद कॉन्टेंट पर दो बार क्लिक करें.

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. नई लाइन शुरू करने और <l टाइप करना शुरू करने के लिए, Enter दबाएं. DevTool आपके लिए एचटीएमएल सिंटैक्स को हाइलाइट करता है और टैग को अपने-आप पूरा करता है.

   

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

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

   

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

   

नोड का डुप्लीकेट बनाएं

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

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

   • बोनफ़ायर ऑफ़ द वैनिटीज़
   • नाना
   • ऑरलैंडो
   • लगातार एक जैसी आवाज़

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

   

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

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

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

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

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

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

   

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

   

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

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

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

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

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

   

फ़ोर्स स्थिति

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

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

   • द लॉर्ड ऑफ़ द मक्खियों
   • अपराध और सज़ा
   • मोबी डिक

2. ऊपर द लॉर्ड ऑफ़ द मक्खियों पर राइट क्लिक करें और जांच करें चुनें.

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

नोड छिपाना

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

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

   • द काउंट ऑफ़ मोंटे क्रिस्टो
   • तारे मेरी मंज़िल

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

   

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

नोड मिटाना

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

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

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

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

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

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

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

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

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

1. नीचे डार्कनेस का बायां हाथ क्लिक करें और जांच करें चुनें.

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

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

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

   

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

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

   

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

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

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

   • द बिग स्लीप
   • लंबी अलविदा

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

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

   

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

जब आपको JavaScript पाथ को ऑटोमेटेड जांच में दिखाना हो, तो उसे नोड में कॉपी करें.

1. नीचे 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 में DOM से जुड़ी ज़्यादातर सुविधाएं शामिल हैं. बाकी के बारे में जानने के लिए, 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

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

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

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

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

अपेंडिक्स: देखने के लिए स्क्रोल करें

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

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

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

   

अपेंडिक्स: विकल्प मौजूद नहीं है

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