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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

   • टोक्यो

   • बैरूत

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

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

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

डीओएम ट्री में नोड चुनने के बाद, डीओएम ट्री को अपने कीबोर्ड.

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

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

   • रमेश

     

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

   

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

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

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

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

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

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

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

   • मग्रीट
   • सोटीन

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

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

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

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

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

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

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

नोड खोजना

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

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

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

   

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

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

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

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

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

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

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

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

   • फ़्राई
   • मिशेल

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

   

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

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

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

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

   • Howard
   • विंस

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

   

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

   

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

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

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

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

   • डीन
   • सारा भाई वरसिस सारा भाई
   • Thaddeus
   • ब्रॉक

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

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

   

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

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

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

   • पेनी
   • Howard
   • Rajesh
   • Leonard

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

   

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

   

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

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

   

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

   

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

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

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

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

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

   

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

आपके पास कीबोर्ड शॉर्टकट का इस्तेमाल करने का विकल्प भी है: Windows और Linux में Shift + Alt + डाउन ऐरो और MacOS के लिए Shift + Option + डाउन ऐरो.

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

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

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

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

   

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 में डीओएम से जुड़ी ज़्यादातर सुविधाएं शामिल हैं. बाकी जानकारी देखी जा सकती है DOM ट्री में नोड पर राइट क्लिक करके और अन्य विकल्पों के साथ प्रयोग करके इस ट्यूटोरियल में बताया गया है. एलिमेंट पैनल कीबोर्ड शॉर्टकट भी देखें.

सभी चीज़ों के बारे में जानने के लिए, Chrome DevTools के होम पेज पर जाएं अन्य, DevTools की मदद से भी ये काम किए जा सकते हैं.

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

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

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

https://example.com जैसे पेज का अनुरोध करने के लिए, वेब ब्राउज़र का इस्तेमाल करने पर सर्वर इस तरह के HTML लौटाता है:

<!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

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

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

   

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

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