DOM क्या है? Selenium वेबड्राइवर: संरचना, पूर्ण रूप

DOM क्या है? Selenium वेबड्राइवर?

डोम in Selenium वेबड्राइवर HTML5 और HTMLXNUMX का उपयोग करके वेब विकास का एक आवश्यक घटक है। Javaस्क्रिप्ट। DOM का पूरा नाम डॉक्यूमेंट ऑब्जेक्ट मॉडल है। DOM कोई कंप्यूटर साइंस कॉन्सेप्ट नहीं है। यह HTML या XML में दस्तावेजों तक पहुँचने और उनमें हेरफेर करने के लिए वेब डेवलपर्स के बीच मानकीकृत इंटरफेस का एक सरल सेट है। Javaस्क्रिप्ट।

ये मानक डेवलपर्स को कार्यान्वयन विवरणों की चिंता किए बिना वेबपेज बनाने में मदद करते हैं। इन इंटरफेस को मानकीकृत करने में शामिल कुछ संगठन मोज़िला, ऐप्पल जैसे हैं। Microsoft, गूगल, एडोब आदि। हालाँकि, यह W3C है जो एक मानक को औपचारिक रूप देता है और इसे प्रकाशित करता है - यहाँ देखें (https://dom.spec.whatwg.org/).

इस ट्यूटोरियल का उद्देश्य HTML दस्तावेज़ संरचना की बुनियादी अवधारणाओं को कवर करना और इसका उपयोग करके इसमें हेरफेर करना है। Javaस्क्रिप्ट। इस ट्यूटोरियल में हम निम्नलिखित विषयों को कवर करेंगे:

DOM संरचना को समझना
DOM के घटक Selenium
DOM में डिबगिंग
डोम घटनाएँ
DOM में समस्या निवारण

DOM संरचना को समझना

यदि आप कोई ऐसी वेबसाइट बना रहे हैं जिसमें स्क्रिप्टिंग का उपयोग शामिल है तो आपको DOM संरचना को समझने की आवश्यकता होगी Javaस्क्रिप्ट। यदि आप अपनी वेबसाइट में निम्नलिखित जटिल कार्यों में से कोई एक या सभी कार्य कर रहे हैं तो DOM को समझना और भी महत्वपूर्ण है –

ऐसी सामग्री विकसित करना जो पूरे पृष्ठ को रिफ्रेश किए बिना खुद को लगातार अपडेट करती रहे - जैसे आपके उपयोगकर्ता के पोर्टफोलियो में सभी स्टॉक की वर्तमान कीमत
उन्नत उपयोगकर्ता इंटरैक्शन विकसित करना जैसे कि गतिशील रूप से सामग्री जोड़ना या संशोधित करना - जैसे कि आपके पोर्टफोलियो में अधिक स्टॉक जोड़ने की क्षमता
ऐसी सामग्री विकसित करना जिसे उपयोगकर्ता द्वारा अनुकूलित किया जा सके - जैसे लेआउट को बदलने की क्षमता ताकि म्यूचुअल फंड पोर्टफोलियो स्टॉक पोर्टफोलियो से पहले दिखाई दे
अपनी वेबसाइट में उत्तरदायी विषय-वस्तु विकसित करना, जिससे आपकी वेबसाइट विभिन्न मीडिया स्क्रीनों जैसे आईफोन, डेस्कटॉप, टैबलेट आदि के लिए स्वचालित रूप से अनुकूल हो जाए।

एक मूल HTML पृष्ठ

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

यह ब्राउज़र के DOM PARSER पर कैसा दिखता है?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

आप बॉडी तत्व तक कैसे पहुँचते हैं?

<script>
    var body = window.document.body;
</script>

आप "हैलो वर्ल्ड" कैसे कहते हैं?

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

अंत में संपूर्ण HTML फ़ाइल इस प्रकार दिखाई देगी

प्रारंभिक Windows नोटपैड पर जाकर उसमें निम्न सामग्री पेस्ट करें। फिर फ़ाइल को “MyFileNewFile.html” के नाम से सेव करें (सुनिश्चित करें कि आपकी फ़ाइल का नाम .html से खत्म होता है)।

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

अंत में अपने पसंदीदा ब्राउज़र में से किसी एक का उपयोग करके फ़ाइल खोलें और आपको "हैलो वर्ल्ड!" दिखाई देगा।

DOM के घटक Selenium

नीचे DOM के मुख्य घटक दिए गए हैं Selenium वेबड्राइवर:

खिड़की
दस्तावेज़
तत्व

खिड़की

विंडो वह ऑब्जेक्ट है जो DOM में डॉक्यूमेंट ऑब्जेक्ट को समाहित करता है। यह हर चीज़ के ऊपर रहता है।

किसी दिए गए दस्तावेज़ से विंडो ऑब्जेक्ट तक पहुंचने के लिए

<script>
      var window = document.defaultView;
</script>

टैब्ड वातावरण में प्रत्येक टैब का अपना विंडो ऑब्जेक्ट होता है। हालाँकि, यदि कोई window.resizeTo और window.resizeBy जैसी घटनाओं को पकड़ना और लागू करना चाहता है, तो वे पूरी विंडो पर लागू होते हैं, न कि केवल टैब पर।

DOM में विंडो ऑब्जेक्ट के गुण

विंडो.लोकलस्टोरेज - ब्राउज़र के स्थानीय संग्रहण तक पहुँच प्रदान करता है। स्थानीय संग्रहण का उपयोग सत्र से डेटा संग्रहीत करने और पुनर्प्राप्त करने के लिए किया जा सकता है।

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

विंडो ओपनर - इस विंडो को खोलने वाले विंडो ऑब्जेक्ट का संदर्भ प्राप्त करता है (या तो किसी लिंक पर क्लिक करके या window.open विधि का उपयोग करके)

विंडो ऑब्जेक्ट की उपयोगी विधियाँ

विंडो.अलर्ट() - एक संदेश के साथ एक चेतावनी संवाद प्रदर्शित करता है।

<script>
		window.alert('say hello');
</script>

विंडो ऑब्जेक्ट द्वारा प्रदर्शित कई उपयोगी इवेंट हैं। हम एडवांस टॉपिक्स के अंतर्गत “इवेंट” अनुभाग में उन पर चर्चा करेंगे

दस्तावेज़

डॉक्यूमेंट DOM ट्री की शुरुआत को चिह्नित करता है। डॉक्यूमेंट DOM में पहला नोड है। इसमें कई विधियाँ और गुण हैं, जिनका दायरा पूरे डॉक्यूमेंट पर लागू होता है जैसे URL, getElementById, querySelector आदि।

DOM में दस्तावेज़ ऑब्जेक्ट के गुण

दस्तावेज़.documentURI और दस्तावेज़.URL - वे दोनों दस्तावेज़ का वर्तमान स्थान लौटाते हैं। हालाँकि, यदि दस्तावेज़ HTML प्रकार का नहीं है तो Document.URL काम नहीं करेगा।

दस्तावेज़.सक्रियतत्व - यह विधि DOM में वह तत्व लौटाती है जो फ़ोकस में है। इसका मतलब है कि अगर कोई उपयोगकर्ता टेक्स्टबॉक्स में टाइप कर रहा है, तो Document.activeElement उस टेक्स्टबॉक्स का संदर्भ लौटाएगा।

दस्तावेज़ का शीर्षक - इसका उपयोग किसी दिए गए दस्तावेज़ का शीर्षक पढ़ने या सेट करने के लिए किया जाता है।

दस्तावेज़ ऑब्जेक्ट की उपयोगी विधियाँ

Document.getElementById(स्ट्रिंग आईडी) - यह DOM मैनिपुलेशन में अब तक की सबसे प्रासंगिक और उपयोगी विधि है। इसका उपयोग DOM ट्री में किसी तत्व को उसके विशिष्ट पहचानकर्ता का उपयोग करके देखने के लिए किया जाता है। लुकअप केस सेंसिटिव है यानी निम्न उदाहरण में “ ” तत्व को IntroDiv या introdiv या iNtrodiv आदि शब्दों का उपयोग करके नहीं खोजा जा सकता है।

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(स्ट्रिंग चयनकर्ता) - यह CSS चयनकर्ता के नियमों के आधार पर एक और तत्व का चयन करने के लिए एक और व्यापक रूप से उपयोग की जाने वाली विधि है (यदि आप jQuery के $ संकेतन से परिचित हैं, तो वह स्वयं इस विधि का उपयोग करता है)। हम CSS चयनकर्ताओं में अधिक नहीं जाएंगे। CSS चयनकर्ता नियमों का एक सेट है जिसके द्वारा आप समान तत्वों की एक सूची प्राप्त कर सकते हैं (चयनकर्ता नियम के आधार पर)। हमने इस विधि का उपयोग पहले "हैलो वर्ल्ड" अनुभाग में किया है।

तत्व

एलिमेंट किसी दस्तावेज़ के DOM ट्री में नोड द्वारा दर्शाया गया कोई भी ऑब्जेक्ट है। हमेशा की तरह, एलिमेंट ऑब्जेक्ट अपने आप में ब्राउज़र और HTML दस्तावेज़ के बीच गुणों, विधियों और घटनाओं का एक अनुबंध मात्र है। HTMLElement, SVGElement, XULElement आदि जैसे विशेष प्रकार के एलिमेंट हैं। हम इस ट्यूटोरियल में केवल HTMLElement पर ध्यान केंद्रित करेंगे।

DOM में एलिमेंट ऑब्जेक्ट के गुण

तत्व.आईडी - इस प्रॉपर्टी का इस्तेमाल HTML एलिमेंट के लिए "ID" (एक अद्वितीय पहचानकर्ता) सेट करने या पढ़ने के लिए किया जा सकता है। DOM ट्री में मौजूद सभी एलिमेंट में ID अद्वितीय होनी चाहिए। जैसा कि पहले बताया गया है, ID का इस्तेमाल Document.getElementById विधि द्वारा DOM ट्री में किसी खास एलिमेंट ऑब्जेक्ट को चुनने के लिए भी किया जाता है।

HTMLElement.contentसंपादन योग्य - किसी तत्व की contentEditable प्रॉपर्टी यह निर्धारित करती है कि उस तत्व की सामग्री संपादन योग्य/संशोधनीय है या नहीं। इस प्रॉपर्टी को नीचे दी गई स्क्रिप्ट में दिखाए अनुसार सेट किया जा सकता है। इस प्रॉपर्टी का उपयोग यह निर्धारित करने के लिए भी किया जा सकता है कि दिया गया तत्व संपादन योग्य है या नहीं। किसी भी HTML बॉडी के अंदर निम्न स्क्रिप्ट आज़माएँ और आप देखेंगे कि आप बॉडी की किसी भी सामग्री को संपादित कर सकते हैं।

<script>
		document.body.contentEditable = true;
</script>

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

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

एलिमेंट ऑब्जेक्ट की उपयोगी विधियाँ

HTMLएलिमेंट.blur() & HTMLएलिमेंट.फोकस() - ब्लर और फोकस विधियों का उपयोग क्रमशः HTML तत्व से फोकस हटाने या फोकस देने के लिए किया जाता है। डेटा एंट्री वेबपेज में टेक्स्टबॉक्स के बीच कर्सर के फोकस को स्थानांतरित करने के लिए इन विधियों का सबसे अधिक उपयोग किया जाता है।

Element.querySelectorसभी - यह विधि दस्तावेज़ ऑब्जेक्ट के लिए पहले से चर्चा की गई क्वेरी चयनकर्ता विधि के समान है। हालाँकि यह विधि तत्व के वंशजों के भीतर ही अपनी खोज को सीमित कर देगी।

DOM में डिबगिंग

डेवलपर उपकरण Google Chrome, मोज़िला Firefox, इंटरनेट एक्सप्लोरर (10 या उससे ऊपर) या सफारी ब्राउज़र के अंदर ही आसान डिबगिंग की सुविधा देते हैं। कभी-कभी अलग-अलग ब्राउज़र एक ही HTML मार्कअप को अलग-अलग तरीके से समझते हैं और यही वह समय होता है जब डिबगिंग आपको उस DOM का निरीक्षण करने में मदद करती है जैसा कि उस विशेष ब्राउज़र के DOM इंजन द्वारा व्याख्या की गई है।

अब, मान लीजिए कि आप तापमान का मान 26 से XNUMX डिग्री सेल्सियस तक बदलना चाहते हैं।^o32 सी^oC आपके अंतिम उदाहरण में है। हम ऐसा करने के लिए कुछ सरल कदम उठाएंगे। यहाँ दिखाए गए स्क्रीनशॉट मोज़िला के हैं Firefox- हालाँकि, अन्य सभी ब्राउज़रों में चरण समान हैं।

अपने ब्राउज़र का उपयोग करके MyFileNewFile.html (या जो भी नाम आपने ऊपर ट्यूटोरियल में अपनी HTML फ़ाइल को दिया है) खोलें
अपने माउस का प्रयोग करें और तापमान मान 26 पर राइट क्लिक करें^oC पर जाएं और “इंस्पेक्ट एलिमेंट” पर क्लिक करें
ध्यान दें कि जिस तत्व के लिए आपने “तत्व का निरीक्षण” चुना है, वह आपके ब्राउज़र में हाइलाइट किया गया है (डीबगर विंडो आमतौर पर स्क्रीन के नीचे दिखाई देती है)
इसके बगल में झुके हुए त्रिकोण पर क्लिक करके तत्व को खोलें
आप जो संपादित करना चाहते हैं उसे चुनें और उस पर डबल क्लिक करें। आपको टेक्स्ट बदलने का विकल्प मिलेगा। नीचे दी गई एनिमेटेड छवि में बताए अनुसार करें।
अपने HTML पेज की सामग्री में बदलाव देखें। अब आप डिबगिंग विंडो बंद कर सकते हैं।

ध्यान दें कि आपके परिवर्तन केवल इस सत्र के लिए ही बने रहेंगे। जैसे ही आप पेज को पुनः लोड या रिफ्रेश करेंगे (F5 दबाएं) तो परिवर्तन वापस लौट आएंगे। यह दर्शाता है कि आपने वास्तविक HTML स्रोत को नहीं बदला है, बल्कि केवल अपने ब्राउज़र की स्थानीय व्याख्या को बदला है।

एक मनोरंजक अभ्यास के रूप में निम्नलिखित कार्य करने का प्रयास करें। www.facebook.com अपने ब्राउज़र में खोलें और परिणाम प्राप्त करने के लिए डीबगर टूल का उपयोग करें - ध्यान दें कि यह कैसे कहता है "मैंने फेसबुक हैक कर लिया है"।

DOM में डिबगिंग प्रक्रिया

डोम घटनाएँ

DOM में इवेंट क्या हैं?

इवेंट एक प्रोग्रामिंग मॉडल है जिसमें उपयोगकर्ता द्वारा ट्रिगर की गई (या ब्राउज़र पेज के जीवन-चक्र द्वारा ट्रिगर की गई) घटनाओं को संदेशों के रूप में प्रसारित किया जाता है। उदाहरण के लिए, जब कोई पेज लोड होना समाप्त हो जाता है तो यह window.load इवेंट को ट्रिगर करता है और इसी तरह जब उपयोगकर्ता किसी बटन पर क्लिक करता है तो यह तत्व का क्लिक इवेंट ट्रिगर होता है.

इन संदेशों को किसी भी व्यक्ति द्वारा रोका जा सकता है Javaलिपि कोड और फिर डेवलपर द्वारा परिभाषित कार्रवाई की जा सकती है। उदाहरण के लिए, मान लीजिए कि आप चाहते हैं कि आपके वेबपेज पर नंबर केवल तभी अपडेट हों जब उपयोगकर्ता किसी बटन पर क्लिक करता है। आप इसे निम्नलिखित में से किसी भी तरीके से प्राप्त कर सकते हैं –

HTML तत्व के onclick इवेंट को कार्रवाई असाइन करें
addEventListener विधि का उपयोग करके क्लिक इवेंट को कार्रवाई असाइन करें

विधि 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

विधि 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

DOM में समस्या निवारण

प्रश्न: मैं कैसे जान सकता हूँ कि कोई तत्व मौजूद है या नहीं?

A. किसी भी चयनकर्ता का उपयोग करके तत्व को देखने का प्रयास करें और जाँचें कि लौटाया गया तत्व शून्य है या नहीं। नीचे उदाहरण देखें –

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

प्रश्न: मुझे TypeError प्राप्त हो रहा है: document.getElementByID एक फ़ंक्शन नहीं है...

A. सुनिश्चित करें कि विधि का नाम API विधि से बिल्कुल मेल खाता हो। ऊपर दिए गए प्रश्न की तरह - यह getElementById है न कि getElementByID।

प्रश्न: बच्चों और चाइल्डनोड्स के बीच क्या अंतर है?

A. विधि children हमें कॉलिंग तत्व के भीतर सभी तत्वों का संग्रह प्राप्त कराती है। लौटाया गया संग्रह HTMLCollection प्रकार का है। हालाँकि, विधि childNodes हमें कॉलिंग तत्व के भीतर सभी नोड्स का संग्रह प्राप्त कराती है। हमारे उदाहरण में निम्नलिखित स्क्रिप्ट जोड़ें और अंतर देखें –

childNodes विधि 14 आइटम लौटाती है

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

जबकि children विधि केवल 7 आइटम लौटाती है

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

प्र. मुझे Uncaught TypeError प्राप्त हो रहा है: अपरिभाषित की संपत्ति 'innerHTML' नहीं पढ़ी जा सकती…

A. सुनिश्चित करें कि HTMLElement का वह उदाहरण जिस पर आप innerHTML प्रॉपर्टी को कॉल कर रहे हैं, आरंभिक घोषणा के बाद सेट किया गया था। यह त्रुटि आम तौर पर निम्न परिदृश्य में होती है। देखें कि कोड के अगले ब्लॉक में त्रुटि से कैसे बचा जा सकता है…

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

सारांश

इस ट्यूटोरियल में हमने सीखा कि DOM क्या है और गतिशील वेब पेज बनाने के लिए इसे समझना कितना आवश्यक है।
हमने DOM तत्वों के प्रकारों जैसे विंडो, डॉक्यूमेंट और एलिमेंट पर भी चर्चा की।
हमने प्रत्येक प्रकार के अंतर्गत उपलब्ध कुछ उपयोगी DOM विधियों और गुणों के बारे में सीखा।
हमने देखा कि कैसे अधिकांश ब्राउज़र इंटरनेट पर उपलब्ध किसी भी वेबपेज के साथ खेलने के लिए डेवलपर टूल प्रदान करते हैं - इस प्रकार हमने अपनी वेबसाइट के साथ समस्याओं को डीबग करना और हल करना सीखा।
हमने संक्षेप में DOM इवेंट तंत्र पर भी चर्चा की।
अंत में हमने DOM में कुछ समस्या निवारण आइटमों को कवर किया।
इंटरनेट पर DOM से जुड़े संसाधन भरे पड़े हैं। सबसे अच्छी और नवीनतम संदर्भ सामग्री मोज़िला के डेवलपर नेटवर्क पर उपलब्ध है। देखें – https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model