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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

   • रमेश

     

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

   

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

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

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

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

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

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

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

   • मग्रीट
   • सूतिन

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

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

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

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

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

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

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

नोड खोजें

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

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

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

   

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

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

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

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

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

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

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

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. Elements पैनल में, मौजूदा नोड पर राइट क्लिक करें. इसके बाद, ड्रॉप-डाउन मेन्यू से Edit as HTML चुनें.

   

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

   

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

   

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

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

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

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

   • Bonfire of the Vanities
   • नाना
   • ऑरलैंडो
   • वाइट नॉइज़

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

   

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

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

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

आपके पास DOM ट्री में मौजूद किसी भी नोड का स्क्रीनशॉट लेने का विकल्प होता है.

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

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

   

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

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

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

   

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

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

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

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

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

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

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

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

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

$0 की मदद से, फ़िलहाल चुने गए नोड को रेफ़रंस करें

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

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

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

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

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

   

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

5. DOM ट्री में <li>Dune</li> पर क्लिक करें. इसके बाद, कंसोल में फिर से $0 टाइप करें. इसके बाद, Enter को फिर से दबाएं. अब, $0 का आकलन करने पर <li>Dune</li> मिलेगा.

   

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

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

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

   • द बिग स्लीप
   • The Long Goodbye

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

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

   

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

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

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

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

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

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

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

   

डीओएम में हुए बदलावों पर ब्रेकपॉइंट सेट करना

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

अगले चरण

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

पढ़ते रहें:

• Elements पैनल के कीबोर्ड शॉर्टकट के बारे में पढ़ें.
• 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

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

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

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 से अलग है.

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

MDN के Introduction to the DOM में इसके बारे में ज़्यादा जानें.

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

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

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

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

   

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

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