हम एतेक दिन स’ फ्रंट-एंड डेवलपमेंट मे छी जे वर्षों स’ एकटा ट्रेंड देखबा मे आबि रहल अछि: प्रोग्रामिंग के एकटा नव प्रतिमान के संग काज करय वाला युवा डेवलपर एकर ऐतिहासिक संदर्भ के बिना बुझने. ओना त ’ कोनो बात नहि जानब एकदम बुझबा मे अबैत अछि । वेब एकटा बहुत पैघ जगह अछि जाहि मे कौशल आ विशेषताक विविध सेट अछि, आ हमरा लोकनि केँ सदिखन ई नहि बुझल रहैत अछि जे हमरा लोकनि केँ की नहि बुझल अछि. एहि क्षेत्र मे सीखब एक बेर भ' क' समाप्त भ' गेल काज नहि, एकटा चलैत यात्रा थिक. केस इन पॉइंट : हमर टीम के कियो पूछलक जे की ई कहनाय संभव अछि जे यूजर यूआई मे कोनो खास टैब सं दूर नेविगेट करैत छथि कि नहि. हम जावास्क्रिप्ट’क beforeunload इवेंट दिस इशारा केलहुं. लेकिन जे लोग एकरा स॑ पहल॑ भी निपटै छै, ओकरा पता छै कि ई संभव छै, कैन्हेंकि ओकरा दोसरऽ साइट प॑ अनसेव डाटा के बारे म॑ अलर्ट के साथ मारलऽ गेलऽ छै, जेकरा लेली बिफोरअनलोड एगो ठेठ यूज केस छै । हम अपन सहयोगी के नीक माप के लेल pageHide आ visibilityChange घटना के सेहो इंगित केलहुं। हमरा कोना बुझल छल से। एहि लेल जे ई दोसर प्रोजेक्ट मे आयल छल, एहि लेल नहि जे हम शुरू मे जावास्क्रिप्ट सीखैत काल एहि पर अध्ययन केने रही। तथ्य ई छै कि आधुनिक फ्रंट-एंड फ्रेमवर्क ओकरा स॑ पहल॑ के टेक्नोलॉजी दिग्गज कंपनी के कंधा प॑ खड़ा छै । इ विकास प्रथाक कें अमूर्त करय छै, अक्सर एकटा बेहतर विकासक अनुभव कें लेल जे कम करय छै, या एतय तक कि समाप्त करय छै, जे परंपरागत रूप सं आवश्यक फ्रंट-एंड अवधारणा रहल छै जे शायद सब कें जानय कें चाही. CSS ऑब्जेक्ट मॉडल (CSSOM) पर विचार करू। अहां ई उम्मीद क’ सकय छी जे सीएसएस आओर जावास्क्रिप्ट मे काज करय वाला के पास हाथ सं सीएसएसओएम के अनुभव के एकटा गुच्छा होएत, मुदा हरदम एहन नहिं होएत. एकटा ई-कॉमर्स साइट के लेल रिएक्ट प्रोजेक्ट छल जाहि पर हम काज केने रही जतय हमरा सभ के वर्तमान में चुनल गेल भुगतान प्रदाता के लेल स्टाइलशीट लोड करय के जरूरत छल. समस्या ई छेलै कि स्टाइलशीट हर पन्ना प॑ लोड होय रहलऽ छेलै जब॑ कि एकरऽ वास्तव म॑ जरूरत खाली एगो विशिष्ट पन्ना प॑ ही छेलै । जे डेवलपर के ई काज करय के जिम्मा देल गेल छल ओ कहियो स्टाइलशीट के डायनामिक रूप सं लोड नहि केने छल. पुनः ई बात तखन एकदम बुझबा मे अबैत अछि जखन रिएक्ट ओहि पारंपरिक दृष्टिकोण केँ अमूर्त क' दैत अछि जाहि मे अहाँ पहुँचि गेल होयब. संभवतः सीएसएसओएम एहन चीज नहि अछि जकर जरूरत अहां के रोजमर्रा के काज मे अछि. मुदा संभावना अछि जे कोनो समय अहां के एकरा सं बातचीत करय पड़त, ओहो एक बेर के मामला मे. ई सब अनुभव हमरा ई लेख लिखबाक प्रेरणा देलक। जंगल मे बहुत रास मौजूदा वेब फीचर आ तकनीक अछि जेकरा अहां अपन रोजमर्रा के काज मे कहियो सीधा नहि छू सकैत छी. शायद अहां वेब डेवलपमेंट मे काफी नव छी आओर बस एहि सं अनभिज्ञ छी किएक त’ अहां कोनो विशिष्ट ढाँचा के अमूर्तता मे डूबल छी जकरा गहींर सं जानय के जरूरत नहिं, वा एकदम सं सेहो. हम विशेष रूप स’ एक्सएमएल के बारे मे बाजि रहल छी, जे हमरा सब मे स’ बहुतो के जनैत अछि जे ई एकटा प्राचीन भाषा अछि जे एचटीएमएल स’ एकदम अलग नहि अछि. हम एकरा हाल मे WHATWG चर्चा के कारण ल’ क’ आबि रहल छी जे ई सुझाव दैत अछि जे XSLT प्रोग्रामिंग के नाम सं जानल जाय वाला XML स्टैक के एकटा महत्वपूर्ण हिस्सा के ब्राउजर सं हटा देल जाय. ई ठीक वैह तरहक पुरान, मौजूदा तकनीक अछि जे हमरा सभ लग सालों सं अछि जेकर उपयोग ओतबे व्यावहारिक काज लेल कएल जा सकैत छल जतेक कि हमर टीम के सीएसएसओएम के स्थिति. की अहाँ पहिने XSLT के संग काज केने छी? देखल जाय जे की हम सब एहि पुरान तकनीक पर बेसी झुकब आ एकर सुविधा के एक्सएमएल के संदर्भ स’ बाहर उपयोग क’ आइ वास्तविक दुनिया के समस्या स’ निपटब. XPath: केंद्रीय एपीआई सबसें महत्वपूर्ण एक्सएमएल तकनीक जे शायद सीधा एक्सएमएल परिप्रेक्ष्य के बाहर सबसें उपयोगी छै, वू छै एक्सपाथ, एक क्वेरी भाषा जे आपक॑ एक रूट तत्व के साथ मार्कअप ट्री म॑ कोनों भी नोड या विशेषता खोजै के अनुमति दै छै. हमरा एक्सएसएलटी के प्रति व्यक्तिगत स्नेह अछि, मुदा से एक्सपैथ पर सेहो निर्भर करैत अछि, आ रैंकिंग महत्व में व्यक्तिगत स्नेह के एक कात राखय पड़त. XSLT क॑ हटाबै के तर्क म॑ XPath केरऽ कोनो जिक्र नै छै, ई लेली हमरा लगै छै कि एकरऽ अनुमति अखनी भी छै । ई अच्छा छै, कैन्हेंकि एक्सपैथ तकनीक केरऽ ई सूट म॑ केंद्रीय आरू सबसें महत्वपूर्ण एपीआई छै, खास करी क॑ जब॑ सामान्य एक्सएमएल उपयोग स॑ बाहर उपयोग करै लेली कुछ खोजै के कोशिश करलऽ जाय छै । ई महत्वपूर्ण छै, कैन्हेंकि, जबकि CSS चयनकर्ता के उपयोग आपकऽ पन्ना म॑ अधिकांश तत्व क॑ खोजै लेली करलऽ जाब॑ सकै छै, लेकिन ओकरा सब क॑ नै मिल॑ सकै छै । एकरऽ अलावा, DOM म॑ ओकरऽ वर्तमान स्थिति के आधार प॑ कोनों तत्व क॑ खोजै लेली CSS चयनकर्ता के उपयोग नै करलऽ जाब॑ सकै छै । XPath क सकैत अछि। आब, ई पढ़य वाला अहां सभ मे सं किछ लोक के एक्सपाथ पता भ सकैत अछि, आओर किछ के नहि. एक्सपाथ तकनीक के एकटा काफी पैघ क्षेत्र अछि, आओर हम वास्तव मे सभ बेसिक नहि सिखा सकय छी आओर एहि तरहक एकटा लेख मे अहां के एकरा सं करय के मस्त चीज सेहो नहि देखा सकय छी. हम वास्तव मे ओ लेख लिखबाक प्रयास केलहुं, मुदा औसतन स्मैशिंग मैगजीन प्रकाशन 5000 शब्द स’ बेसी नहि जाइत अछि. हम पहिने स बेसी पर छलहुं2000 शब्द जखन कि मूल बातक आधा रास्ता मात्र। अस्तु, हम एक्सपैथ सं मस्त काज करब शुरू करब आ किछु लिंक देब जकर उपयोग अहां बेसिक लेल क’ सकय छी जं अहां के ई काज रोचक लागय. XPath & CSS के संयोजन XPath बहुत रास काज क’ सकैत अछि जे CSS चयनकर्ता तत्व स’ पूछताछ करबा काल नहि क’ सकैत अछि. मुदा CSS चयनकर्ता किछु एहन काज सेहो क’ सकैत अछि जे XPath नहि क’ सकैत अछि, अर्थात, क्लास नामक आधार पर तत्वक क्वेरी.
सीएसएस एक्सपाथ .myClass के /* [contains (@ वर्ग, "मेरा वर्ग")]।
एहि उदाहरण मे, CSS ओहि तत्वक क्वेरी करैत अछि जे .myClass क्लासनाम समाहित करैत अछि. एम्हर, XPath उदाहरण तत्वक कें क्वेरी करयत छै जे स्ट्रिंग “myClass” कें साथ एकटा विशेषता वर्ग कें समाहित करयत छै. दोसरऽ शब्दऽ म॑, ई कोनों भी विशेषता म॑ myClass के साथ तत्वऽ के चयन करै छै, जेकरा म॑ .myClass classname वाला तत्व भी शामिल छै — साथ ही साथ स्ट्रिंग म॑ “myClass” वाला तत्व, जेना कि .myClass2. एक्सपाथ ओहि अर्थ मे व्यापक अछि। त, नहि। हम ई नहि कहि रहल छी जे हमरा सभ केँ सीएसएस केँ टॉस आउट करबाक चाही आ एक्सपैथ केर माध्यम सँ सभ तत्वक चयन शुरू करबाक चाही. बात एतबे नहि। बात ई छै कि एक्सपैथ वू काम करी सकै छै जे सीएसएस बहुत उपयोगी नै करी सकै छै आरू अखनी भी भी होय सकै छै, भले ही ई ब्राउज़र स्टैक म॑ एगो पुरानऽ तकनीक छै आरू पहलऽ नजर म॑ स्पष्ट नै लगै सकै छै । आउ, दुनू तकनीक के एक संग उपयोग एहि लेल नहि करी जे हम सब क’ सकैत छी, बल्कि एहि लेल जे हम सब एहि प्रक्रिया में एक्सपैथ के बारे में किछु सीखब, जाहि स’ ई अहाँक स्टैक में एकटा आओर टूल बनाओल जायत — जेकरा अहाँ सब के शायद पता नहिं छल जे सब दिन स’ ओतय अछि ! समस्या ई छै कि जावास्क्रिप्ट केरऽ document.evaluate विधि आरू विभिन्न क्वेरी चयनकर्ता विधि जे हम जावास्क्रिप्ट लेली CSS एपीआई के साथ उपयोग करबै, असंगत छै. हम हमरा सब के शुरू करय लेल एकटा संगत क्वेरी एपीआई बनेने छी, हालांकि मानि लिय’ जे हम एहि पर बेसी सोचल नहि छी किएक त’ ई हम सब एतय जे क’ रहल छी ताहि सं विचलन अछि. पुन: उपयोग करय योग्य क्वेरी कंस्ट्रक्टर कें एकटा काफी सरल कामकाजी उदाहरण एतय देल गेल छै: ब्रायन रासमुसेन द्वारा Pen queryXPath [forked] देखू. हम डॉक्यूमेंट ऑब्जेक्ट पर दू टा मेथड जोड़ने छी: queryCSSSelectors (जे अनिवार्य रूप स’ querySelectorAll अछि) आ queryXPaths. ई दुनू एकटा queryResults ऑब्जेक्ट वापस करैत अछि:
{ queryType: नोड्स | स्ट्रिंग | नंबर | बूलियन, 1999। परिणाम: किसी भी [] // html तत्व, xml तत्व, स्ट्रिंग्स, संख्या, बूलियन, queryCSSSelectors: (क्वेरी: स्ट्रिंग, संशोधन: बूलियन) => क्वेरीरिजल्ट, queryXpaths: (क्वेरी: स्ट्रिंग, संशोधन: बूलियन) => क्वेरीरिजल्ट } .
queryCSSSelectors आरू queryXpaths फंक्शन परिणाम सरणी म॑ तत्वऽ प॑ आपक॑ देलऽ गेलऽ क्वेरी क॑ चलाबै छै, जब॑ तलक कि परिणाम सरणी टाइप नोड्स केरऽ होय छै, बेशक. अन्यथा, इ एकटा खाली सरणी आ एकटा प्रकार कें नोड्स कें साथ एकटा queryResult वापस करतय. यदि संशोधन गुण सही पर सेट कएल गेल अछि, त' फ़ंक्शन अपन क्वेरीरिजल्ट बदलत. कोनों परिस्थिति मे एकर उपयोग उत्पादन वातावरण मे नहि कैल जेबाक चाही. हम ई तरीका विशुद्ध रूप स दूनू क्वेरी एपीआई कए एक संग उपयोग करबाक विभिन्न प्रभाव कए प्रदर्शित करबा लेल क रहल छी । उदाहरण प्रश्न हम अलग-अलग एक्सपैथ क्वेरी के किछ उदाहरण देखाबय चाहय छी जे किछ शक्तिशाली काज के दर्शाबैत अछि जे ओ क सकय छथिन्ह आओर दोसर दृष्टिकोण के जगह पर एकर उपयोग कोना कएल जा सकैत अछि. पहिल उदाहरण अछि //li/text()। इ सबटा li तत्वक कें क्वेरी करयत छै आ ओकर टेक्स्ट नोड्स कें वापस करयत छै. अस्तु, जँ हमरा लोकनि निम्नलिखित एचटीएमएल सँ क्वेरी करब त':
- एक
- दू
- तीन
...ई जे वापस कएल जाइत अछि:
{"queryType":"xpathEvaluate","परिणाम":["एक","दो","तीन"],"resultType":"string"}
दोसर शब्द मे, हमरा लोकनि केँ निम्नलिखित सरणी भेटैत अछि: ["एक","दू","तीन"]. सामान्य तौर पर, अहां li तत्वक कें लेल क्वेरी करब जे ओकरा प्राप्त करय, ओहि क्वेरी कें परिणाम कें एकटा सरणी मे बदलब, सरणी कें मैप करब, आ प्रत्येक तत्व कें टेक्स्ट नोड वापस करब. मुदा हम एक्सपाथ के संग ओ काज बेसी संक्षेप मे क सकैत छी: document.queryXPaths ("//li/पाठ ()").परिणाम।
ध्यान दियौ जे टेक्स्ट नोड प्राप्त करबाक तरीका अछि text() क उपयोग करब, जे फंक्शन सिग्नेचर जकाँ लगैत अछि — आ ई अछि । ई कोनो तत्वक टेक्स्ट नोड वापस करैत अछि. हमरऽ उदाहरण म॑ मार्कअप म॑ तीन li तत्व छै, जेकरा म॑ हर एक म॑ पाठ ("एक", "दू", आरू "तीन") छै ।
text() क्वेरी के एकटा आओर उदाहरण देखू. मानल जाय जे ई हमर मार्कअप अछि:
एकटा क्वेरी लिखू जे href विशेषता मान वापस करैत अछि: document.queryXPaths ("//a [text () = 'साइन इन']/@href").परिणाम.
इ वर्तमान दस्तावेज पर एकटा XPath क्वेरी छै, ठीक अंतिम उदाहरण कें तरह, लेकिन अइ बेर हम एकटा लिंक (एक तत्व) कें href विशेषता वापस करय छी जेकरा मे “साइन इन” पाठ होयत छै. वास्तविक वापस आबि गेलपरिणाम अछि ["/login.html"]. XPath फ़ंक्शन अवलोकन XPath फंक्शन के एकटा संख्या अछि, आओर अहां शायद एहि सं अपरिचित छी. हमरा बुझने कतेको एहन अछि जे जानय योग्य अछि, जाहि मे निम्नलिखित शामिल अछि:
starts-withयदि कोनों पाठ कोनों विशेष अन्य पाठ उदाहरण सं शुरू होय छै, starts-with(@href, 'http:') सही वापस करय छै अगर कोनों href विशेषता http: सं शुरू होय छै. containsयदि कोनों पाठ मे कोनों विशेष अन्य पाठ उदाहरण होयत छै, contains(text(), "Smashing Magazine") true वापस करयत छै अगर कोनों पाठ नोड मे कतहु “Smashing Magazine” शब्द होयत छै. countकोई क्वेरी मे कतेक मिलान अछि एकर गिनती वापस करैत अछि. उदाहरण के लेल, count(//*[starts-with(@href, 'http:']) एकटा गिनती वापस करैत अछि जे संदर्भ नोड मे कतेक लिंक मे href विशेषता वाला तत्व अछि जे http: सँ शुरू होबय बला पाठ समाहित करैत अछि. substringजावास्क्रिप्ट सबस्ट्रिंग क तरह काज करैत अछि, सिवाय अहाँ स्ट्रिंग कए एकटा तर्क क रूप मे पास करू. उदाहरण के लेल, substring("my text", 2, 4) "y t" वापस करैत अछि. substring-beforeएकटा स्ट्रिंग क' भाग कए दोसर स्ट्रिंग स पहिने वापस करैत अछि. उदाहरण क लेल, substing-before("my text", " ") "my" वापस करैत अछि. तहिना, substring-before("hi","bye") एकटा खाली स्ट्रिंग वापस करैत अछि. substring-afterएकटा स्ट्रिंग क' भाग कए दोसर स्ट्रिंग क' बाद वापस करैत अछि. उदाहरण क लेल, substing-after("my text", " ") "text" वापस करैत अछि. तहिना, substring-after("hi","bye")एकटा खाली स्ट्रिंग वापस करैत अछि. normalize-spaceअग्रणी आरू पीछे केरऽ व्हाइटस्पेस क॑ स्ट्रिप करी क॑ आरू व्हाइटस्पेस वर्णऽ के अनुक्रम क॑ एकल स्पेस स॑ बदली क॑ सामान्य करलऽ गेलऽ व्हाइटस्पेस के साथ तर्क स्ट्रिंग क॑ वापस करै छै. notReturns एकटा बूलियन true जँ तर्क गलत अछि, अन्यथा गलत. trueबूलियन true वापस करैत अछि. falseबूलियन गलत वापस करैत अछि. concatजावास्क्रिप्ट concat क समान चीज, सिवाय अहाँ एकरा स्ट्रिंग पर मेथड क रूप मे नहि चलाबैत छी. बल्कि, अहाँ ओहि सभ तार केँ राखि दैत छी जकरा अहाँ जोड़य चाहैत छी. string-lengthई जावास्क्रिप्ट string-length के समान नै छै, बल्कि एकरा तर्क के रूप में देलऽ गेलऽ स्ट्रिंग के लंबाई वापस करै छै. translateई एकटा स्ट्रिंग लैत अछि आओर दोसर तर्क केँ तेसर तर्क मे बदलैत अछि. उदाहरण क लेल, translate("abcdef", "abc", "XYZ") XYZdef आउटपुट करैत अछि.
ई विशेष XPath फंक्शन के अलावा, बहुत सारा अन्य फंक्शन छै जे अपनऽ जावास्क्रिप्ट समकक्ष के समान काम करै छै — या मूल रूप स॑ कोनो भी प्रोग्रामिंग भाषा म॑ समकक्ष — जे शायद आपने क॑ भी उपयोगी लगतै, जेना कि फर्श, छत, गोल, योग, आरू बहुत कुछ । निम्नलिखित डेमो एहि मे सँ प्रत्येक कार्य केँ दर्शाबैत अछि: ब्रायन रासमुसेन द्वारा पेन एक्सपैथ संख्यात्मक फ़ंक्शन [फोर्क] देखू। ध्यान रहे कि, अधिकांश स्ट्रिंग हेरफेर फंक्शन के तरह, बहुत सारा संख्यात्मक एकल इनपुट लेते हैं | ई, निश्चित रूप स॑, कैन्हेंकि एकरऽ उपयोग क्वेरी लेली करलऽ जाय वाला छै, जेना कि अंतिम XPath उदाहरण म॑: //li [मंजिल (पाठ ()) > 250] / @ val
यदि अहां एकर उपयोग करय छी, जेना कि अधिकांश उदाहरण करय छै, त अहां एकरा पहिल नोड पर चलाबै के अंत करब जे पथ सं मेल खायत छै. किछु टाइप कन्वर्जन फंक्शन सेहो अछि जकरा सं संभवतः बचबाक चाही किएक त जावास्क्रिप्ट मे पहिने सं अपन टाइप कन्वर्जन समस्या अछि. मुदा एहन समय भ सकैत अछि जखन अहां कोनो स्ट्रिंग के कोनो नंबर मे बदलय चाहय छी जाहि सं ओकरा कोनो दोसर नंबर सं जांचल जा सकय. कोनों चीज कें प्रकार सेट करय वाला फंक्शन बूलियन, नंबर, स्ट्रिंग, आ नोड छै. इ महत्वपूर्ण XPath डाटाटाइप छै. आ जेना कि अहां सोचि सकय छी, एहि मे सं अधिकांश फंक्शन के उपयोग ओहि डाटाटाइप पर कएल जा सकैत अछि जे डीओएम नोड नहिं अछि. जेना, सबस्ट्रिंग-आफ्टर एकटा स्ट्रिंग लैत अछि जेना हम पहिने कवर कएने छी, मुदा ई कोनो href विशेषता सँ स्ट्रिंग भ’ सकैत अछि. ई मात्र एकटा तार सेहो भ' सकैत अछि:
const testSubstringAfter = document.queryXPaths ("सबस्ट्रिंग-बाद ('नमस्कार दुनिया',' ')");
जाहिर अछि, ई उदाहरण हमरा सभकेँ ["world"] क रूपमे रिजल्ट सरणी वापस देत। एकरा एक्शन मे देखाबय लेल हम एकटा डेमो पेज बनौने छी जे ओहि चीजक विरुद्ध फंक्शनक उपयोग करैत अछि जे DOM नोड नहि अछि: ब्रायन रासमुसेन द्वारा Pen queryXPath [forked] देखू. अहाँकेँ अनुवाद फ़ंक्शनक आश्चर्यजनक पहलू पर ध्यान देबाक चाही, जे ई अछि जे जँ अहाँक दोसर तर्कमे कोनो वर्ण अछि (अर्थात, जे वर्णक सूची अहाँ अनुवाद करय चाहैत छी) आ अनुवाद करबाक लेल कोनो मिलान वर्ण नहि अछि तँ ओ वर्ण आउटपुटसँ हटा देल जाइत अछि । एहि प्रकारेँ ई : १.
translate('नमस्कार, हमर नाम इनिगो मोंटोया अछि, अहाँ हमर पिता के मारि देलौं, मरबाक तैयारी करू','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
...स्ट्रिंग मे परिणाम, रिक्त स्थान सहित: [" * * ** "]।
एकरऽ मतलब छै कि “क” अक्षर क॑ तारा (*) म॑ अनुवाद करलऽ जाय रहलऽ छै, लेकिन हर दोसरऽ वर्ण जेकरा म॑ लक्ष्य स्ट्रिंग देलऽ गेलऽ अनुवाद नै छै, ओकरा पूरा तरह स॑ हटाय देलऽ जाय छै । उज्जर जगह मात्र हमरा सब लग बचल अछिअनुवादित “क” वर्णक बीच। तखन फेर ई प्रश्न:
translate('नमस्कार, हमर नाम इनिगो मोंटोया अछि, अहाँ हमर पिता के मारि देलौं, मरबाक तैयारी करू','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
...समस्या नै छै आरू एक परिणाम आउटपुट करै छै जे ऐन्हऽ दिखै छै:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"।
ई आहाँक॑ ई बात प॑ चकित होय सकै छै कि जावास्क्रिप्ट म॑ ठीक वैसनऽ करै के कोय आसान तरीका नै छै जे एक्सपाथ ट्रांसलेट फंक्शन करै छै, हालांकि बहुत सारा उपयोग केसऽ लेली, रेगुलर एक्सप्रेशन के साथ replaceAll एकरा संभाली सकै छै । अहाँ ओही तरीका के प्रयोग क सकैत छी जेना हम प्रदर्शित केने छी, मुदा से सबऑप्टिमल अछि जँ अहाँ बस स्ट्रिंग के अनुवाद करय चाहैत छी । निम्नलिखित डेमो जावास्क्रिप्ट संस्करण प्रदान करय कें लेल XPath कें अनुवाद फ़ंक्शन कें लपेटय छै: देखू पेन अनुवाद फ़ंक्शन [कांटा] ब्रायन रासमुसेन द्वारा। एहि तरहक कोनो चीजक उपयोग कतय क' सकैत छी? तीन स्थानक ऑफसेट कें साथ सीज़र सिफर एन्क्रिप्शन पर विचार करूं (जैना, 48 ई.पू. सं टॉप-ऑफ-द-लाइन एन्क्रिप्शन):
translate("सीजर रूबिकन पार करबाक योजना बना रहल अछि!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
इनपुट टेक्स्ट “सीजर रूबिकन पार करबाक योजना बना रहल अछि!” परिणाम “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” अलग-अलग संभावना के एकटा आओर त्वरित उदाहरण देबय लेल हम एकटा मेटल फंक्शन बनेलहुं जे स्ट्रिंग इनपुट लैत अछि आओर टेक्स्ट के वापस करय लेल ट्रांसलेट फंक्शन के उपयोग करैत अछि, जाहि मे उमलाउट लेबय वाला सभ वर्ण शामिल अछि. देखू पेन मेटल फंक्शन [कांटा] ब्रायन रासमुसेन द्वारा।
const धातु = (stri) => { 1। return translate (str, "AOUaou","ÄÖÜäöü"); } .
आ, जँ पाठ देल जाय “मोटली क्रू रूल्स, रॉक ऑन ड्यूड्स!”, त’ वापस “मोटली क्रू रूल्स, रॉक ऑन ड्यूड्स!” जाहिर अछि जे एहि फंक्शनक तरह-तरह के पैरोडी प्रयोग भ सकैत अछि । अगर अहां छी त’ टीवीट्रोप्स के ई लेख अहां के भरपूर प्रेरणा देबय के चाही. XPath के साथ CSS का उपयोग करना XPath के साथ मिल क॑ CSS चयनकर्ता के उपयोग करै के हमरऽ मुख्य कारण याद रखऽ: CSS बहुत हद तक समझै छै कि क्लास की छै, जबकि XPath के साथ सबसे अच्छा काम आप कर॑ सकै छै क्लास एट्रिब्यूट के स्ट्रिंग तुलना । जे बेसी मामला मे काज करत। मुदा जँ अहाँ कहियो एहन स्थिति मे पड़ब जतय, कहब, कियो .primaryLinks आओर .primaryLinks2 नामक क्लास बनौने हो आ अहाँ .primaryLinks क्लास प्राप्त करबाक लेल XPath क उपयोग क' रहल छलहुँ, तखन संभवतः अहाँ समस्या मे पड़ब. जा धरि एहन कोनो मूर्खतापूर्ण बात नहि रहत, अहाँ शायद एक्सपाथ के प्रयोग करब. मुदा हमरा ई रिपोर्ट करय मे दुख अछि जे हम एहन जगह पर काज केलहुं अछि जतय लोक ओहि तरहक मूर्खतापूर्ण काज करैत अछि. एतय एकटा आओर डेमो अछि जे CSS आओर XPath के एक संग उपयोग क’ रहल अछि. इ दर्शाबै छै कि जखन हम कोड कें उपयोग कोनों संदर्भ नोड पर XPath चलाबै कें लेल करय छै जे दस्तावेज कें नोड नहि छै तखन की होयत छै. ब्रायन रासमुसेन द्वारा पेन css आ xpath एक संग [forked] देखू। CSS क्वेरी .relatedarticles a छै, जे .relatedarticles क्लास असाइन करल गेलय div मे दूनू a तत्वक कें लाबै छै. एकरऽ बाद तीन “खराब” क्वेरी छै, यानी कि ऐन्हऽ क्वेरी जे ई तत्वऽ क॑ संदर्भ नोड के रूप म॑ चलाबै के समय वू नै करै छै जे हम्मं॑ चाहै छियै कि वू कर॑ । हम बता सकैत छी जे ओ सब अहां के अपेक्षा सं अलग व्यवहार किएक क रहल छथिन्ह. प्रश्न मे तीनटा खराब प्रश्न अछि :
//text(): दस्तावेज़ में सभी पाठ वापस करता है। //a/text(): दस्तावेज़ मे लिंक क' अंदर सभ पाठ वापस करैत अछि. ./a/text(): कोनो परिणाम नहि दैत अछि.
एहि परिणामक कारण ई अछि जे जखन कि अहाँक संदर्भ CSS क्वेरी सँ वापस कएल गेल तत्व अछि, // पूरा दस्तावेजक विरुद्ध जाइत अछि. ई एक्सपाथ के ताकत छै; सीएसएस कोनो नोड सँ कोनो पूर्वज धरि नहि जा सकैत अछि आ फेर ओहि पूर्वजक कोनो भाइ-बहिन धरि नहि जा सकैत अछि, आ ओहि भाइ-बहिनक कोनो वंशज धरि नहि जा सकैत अछि । मुदा एक्सपाथ क' सकैत अछि. एम्हर, ./ वर्तमान नोड केरऽ बच्चा स॑ पूछताछ करै छै, जहाँ बिन्दु (.) वर्तमान नोड क॑ दर्शाबै छै, आरू फोरवर्ड स्लैश (/) कोनों चाइल्ड नोड प॑ जाय क॑ दर्शाबै छै — चाहे ई कोनों विशेषता, तत्व, या पाठ होय, पथ केरऽ अगला भाग स॑ निर्धारित होय छै. लेकिन कोनों चाइल्ड कोनों तत्व नै छै जे सीएसएस क्वेरी द्वारा चुनल गेल छै, अइ प्रकार ओ क्वेरी सेहो किछु नहि वापस करएयत छै. ओहि अंतिम डेमो मे तीन टा नीक क्वेरी अछि:
.//पाठ (), 1। ./पाठ (), 1। सामान्य-अंतरिक्ष (. / पाठ ())।
normalize-space क्वेरी XPath फंक्शन कें उपयोग कें प्रदर्शन करयत छै, मुदा अन्य क्वेरी मे शामिल एकटा समस्या कें सेहो ठीक करयत छै. एचटीएमएल के संरचना एहि तरहेँ अछि :
सेलेनियम वेबड्राइवर के साथ अपने फीचर परीक्षण स्वचालित करना |
क्वेरी टेक्स्ट नोड कें शुरु आत आ अंत मे एकटा लाइन फीड वापस करयत छै,आओर normalize-space एकरा हटा दैत अछि. कोनों XPath फंक्शन कें उपयोग करनाय जे इनपुट XPath कें साथ बूलियन कें अलावा किछ अन्य चीज वापस करय छै, अन्य फंक्शनक पर लागू होयत छै. निम्नलिखित डेमो मे अनेक उदाहरण देखाओल गेल अछि: ब्रायन रासमुसेन द्वारा Pen xpath फंक्शन उदाहरण [forked] देखू. पहिल उदाहरण एकटा समस्या कें दर्शा रहल छै जइ पर अहां कें ध्यान देनाय चाही. विशेष रूप स, निम्नलिखित कोड:
document.queryXPaths ("सबस्ट्रिंग-बाद (//एक/@href,'https://')");
...एकटा स्ट्रिंग वापस करैत अछि:
"www.smashingmagazine.com/2018/04/फीचर-परीक्षण-सेलेनियम-वेबड्राइवर/"
एकर कोनो मतलब छै ने? ई फंक्शन सरणी नै वापस करै छै बल्कि एकल स्ट्रिंग या एकल नंबर वापस करै छै. फंक्शन क॑ कतहीं भी कई रिजल्ट के साथ चलाबै स॑ केवल पहिलऽ रिजल्ट वापस मिलै छै । दोसर परिणाम ई दर्शाबैत अछि जे हम सब वास्तव मे की चाहैत छी:
document.queryCSSSelectors ("एक").queryXPaths ("सबस्ट्रिंग-बाद (./@href,'https://')");
जे दू स्ट्रिंग के सरणी वापस करैत अछि:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/स्वचालित-परीक्षण-परिणाम-सुधार-सुलभता/"]
XPath फंक्शन क॑ भी जावास्क्रिप्ट म॑ फंक्शन के तरह नेस्ट करलऽ जाब॑ सकै छै । अतः, यदि हम स्मैशिंग मैगजीन यूआरएल संरचना जानते हैं, तो हम निम्नलिखित कर सकते हैं (टेम्पलेट लिटरल के उपयोग करना अनुशंसित है): `अनुवाद करू ( उपस्ट्रिंग ( उपस्ट्रिंग-बाद (./@href, ‘www.smashingmagazine.com/') ,९), २. '/','')`
ई कनि बेसी जटिल भ' रहल अछि जे एकरा जे काज करैत अछि ओकर वर्णन करय बला टिप्पणीक आवश्यकता अछि: www.smashingmagazine.com/ के बाद href विशेषता सँ सभ यूआरएल ल' लिअ, पहिल नौ वर्ण केँ हटाउ, फेर फॉरवर्ड स्लैश (/) वर्ण केँ किछुओ नहि मे अनुवाद करू जाहि सँ समाप्त होबय बला फॉरवर्ड स्लैश सँ मुक्ति भेटि जाय. परिणामस्वरूप सरणी: 1।
["फीचर-परीक्षण-सेलेनियम-वेबड्राइवर","स्वचालित-परीक्षण-परिणाम-सुधार-सुलभ-सुलभ"]
अधिक XPath उपयोग केस एक्सपैथ सचमुच परीक्षण मे चमकि सकैत अछि। कारण देखना मुश्किल नै छै, कैन्हेंकि XPath के उपयोग DOM म॑ हर तत्व क॑, DOM म॑ कोनो भी स्थिति स॑ प्राप्त करै लेली करलऽ जाब॑ सकै छै, जबकि CSS नै मिल॑ सकै छै । अहां CSS क्लास कें बहुत आधुनिक बिल्ड सिस्टम मे सुसंगत रहय पर भरोसा नहि कयर सकय छी, मुदा XPath कें साथ, हम बेसि मजबूत मिलान करय मे सक्षम छी जे कोनों तत्व कें पाठ सामग्री की छै, चाहे कोनों बदलैत DOM संरचना कें परवाह कैल गेल होय. एहन तकनीक पर शोध भेल अछि जाहि सं अहां लचीला एक्सपैथ टेस्ट क सकय छी. सिर्फ एहि लेल जे कोनो सीएसएस चयनकर्ता आब काज नहि करैत अछि, एहि लेल जे कोनो चीज क नाम बदलल गेल अछि या हटा देल गेल अछि, एहि स बेसी खराब किछु नहि अछि। एक्सपाथ मल्टीपल लोकेटर निष्कर्षण पर सेहो वास्तव मे बढ़िया अछि । कोनों तत्व कें मिलान करय कें लेल XPath क्वेरी कें उपयोग करय कें एक सं बेसि तरीका छै. सीएसएस के संग सेहो इएह बात अछि। लेकिन एक्सपाथ क्वेरी चीजऽ म॑ अधिक लक्षित तरीका स॑ ड्रिल करी सकै छै जे जे वापस मिलै छै ओकरा सीमित करी दै छै, जेकरा स॑ आपने क॑ एगो विशिष्ट मिलान खोजै के अनुमति मिलै छै, जहां कई संभावित मिलान होय सकै छै । उदाहरण कें लेल, हम XPath कें उपयोग एकटा विशिष्ट h2 तत्व कें वापस करय कें लेल करय सकय छी जे एकटा div कें अंदर समाहित छै जे तुरंत एकटा भाई-बहिन div कें बाद आबै छै जे, बदला मे, एकटा चाइल्ड इमेज तत्व कें समाहित करय छै जइ पर एकटा data-testID="leader" विशेषता छै:
ई हेडलाइन नहि भेटत
ई हेडलाइन सेहो नहि भेटत
नेता छवि क लेल हेडर
ई प्रश्न अछि : १. document.queryXPaths (` //div [ निम्नलिखित-भाई::div [1]। /img [@data-testID='नेता']। ] . /h2/ 10। पाठ () 1। `);
एकटा डेमो छोड़ि दी जे ई सब कोना एक संग अबैत अछि: देखू पेन कॉम्प्लेक्स एच 2 क्वेरी [कांटा] ब्रायन रासमुसेन द्वारा। त, हँ। XPath कें उपयोग करयत कोनों परीक्षण मे कोनों तत्व कें लेल बहुत सं संभावित मार्ग छै. XSLT 1.0 अवमूल्यन हम शुरू मे कहने रही जे क्रोम टीम ब्राउजर स एक्सएसएलटी 1.0 सपोर्ट कए हटाबय क योजना बना रहल अछि । ई महत्वपूर्ण छै, कैन्हेंकि XSLT 1.0 दस्तावेज रूपांतरण लेली XML-केंद्रित प्रोग्रामिंग के उपयोग करै छै जे बदला म॑ XPath 1.0 प॑ निर्भर छै, जे अधिकांश ब्राउज़र म॑ मिलै छै. जखन से होयत तखन हम एक्सपाथ के एकटा प्रमुख घटक गंवा देब. लेकिन ई तथ्य क॑ देखत॑ हुअ॑ कि एक्सपैथ सचमुच म॑ टेस्ट लिखै लेली बढ़िया छै, हमरा ई संभावना कम लगै छै कि समग्र रूप स॑ एक्सपैथ जल्दिये गायब होय जैतै । कहल गेल अछि जे हम देखलहुं जे कोनो फीचर छीनला पर लोक के रुचि भ’ जाइत छनि. आओर ई निश्चित रूप सं XSLT 1.0 के अप्रचलित करय के मामला मे सही अछि. हैकर न्यूज पर एकटा पूरा चर्चा भ’ रहल अछि जे एहि निंदा के खिलाफ तर्क सं भरल अछि. पोस्ट स्वयं XSLT के संग ब्लॉगिंग फ्रेमवर्क बनेबाक एकटा बढ़िया उदाहरण अछि. अहांचर्चा क॑ खुद पढ़ी सकै छियै, लेकिन ई बात म॑ आबी जाय छै कि कोना जावास्क्रिप्ट क॑ एक्सएलएसटी लेली शिम के रूप म॑ इस्तेमाल करलऽ जाय सकै छै ताकि वू तरह के मामला क॑ संभाललऽ जाय सक॑ । हम इहो सुझाव देखलहुं अछि जे ब्राउज़र कए SaxonJS क उपयोग करबाक चाही, जे जावास्क्रिप्ट क Saxon XSLT, XQUERY, आ XPath इंजन क पोर्ट अछि । ई एगो रोचक विचार छै, खास करी क॑ जब॑ कि सैक्सन-जेएस ई विनिर्देशऽ के वर्तमान संस्करण क॑ लागू करै छै, जबकि ऐन्हऽ कोय ब्राउज़र नै छै जे 1.0 स॑ परे एक्सपाथ या एक्सएसएलटी केरऽ कोनो भी संस्करण क॑ लागू करै छै, आरू कोय भी नै छै जे एक्सक्वेरी क॑ लागू करै छै । हम सैक्सनजेएस आ सैक्सन इंजन के अन्य संस्करण के पाछु के कंपनी सैक्सनिका में नॉर्म टोवे-वाल्श सं संपर्क केलहुं. ओ कहलनि: “यदि कोनो ब्राउज़र विक्रेता क॑ ब्राउजर म॑ आधुनिक एक्सएमएल तकनीक क॑ एकीकृत करै लेली सैक्सनजेएस क॑ शुरुआती बिंदु के रूप म॑ लेबै म॑ दिलचस्पी छेलै त॑ हम्मं॑ ओकरा स॑ एकरा प॑ चर्चा करै लेली रोमांचित होय जाय छियै ।”— नॉर्म टोवे-वाल्श
मुदा इहो जोड़लनि जे: "हमरा बहुत आश्चर्य होतै अगर कोय सोचै छै कि सैक्सनजेएस क॑ ओकरऽ वर्तमान रूप म॑ ल॑ क॑ ओकरा ब्राउज़र बिल्ड म॑ अपरिवर्तित रूप स॑ छोड़ना आदर्श तरीका होतै । एक ब्राउज़र विक्रेता, ई तथ्य के प्रकृति के अनुसार कि वू ब्राउज़र बनाबै छै, एकीकरण के बहुत गहराई स॑ स्तर प॑ संपर्क करी सकै छै, जेतना कि हम्मं॑ ‘बाहर स॑’ करी सकै छियै।“— नॉर्म टोवे-वाल्श
ध्यान देब’ बला बात अछि जे टोवे-वाल्श के ई टिप्पणी एक्सएसएलटी के अवमानना के घोषणा सं करीब एक सप्ताह पहिने आयल छल. निष्कर्ष हम आगू आगू बढ़ि सकैत छलहुँ। लेकिन हमरा आशा छै कि ई एक्सपाथ केरऽ शक्ति के प्रदर्शन करलकै आरू आपने सब क॑ बहुत उदाहरण देलऽ गेलऽ छै कि एकरऽ उपयोग बड़ऽ काम हासिल करै लेली कोना करलऽ जाय । ई ब्राउज़र स्टैक म॑ पुरानऽ तकनीक केरऽ एगो सही उदाहरण छै जेकरऽ आज भी बहुत उपयोगिता छै, भले ही आपने क॑ कहियो पता नै छेलै कि एकरऽ अस्तित्व छै या एकरा लेली हाथ बढ़ै प॑ कहियो विचार नै करलऽ होय । आगू पढ़ब
“प्राकृतिक भाषा के साथ स्वचालित वेब परीक्षण के लचीलापन बढ़ाना” (एसीएम डिजिटल लाइब्रेरी) मरौन आयली, यूसुफ बकौनी, नादर जल्लौल, आरू रीमा किलानी द्वाराई लेख लचीला परीक्षण लिखै के लेलऽ बहुत सारा एक्सपैथ उदाहरण प्रदान करै छै. XPath (MDN)अगर अहां एकटा तकनीकी व्याख्या चाहय छी जे XPath कोना काज करय छै, त इ शुरू करय कें लेल एकटा बेहतरीन जगह छै. XPath Tutorial (ZVON)हमरा ई ट्यूटोरियल अपन सीखय मे सबसँ बेसी सहायक लागल अछि, जकर बदौलत बहुत रास उदाहरण आ स्पष्ट व्याख्या अछि. XPatherई इंटरैक्टिव टूल अहां कें कोड कें साथ सीधा काम करय कें अनुमति देयत छै.
