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

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

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

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

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

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

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

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

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

   • टोक्यो

   • बेरूत

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

किसी नोड की शैलियों को देखने और बदलने की दिशा में, नोड की जांच करना भी पहला कदम है. सीएसएस देखना और बदलना लेख पढ़ें.

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

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

1. नीचे मौजूद Ringo पर राइट क्लिक करें और जांच करें को चुनें. <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 दबाएं.
• सेटिंग > प्राथमिकताएं > एलिमेंट > होवर करने पर रूलर दिखाएं को चुनें.

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

नोड खोजना

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

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

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

   

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

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

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

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

   

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> पर राइट क्लिक करें और ज़बरदस्ती स्थिति > :होवर चुनें. अगर आपको यह विकल्प नहीं दिखता है, तो अपेंडिक्स: छूटे हुए विकल्प देखें. नोड पर कर्सर न रखने पर भी, बैकग्राउंड का रंग नारंगी ही रहता है.

नोड को छिपाना

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

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

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

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

   

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

नोड मिटाना

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

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

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

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

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

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

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

   

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

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

अगले चरण

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

Chrome DevTools के होम पेज पर जाकर, DevTools की मदद से की जा सकने वाली अन्य सुविधाओं के बारे में जानें.

DevTools टीम से संपर्क करने या DevTools समुदाय से मदद पाने के लिए, कम्यूनिटी देखें.

अपेंडिक्स: एचटीएमएल बनाम DOM

यह सेक्शन एचटीएमएल और 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 नोड जोड़ देता है. पूरा डीओएम अब कुछ ऐसा दिखता है:

html
  head
    title
  body
    p
    script
    p

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

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

अपेन्डिक्स: व्यू में स्क्रोल करें

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

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

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

   

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

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