हांव वर्सां भितर एक ट्रेंड पळोवपाक इतलो काळ फ्रंट-एंड डेव्हलपमेंटांत आसां: प्रोग्रामिंगाच्या नव्या प्रतिमानान काम करपी तरणाटे विकसक ताचो इतिहासीक संदर्भ समजनासतना. कितेंय खबर नासप हें अर्थांतच पुरायपणान समजून घेवपासारकें. वेब ही एक सामकी व्हडली सुवात, तातूंत विंगड विंगड कुशळटाय आनी खाशेलपणांचो संच आसा, आनी आमकां कितें खबर ना तें आमकां सदांच कळना. ह्या मळार शिकप हो एकदां घडटा आनी सोंपता अशें न्हय तर एक चालू प्रवास. केस इन पॉयंट: म्हज्या पंगडांतल्या कोणे तरी विचारलें की वापरपी UI तल्या विशिश्ट टॅबा पासून पयस नेव्हिगेट करतात काय ना तें सांगप शक्य आसा काय ना. हांवें JavaScript ची beforeunload इव्हेंट दाखयली. पूण ह्या आदीं हाताळिल्ल्यांक हें शक्य आसा हें खबर आसा कारण तांकां हेर साइटांचेर जतनाय घेवंक नाशिल्ल्या डेटा विशीं इशारो मारला, जाचे खातीर beforeunload हो एक सादारण वापर केस आसा. तशेंच हांवें म्हज्या सहकाऱ्याक बऱ्या मापा खातीर pageHide आनी visibilityChange घडणुको दाखयल्यो. तें म्हाका कशें कळ्ळें? कारण तो दुसऱ्या प्रकल्पांत आयिल्लो, सुरवेक जावास्क्रिप्ट शिकतना ताचेर अभ्यास केल्लो म्हणून न्हय. खरें म्हणल्यार आधुनीक फ्रंट-एंड फ्रेमवर्क तांचे आदीं आशिल्ल्या तंत्रज्ञान दिग्गजांच्या खांदार उबे आसात. ते विकास पद्दती अमूर्त करतात, चड करून बऱ्या विकसक अणभवाक लागून जो परंपरेन सगळ्यांक घडये कळपाक जाय आशिल्लीं गरजेचीं फ्रंट-एंड संकल्पना आशिल्लीं जाणून घेवपाची वा स्पर्श करपाची गरज उणी करता, वा लेगीत ना करता. CSS ऑब्जेक्ट मॉडेल (CSSOM) चो विचार करचो. तुमकां अपेक्षा आसूं येता की CSS आनी JavaScript हातूंत काम करपी कोणाकूय हाताळणी CSSOM अणभवाची एक गट आसा, पूण सदांच अशें जावचें ना. हांवें काम केल्ल्या ई-कॉमर्स साइट खातीर रिएक्ट प्रकल्प आशिल्लो जंय आमकां सद्या निवडिल्ल्या फारीकणी पुरवणदाराक स्टायलशीट लोड करपाची गरज आशिल्ली. समस्या म्हळ्यार स्टायलशीट दर एका पानाचेर लोड जाताली जेन्ना ताची खरेंच गरज फकत एका विशिश्ट पानाचेर आसताली. हें घडोवपाचें काम दिल्ल्या विकसकान केन्नाच स्टायलशीट डायनॅमिक रितीन लोड करूंक नाशिल्लें. परतून, जेन्ना रिएक्ट तुमी पाविल्लो पारंपारीक पद्दत पयस अमूर्त करता तेन्ना हें पुरायपणान समजता. CSSOM तुमच्या दिसपट्ट्या कामांत तुमकां जाय अशें न्हय अशी शक्यताय आसा. पूण एकदांच जावपी प्रसंगांत लेगीत कांय वेळार ताचे कडेन संवाद सादचो पडटलो अशी शक्यताय आसा. ह्या अणभवांनी म्हाका हो लेख बरोवपाची प्रेरणा मेळ्ळी. रानांत जायतीं सद्याचीं वेब खाशेलपणां आनी तंत्रगिन्यान आसात, जांकां तुमी तुमच्या दिसपट्ट्या कामांत केन्नाच थेट स्पर्श करूंक शकनात. घडये तुमी वेब डेव्हलपमेंटांत सामके नवे आसतले आनी फकत तांची खबर ना कारण तुमी एका विशिश्ट चौकटीच्या अमूर्ततायेंत बुडल्यात जाका लागून तुमकां ती खोलायेन कळपाची गरज ना, वा बिल्कुल लेगीत. हांव खास करून XML विशीं उलयतां, जी आमच्यांतल्या जायत्यांक खबर आसा ती एक पुर्विल्ली भास HTML पासून पुरायपणान वेगळी ना. हांव हें हाडटां कारण हालींच्या WHATWG चर्चांनी सुचयलां की XSLT प्रोग्रामिंग म्हणून वळखतात त्या XML स्टॅकाचो एक म्हत्वाचो भाग ब्राउझरां वयल्यान काडून उडोवचो. हें खरें म्हणल्यार आमचे कडेन वर्सां थावन आशिल्लें पोरणें, सद्याचें तंत्रज्ञान जें म्हजो पंगड आशिल्ल्या CSSOM परिस्थिती इतल्या वेव्हारीक कितें तरी कामाक वापरूं येतालें. तुमी हाचे पयलीं XSLT कडेन काम केलां? आमी ह्या पोरन्या तंत्रज्ञानाचेर चड झुकतात काय ना आनी आयच्या खऱ्या संवसारांतल्या समस्यांक तोंड दिवपा खातीर XML संदर्भा भायर ताच्या खाशेलपणांचो फायदो घेतात काय ना तें पळोवया. XPath: केंद्रीय एपीआय सरळ XML दृष्टीकोनाच्या भायर घडये सगळ्यांत उपेगी पडपी सगळ्यांत म्हत्वाचें XML तंत्रज्ञान म्हणल्यार XPath, एक क्वेरी भास जी तुमकां एका मुळाव्या घटका वांगडा मार्कअप झाडांत खंयचोय नोड वा गुणधर्म सोदून काडपाक परवानगी दिता. म्हाका XSLT कडेन वैयक्तीक मोग आसा, पूण तोय XPath चेर आदारून आसा, आनी क्रमवारी म्हत्वांत वैयक्तीक मोग कुशीक दवरचो पडटलो. XSLT काडून उडोवपाच्या युक्तिवादांत XPath चो कसलोच उल्लेख ना, देखून हांवें समजून घेतलां की ताका अजूनय परवानगी आसा. तें बरें कारण XPath हो ह्या तंत्रज्ञानाच्या संचांतलो केंद्रीय आनी सगळ्यांत म्हत्वाचो API आसा, खास करून सामान्य XML वापरा भायर वापरपाक कितें तरी सोदपाचो यत्न करतना. हें म्हत्वाचें कारण, तुमच्या पानांतले चडशे घटक सोदपाक CSS निवडक वापरूं येतात, तरी तांकां ते सगळे सोदूंक मेळनात. ते भायर, DOM त ताच्या सद्याच्या सुवातेर आदारीत घटक सोदपाखातीर CSS निवडक वापरूंक मेळना. XPath करूंक शकता. आतां, हें वाचपी तुमच्यांतल्या कांय जाणांक XPath खबर आसूं येता, आनी कांय जाणांक नासूं येता. XPath हो तंत्रगिन्यानाचो एक बरोच व्हडलो वाठार, आनी हांव खरेंच सगळ्यो मुळाव्यो गजाली शिकवंक शकना आनी तशेंच अशा एकाच लेखांत ताचे कडेन करपाच्यो थंड गजाली दाखोवंक शकना. हांवें खरेंच तो लेख बरोवपाचो यत्न केलो, पूण सरासरी स्मॅशिंग मॅगझीन प्रकाशन 5 हजार उतरां परस चड वचना. हांव पयलींच चडांत आशिल्लो2 हजार उतरां जाल्यार मुळाव्या गजालींनी फकत अर्द्या वाटेर. तर, हांव XPath कडेन थंड गजाली करपाक सुरवात करतलों आनी तुमकां कांय दुवे दितलों जीं तुमकां ही गजाल मनोरंजक दिसल्यार मुळाव्या गजालीं खातीर वापरूं येता. XPath & CSS एकठांय करप XPath घटकांक क्वेरी करतना CSS निवडकांनी करूंक शकना अशीं जायतीं कामां करूंक शकता. पूण CSS निवडक XPath करूंक शकना अशीं कांय कामांय करूंक शकतात, तीं अशीं, वर्ग नांवान घटकांक क्वेरी करप.
सीएसएस हें नांव XPath हें नांव .माझ्यावर्गाचो /*[contains (@ वर्ग, "माझ्या वर्ग")]
ह्या उदाहरणांत, CSS .myClass वर्गनाव आशिल्ल्या घटकांक क्वेरी करता. मजगतीं, XPath उदाहरण “myClass” स्ट्रिंगान गुणधर्म वर्ग आशिल्ल्या घटकांक क्वेरी करता. म्हणल्यार, तो खंयच्याय गुणधर्मांत myClass आशिल्ले घटक निवडटा, तातूंत .myClass वर्गनाव आशिल्ले घटक आसपावीत आसात — तशेंच स्ट्रिंगांत “myClass” आशिल्ले घटक, जशे की .myClass2. XPath त्या अर्थान चड व्यापक आसा. म्हणजे, ना. आमी CSS भायर काडून XPath वरवीं सगळे घटक निवडपाक सुरवात करची अशें हांव सुचना. असोच मुद्दो न्हय. मुद्दो म्हणल्यार XPath अशीं कामां करूंक शकता जीं CSS करूंक शकनात आनी अजूनय खूब उपेगी पडूं येतात, जरी तें ब्राउझर स्टॅकांतलें पोरणें तंत्रज्ञान आसलें आनी पयले नदरेन स्पश्ट दिसना. दोनूय तंत्रज्ञान एकठांय वापरूंया फकत आमकां शक्य आसा म्हणून न्हय, पूण आमी प्रक्रियेंत XPath विशीं कितें तरी शिकतले म्हणून, तुमच्या स्टॅकांतलें तें आनीक एक साधन करपाक — तुमकां खबर नासलें आसतलें तें सगळें तें आशिल्लें! समस्या म्हळ्यार JavaScript ची document.evaluate पद्दत आनी आमी JavaScript खातीर CSS API कडेन वापरतात त्यो वेगवेगळ्यो क्वेरी निवडपी पद्दती विसंगत आसात. आमकां सुरवात करपा खातीर हांवें एक सुसंगत क्वेरींग एपीआय केला, जरी मान्य, आमी हांगा कितें करतात ताचे पासून पयस वचप आशिल्ल्यान हांव तातूंत चडसो विचार केल्लो ना. हांगा परत वापरपाक येवपी क्वेरी कंस्ट्रक्टराचें एक सामकें सादें काम करपी उदाहरण आसा: ब्रायन रासमुसेन हाणें बरयल्लो Pen queryXPath [forked] पळयात. हांवें दस्तावेज वस्तूचेर दोन पद्दती जोडल्यात: queryCSSSelectors (जें मुळाव्यान querySelectorAll आसा) आनी queryXPaths. हे दोनूय queryResults वस्तू परत दितात:
{ 1 . queryType: नोड्स | स्ट्रिंग | क्रमांक | बूलीयन, २. परिणाम: खंयचेय [] // html घटक, xml घटक, स्ट्रिंग्स, संख्या, बूलियन, queryCSSSelectors: (क्वेरी: स्ट्रिंग, दुरुस्ती: बूलियन) => क्वेरीरिजल्ट, queryXpaths: (क्वेरी: स्ट्रिंग, दुरुस्ती: बूलियन) => क्वेरीरिजल्ट } .
queryCSSSelectors आनी queryXpaths फंक्शन तुमी तांकां दिल्ले क्वेरी परिणाम ऍरेंतल्या घटकांचेर चालीक लायतात, जो मेरेन परिणाम ऍरे प्रकार नोड्सांची आसता, अर्थांत. नाजाल्यार, तो रिकामे ऍरे आनी नोड्स प्रकार आशिल्लो queryResult परत दितलो. दुरुस्ती गुणधर्म खरे करपाक सेट केल्यार, कार्यां तांचे स्वताचे queryResults बदलतले. खंयचेच परिस्थितींत उत्पादन वातावरणांत हाचो वापर करचो न्हय. हांव अशें करतां शुध्दपणान दोन क्वेरी एपीआय एकठांय वापरपाचे वेगवेगळे परिणाम दाखोवपा खातीर. उदाहरण क्वेरीज हांवें वेगवेगळ्या XPath क्वेरींचीं कांय उदाहरणां दाखोवंक सोदतां जीं तांकां करूंक शकतात तीं कांय बळिश्ट गजाली आनी हेर पद्दतींच्या जाग्यार तीं कशीं वापरूं येतात तें दाखयतात. पयलें उदाहरण म्हणल्यार //li/text(). हाका लागून सगळ्या li घटकांक क्वेरी जाता आनी तांचे मजकूर नोड्स परत मेळटात. तर, जर आमी सकयल दिल्ल्या एचटीएमएलाचेर क्वेरी करपाची आसली जाल्यार:
- हें नांव
- एक
- दोन
- तीन
...हें परत दितात:
{"queryType":"xpathEvaluate","results":["एक","दोन","तीन"],"resultType":"string"}
म्हणल्यार आमकां सकयल दिल्लो ऍरे मेळटा: ["एक","दोन","तीन"]. सादारणपणान, तुमी तें मेळोवपाखातीर li घटकांखातीर क्वेरी करतले, त्या क्वेरीचो परिणाम ऍरेंत करतले, ऍरेचें मॅप करतले आनी दर एका घटकाचो मजकूर नोड परत करतले. पूण आमी तें चड संक्षिप्तपणान XPath वरवीं करूंक शकतात: document.queryXPaths ("//li / मजकूर ()").परिणाम.
मजकूर नोड मेळोवपाचो मार्ग म्हणल्यार text() वापरप हें लक्षांत घेयात, जें फंक्शन स्वाक्षरी सारकें दिसता — आनी तें आसा. तो घटकाचो मजकूर नोड परत दिता. आमच्या उदाहरणांत, मार्कअपांत तीन li घटक आसात, दरेक घटकांत मजकूर ("एक", "दोन", आनी "तीन") आसता.
text() क्वेरीचें आनीक एक उदाहरण पळोवया. हो आमचो मार्कअप अशें समजून घेयात:
href गुणधर्म मोल परत दिवपी क्वेरी बरोवया: document.queryXPaths ("//a [text () = 'साइन इन']/@href").परिणाम.
ही सद्याच्या दस्तावेजाचेर XPath क्वेरी आसा, निमाण्या उदाहरणा प्रमाणें, पूण हे खेपे आमी “साइन इन” मजकूर आशिल्ल्या दुव्याचें (एक घटक) href गुणधर्म परत दितात. प्रत्यक्ष परतून आयलेंपरिणाम म्हळ्यार ["/login.html"]. XPath कार्यांचो नियाळ XPath फंक्शनांचो आंकडो आसा, आनी तुमकां तांची वळख नासूं येता. कितलेशेच आसात, म्हाका दिसता, जाणून घेवपा सारके आसात, तातूंत सकयल दिल्ले आसात:
starts-withजर मजकूर विशिश्ट हेर मजकूर उदाहरणान सुरू जाता जाल्यार, href गुणधर्म http: पासून सुरू जाल्यार starts-with(@href, 'http:') खरे परत दिता. containsजर मजकूरांत विशिश्ट हेर मजकूर उदाहरण आसत जाल्यार, मजकूर नोडांत खंयच्याय सुवातेर “Smashing Magazine” अशीं उतरां आसल्यार contains(text(), "Smashing Magazine") खरे परत दिता. countक्वेरीक कितले जुळोवणी आसात हाची गणना परत दिता. देखीक, count(//*[starts-with(@href, 'http:']) संदर्भ नोडांतल्या कितल्या दुव्यांक http: पासून सुरू जावपी मजकूर आशिल्ल्या href गुणधर्म आशिल्ले घटक आसात हाची गणना परत दिता. substringजावास्क्रिप्ट उपस्ट्रिंग सारकें काम करता, फकत तुमी स्ट्रिंग आर्ग्युमेंट म्हणून पास करतात. देखीक, substring("म्हजो मजकूर", 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 फुडली आनी फाटली व्हायटस्पेस काडून आनी व्हायटस्पेस वर्णांच्या क्रमांची सुवात एकूच रिक्त करून सामान्य केल्ली व्हायटस्पेस आशिल्ली आर्ग्युमेंट स्ट्रिंग परत करता. notआर्ग्युमेंट फॉल्स आसल्यार बूलियन true परत दिता, नाजाल्यार false. trueबूलियन खरे परत दिता. falseबूलियन false परत दिता. concatजावास्क्रिप्ट concat सारकीच गजाल, सोडल्यार तुमी ती स्ट्रिंगाचेर पद्दत म्हणून चालीक लायना. ताचे बदला, तुमकां जोडपाक जाय आशिल्लीं सगळीं स्ट्रिंग्स तुमी घालतात. string-lengthहें जावास्क्रिप्ट string-length सारकें न्हय, पूण ताचे परस ताका आर्ग्युमेंट म्हणून दिल्ले स्ट्रिंगाची लांबाय परत दिता. translateहें स्ट्रिंग घेता आनी दुसरो आर्ग्युमेंट तिसऱ्या आर्ग्युमेंटांत बदलता. देखीक, translate("abcdef", "abc", "XYZ") XYZdef आउटपुट करता.
ह्या खाशेल्या XPath फंक्शनां भायर, हेर जायते फंक्शन आसात जे तांच्या JavaScript समकक्षां प्रमाणच काम करतात — वा मुळाव्यान खंयचेय प्रोग्रामिंग भाशेंतल्या समकक्षांक — जे तुमकां घडये उपेगी पडटले, जशे की माळो, कमानी, वाटकुळो, बेरीज आनी हेर. सकयल दिल्लो डेमो ह्या दरेका कार्याचें चित्रण करता: ब्रायन रासमुसेना कडल्यान Pen XPath Numerical functions [forked] पळयात. लक्षांत दवरात की, चडशा स्ट्रिंग मॅनिपुलेशन फंक्शनां प्रमाण, जायते संख्यात्मक फंक्शन एकूच इनपुट घेतात. हें, अर्थांतच, कारण तांचो वापर क्वेरी करपाखातीर आसपाक जाय, जशें निमाण्या XPath उदाहरणांत: //li [मजलो (मजकूर ()) > 250] / @ val
तुमी त्यो वापरल्यार, चडशीं उदाहरणां करतात तशें, तुमी तें मार्गाक जुळपी पयल्या नोडाचेर चालीक लावपाक सोंपता. तशेंच कांय प्रकार रुपांतर कार्यां आसात जीं तुमी घडये टाळपाक जाय कारण जावास्क्रिप्टांत पयलींच स्वताचे प्रकार रुपांतर समस्या आसात. पूण अशेय कांय वेळ येवंक शकतात जेन्ना तुमकां स्ट्रिंग हेर खंयच्याय क्रमांकाचेर तपासपा खातीर क्रमांकांत रुपांतरीत करपाची आसता. कितेंय तरी प्रकार सेट करपी फंक्शनां म्हळ्यार बूलियन, नंबर, स्ट्रिंग आनी नोड. हे म्हत्वाचे XPath डेटाटायप आसात. आनी तुमी कल्पना करतात तशें, हीं चडशीं फंक्शनां DOM नोड्स नाशिल्ल्या डेटाटायपांचेर वापरूं येतात. देखीक, substring-after आमी पयलींच कव्हर केल्ल्या प्रमाणें स्ट्रिंग घेता, पूण ती href गुणधर्मांतल्यान स्ट्रिंग आसूं येता. तशेंच तो फकत एक तार आसूं येता:
const testSubstringAfter = document.queryXPaths ("उपस्ट्रिंग-उपरांत ('नमस्कार संवसार',' ')");
उक्त्यान सांगचें जाल्यार, हें उदाहरण आमकां ["world"] म्हणून परिणाम ऍरे परत दितलें. हें कृतींत दाखोवपाक, हांवें DOM नोड्स नाशिल्ल्या गजालीं आड फंक्शनां वापरून एक डेमो पान केलां: ब्रायन रासमुसेन हाणें बरयल्लो Pen queryXPath [forked] पळयात. तुमी अणकार करपाच्या कार्याचो अजापीत करपी आंग लक्षांत घेवंक जाय, तो म्हणल्यार तुमकां दुसऱ्या आर्ग्युमेंटांत एक वर्ण आसल्यार (म्हळ्यार, तुमकां अणकार करपाक जाय आशिल्ल्या अक्षरांची वळेरी) आनी अणकार करपाक जुळपी वर्ण ना जाल्यार, तो वर्ण आउटपुटांतल्यान काडून उडयतात. अशे तरेन हें: १.
translate('हॅलो, म्हजें नांव इनिगो मोंटोया, तुवें म्हज्या बापायक मारलो, मरपाची तयारी कर','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
...स्ट्रिंगांतले परिणाम, रिक्तस्थान सयत: [" * * ** "]
हाचो अर्थ “a” अक्षर तारे (*) कडेन अणकारीत जाता, पूण लक्ष्य स्ट्रिंग दिल्लो अणकार नाशिल्लो हेर दरेक वर्ण पुरायपणान काडून उडयतात. धवी सुवात हीच आमकां उरल्याअणकारीत केल्ल्या “अ” अक्षरां मदीं. मागीर परतून ही क्वेरी:
translate('हॅलो, म्हजें नांव इनिगो मोंटोया, तुवें म्हज्या बापायक मारलो, मरपाची तयारी कर','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
...हाका समस्या ना आनी असो दिसपी परिणाम आउटपुट करता:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
XPath translate फंक्शन जें करता तें सारकें करपाक JavaScript त सोपो मार्ग ना अशें तुमकां दिसूं येता, जरी जायत्या वापर प्रकरणां खातीर, replaceAll with regular expressions तें हाताळूंक शकता. हांवें दाखयल्लो तोच पद्दत तुमी वापरूं येताले, पूण तुमकां जाय तें फकत स्ट्रिंग्स अणकारप आसल्यार तो उप-अनुकूल आसा. जावास्क्रिप्ट आवृत्ती पुरवण करपाक सकयल दिल्लो डेमो XPath चें अणकार कार्य रॅप करता: ब्रायन रासमुसेन हांणी बरयल्लें पेन ट्रान्सलेट फंक्शन [forked] पळयात. अशें कितेंय खंय वापरूं येता? तीन सुवातीचें ऑफसेट आशिल्लें सीझर सायफर एनक्रिप्शन (देखीक- इ.स.प. ४८ सावन वयल्या पांवड्यावेलें एनक्रिप्शन) विचारांत घेयात:
translate("सीझर रुबिकॉन पार करपाची येवजण करता!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
इनपुट मजकूर “सीझर रुबिकॉन पार करपाची येवजण करता!” परिणाम म्हळ्यार “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” वेगवेगळ्या शक्यतायेचें आनीक एक बेगीन उदाहरण दिवपाक, हांवें एक मेटल फंक्शन तयार केलां जें स्ट्रिंग इनपुट घेता आनी मजकूर परत करपाक ट्रान्सलेट फंक्शन वापरता, तातूंत उमलाउट घेवपी सगळे अक्षर आसपावीत आसात. ब्रायन रासमुसेन हाचें पेन मेटल फंक्शन [फोर्क केल्लें] पळयात.
const धातू = (स्ट्र) => { return translate (str, "AOUaou","ÄÖÜäöü"); } .
आनी, “मोटली क्रू रुल्स, रॉक ऑन ड्यूड्स!”, असो मजकूर दिल्यार, परत येता “मॉटली क्रू रुल्स, रॉक ऑन ड्यूड्स!” उक्त्यान सांगचें जाल्यार ह्या कार्याचे सगळ्या तरांचे पॅरोडी वापर आसूं येतात. जर तें तुमी आसत जाल्यार ह्या टीव्हीट्रोप्स लेखान तुमकां भरपूर प्रेरणा दिवपाक जाय. XPath कडेन CSS वापरप XPath वांगडा CSS निवडपी वापरपाचें आमचें मुखेल कारण याद दवरात: CSS चड करून वर्ग म्हणल्यार कितें तें समजता, जाल्यार XPath कडेन तुमी करपाक शकतात तें सगळ्यांत बरें म्हणल्यार वर्ग गुणधर्माची स्ट्रिंग तुळा. तें चडशा प्रकरणांनी काम करतलें. पूण जर तुमकां केन्नाच अशी परिस्थिती मेळ्ळी की, म्हणल्यार, कोणे तरी .primaryLinks आनी .primaryLinks2 नांवाचे वर्ग तयार केल्यात आनी तुमी .primaryLinks वर्ग मेळोवपाक XPath वापरताले, जाल्यार तुमकां समस्या येवपाची शक्यताय आसा. जो मेरेन अशें कांयच मूर्खपण ना, तो मेरेन तुमी घडये XPath वापरतले. पूण लोक त्या प्रकारचीं मूर्खपणाचीं कामां करतात अशा सुवातींनी काम केलां अशें सांगपाक म्हाका दुख्ख जाता. हांगा CSS आनी XPath एकठांय वापरपी आनीक एक डेमो आसा. जेन्ना आमी दस्तावेजाचो नोड न्हय अशा संदर्भ नोडाचेर XPath चालीक लावपाक कोड वापरतात तेन्ना कितें जाता तें दाखयता. ब्रायन रासमुसेन हाणें बरयल्लें पेन css आनी xpath एकठांय [forked] पळयात. CSS क्वेरी .relatedarticles a आसा, जी .relatedarticles वर्ग नेमिल्ल्या div मदले दोन a घटक हाडटा. ते उपरांत तीन “वायट” क्वेरी आसात, म्हळ्यार संदर्भ नोड म्हणून ह्या घटकांक घेवन चलतना आमकां जाय तें करिनात अशीं क्वेरी. तुमी अपेक्षा करतात ताचे परस ते वेगळे वागतात तें हांव सांगूंक शकता. प्रस्नांतले तीन वायट प्रस्न अशे आसात:
//text(): दस्तावेजांतलो सगळो मजकूर परत दिता. //a/text(): दस्तावेजांतल्या दुव्यां भितरलो सगळो मजकूर परत दिता. ./a/text(): कसलेच परिणाम परत दिना.
ह्या परिणामांचें कारण म्हणल्यार तुमचो संदर्भ CSS क्वेरींतल्यान परतून आयिल्ले घटक आसतना, // पुराय दस्तावेजा आड वता. हें XPath चें बळगें; CSS एका नोडा वयल्यान एका पूर्वजा मेरेन आनी मागीर त्या पूर्वजाच्या भावंडा मेरेन वचूंक शकना, आनी त्या भावाच्या वंशजा मेरेन सकयल वचूंक शकना. पूण XPath करूंक शकता. मजगतीं, ./ सद्याच्या नोडाच्या भुरग्यांक क्वेरी करता, जंय बिंदू (.) सद्याच्या नोडाचें प्रतिनिधित्व करता, आनी फुडें स्लॅश (/) कांय चाइल्ड नोडाक वचपाचें प्रतिनिधित्व करता — तो गुणधर्म, घटक वा मजकूर आसूं मार्गाच्या फुडल्या भागान थारायतात. पूण CSS क्वेरीन वेंचून काडिल्लो घटक भुरगो ना, अशे तरेन ती क्वेरीय कांयच परत दिना. त्या निमाण्या डेमोंत तीन बऱ्यो क्वेरी आसात:
.//मजकूर (), 1.1. ./मजकूर (), 1.1. normalize-space (. / मजकूर ()).
normalize-space क्वेरी XPath फंक्शन वापर दाखयता, पूण हेर क्वेरींत आस्पाव केल्ली समस्याय सुटावी करता. एचटीएमएलाची रचणूक अशी आसा:
सेलेनियम वेबड्रायव्हर वरवीं तुमची वैशिश्ट्य चांचणी स्वयंचलीत करप
क्वेरी मजकूर नोडाचे सुरवेक आनी निमाणें ओळी फीड परत दिता,आनी normalize-space हें काडून उडयता. खंयचेंय XPath फंक्शन वापरप जें इनपुट आशिल्ल्या बूलियन सोडून हेर कितेंय परत दिता XPath हेर फंक्शनांक लागू जाता. सकयल दिल्लो डेमो जायतीं उदाहरणां दाखयता: ब्रायन रासमुसेना कडल्यान Pen xpath फंक्शन्स उदाहरणां [forked] पळयात. पयलें उदाहरण तुमी लक्षांत दवरपाक जाय असो एक समस्या दाखयता. खासा करून सकयल दिल्लो कोड:
document.queryXPaths ("उपस्ट्रिंग-उपरांत (//a/@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 फंक्शनां जावास्क्रिप्टांतल्या फंक्शनां प्रमाणें नेस्ट करूं येतात. देखून, जर आमकां Smashing Magazine URL रचणूक खबर आसल्यार, आमी सकयल दिल्लें करूंक शकतले (साचाच्या अक्षरांचो वापर करपाची शिफारस केल्या): `अणकार करप ( उपस्ट्रिंग ( उपस्ट्रिंग-आफ्टर (./@href, ‘www.smashingmagazine.com/') ,९), ४. '/','')`
हें मात्शें चड गुंतागुंतीचें जावपाक लागलां की ताका तें कितें करता हाचें वर्णन करपी टिप्पणी जाय: www.smashingmagazine.com/ उपरांत href गुणधर्मांतल्यान सगळो URL घेयात, पयले णव अक्षर काडून उडोवचे, मागीर फुडें स्लॅश (/) वर्ण कांयच ना अणकारीत करात जेणे करून सोंपपी फुडें स्लॅशा पासून सुटका मेळटली. परिणामी ऍरे: १.
["feature-testing-selenium-webdriver","स्वचालीत-परीक्षण-परिणाम-सुदारप-सुलभ-सुदारप"]
चड XPath वापर प्रकरणां XPath खरेंच चांचणींत चकचकीत जावंक शकता. कारण पळोवंक कठीण न्हय, कारण XPath वापरूं येता DOM तलो दरेक घटक, DOM च्या खंयच्याय सुवातेर, जाल्यार CSS घेवंक मेळना. जायत्या आधुनीक बिल्ड प्रणालींनी CSS वर्ग सुसंगत उरतात हाचेर तुमी मोजणी करूंक शकनात, पूण XPath वरवीं, बदलपी DOM संरचनेची पर्वा करिनासतना, घटकाचो मजकूर आशय कितें हाचे विशीं आमी चड घटमूट जुळोवणी करूंक सक्षम आसात. तुमकां लवचीक XPath चांचण्यो करपाक मेळपी तंत्रांचेर संशोधन जालां. फकत कितेंय नांव बदललां वा काडून उडयलां म्हणून CSS निवडपी आतां काम करीना म्हणून चांचण्यो चकचकीत जावन अपेसांत पडपा परस वायट कांयच ना. XPath एक परस चड लोकेटर काडपाचेरूय खरोच म्हान आसा. घटकाक जुळोवपाखातीर XPath क्वेरी वापरपाचे एकापरस चड मार्ग आसात. CSS कडेनय तशेंच. पूण XPath क्वेरी चड लक्ष्य केल्ल्या पद्दतीन गजालींनी ड्रिल करूंक शकतात जी परत मेळटा ताचेर मर्यादा घालता, तुमकां एक विशिश्ट जुळोवणी सोदून काडपाक परवानगी दिता जंय जायते संभाव्य जुळोवणी आसूं येतात. देखीक, आमी XPath वापरूं येता विशिश्ट h2 घटक परत करपाक जो div भितर आसता जो रोखडोच भावंड div फाटल्यान आसता जो, परतून, ताचेर data-testID="leader" गुणधर्म आशिल्लो भुरगो प्रतिमा घटक आसता:
ही मथळो मेळूंक नाका
ही मथळोय मेळूंक नाका
मुखेल प्रतिमेखातीर शीर्षक
हीच क्वेरी आसा: दस्तावेज.क्वेरीएक्सपाथ्स (` //div [ 1999 वर्सा. अनुसरण-भांडण::div [1] . /img [@data-testID='फुडारी']. ] . /ह2/ 1.1. मजकूर () 1.1. `);
तें सगळें कशें एकठांय येता तें पळोवपाक एक डेमो घालूंया: ब्रायन रासमुसेन हाणें बरयल्ली पेन कॉम्प्लेक्स एच 2 क्वेरी [फोर्क केल्ली] पळयात. म्हणजे, हय. XPath वापरून केल्ल्या चांचणेंत खंयच्याय घटकाक जायते संभाव्य मार्ग आसात. XSLT 1.0 अवमूल्यन करप हांवें सुरवेक सांगिल्लें की Chrome पंगड ब्राउझरा वयल्यान XSLT 1.0 समर्थन काडून उडोवपाची येवजण करता. तें म्हत्वाचें कारण XSLT 1.0 दस्तावेज रुपांतरा खातीर XML-केंद्रीत प्रोग्रामिंग वापरता जें, परतून, XPath 1.0 चेर आदारीत आसा, जें चडशा ब्राउझरांनी मेळटा. जेन्ना तशें जातलें, तेन्ना आमी XPath चो एक म्हत्वाचो घटक गमायतले. पूण XPath खरेंच चांचण्यो बरोवपाक म्हान आसा हें मतींत घेतल्यार, एकूण XPath बेगीन ना जावपाची शक्यताय म्हाका उणी दिसता. म्हण्टकीच, हांवें लक्षांत घेतलां की, एक खाशेलपण काडून घेतकच लोकांक तातूंत रूची येता. आनी XSLT 1.0 नाका जाल्ल्या बाबतींत तें नक्कीच खरें. हॅकर न्यूजचेर एक पुराय चर्चा घडटा जी ह्या निंदा आड वादांनी भरिल्ली आसा. XSLT कडेन ब्लॉगिंग फ्रेमवर्क तयार करपाची ही पोस्ट स्वता एक व्हड देख. तूंस्वता चर्चा वाचूंक शकता, पूण त्या प्रकारच्यो केशी हाताळपाक XLST खातीर जावास्क्रिप्ट कशी शिम म्हणून वापरूं येता हातूंत ती भितर सरता. ब्राउझरांनी SaxonJS वापरचो अशीय सुचोवण्यो हांवें पळयल्यात, जो JavaScript च्या Saxon XSLT, XQUERY, आनी XPath इंजिनांक पोर्ट आसा. ती एक मनोरंजक कल्पना, खास करून Saxon-JS ह्या स्पेसिफिकेशनांची सद्याची आवृत्ती चालीक लायता, जाल्यार 1.0 परस XPath वा XSLT ची खंयचीय आवृत्ती चालीक लावपी ब्राउझर ना, आनी XQuery चालीक लावपी खंयचोच ना. सॅक्सनजेएस आनी सॅक्सन इंजिनाच्या हेर आवृत्त्यां फाटल्यान आशिल्ली कंपनी सॅक्सनिका हांगाच्या नॉर्म टोवे-वाल्शा कडेन हांवें संपर्क सादलो. ताणें म्हणलें: “खंयच्याय ब्राउझर विक्रेत्याक आधुनीक XML तंत्रज्ञान ब्राउझरांत एकठांय करपा खातीर सुरवातीचो बिंदू म्हूण SaxonJS घेवपाची इत्सा आसल्यार, तांचे कडेन चर्चा करपाक आमी रोमांचित जातले.”— Norm Tovey-Walsh
पूण अशेंय जोडलें: "सॅक्सनजेएस सद्याच्या स्वरुपांत घेवन ताका बदलनासतना ब्राउझर बिल्डांत सोडप हो आदर्श पद्दत आसतलो अशें कोणाकूय दिसलें जाल्यार म्हाका खूब अजाप जातलें. ब्राउझर विक्रेतो, ते ब्राउझर तयार करतात हाच्या स्वभावाक लागून, आमी ‘भायल्यान’ शक्य आशिल्ल्या परस खूब खोल पातळेचेर एकत्रीकरणा कडेन वचूंक शकता.”— Norm Tovey-Walsh
हें लक्षांत घेवपासारकें आसा की टोवे-वाल्श हांचीं टिप्पणीं XSLT डिप्रिकेशन जाहीर करचे सुमार एक सप्तक आदीं आयिल्लीं. निश्कर्श काडप हांव फुडें फुडें वचूंक शकतालो. पूण हाका लागून XPath ची शक्त दाखयल्या आनी व्हड गजाली साध्य करपा खातीर ताचो वापर कसो करचो तें दाखोवपी भरपूर उदाहरणां दिल्यांत अशी आस्त बाळगता. ब्राउझर स्टॅकांतल्या पोरन्या तंत्रज्ञानाचें हें एक परिपूर्ण उदाहरण आसा जें आयज लेगीत भरपूर उपयुक्तताय आसा, जरी तुमकां तें अस्तित्वांत आसा हें केन्नाच कळूंक नासलें वा ताचे कडेन पावपाचो केन्नाच विचार केल्लो नासलो तरी. फुडलें वाचन
“एनहान्सिंग द रेसिलियन्सी ऑफ ऑटोमेटेड वेब टेस्ट्स विथ नेचरल लांग्वेज” (एसीएम डिजिटल लायब्ररी) मारून आयली, यूसुफ बॅकौनी, नादर जल्लोल, आनी रीमा किलानी ह्या लेखांत लवचीक चांचण्यो बरोवपा खातीर जायतीं XPath उदाहरणां दिल्यांत. XPath (MDN)तुमकां XPath कशें काम करता हाचो तपशील दिवपी तंत्रीक स्पश्टीकरण जाय जाल्यार ही सुरवात करपाक एक उत्कृश्ट सुवात आसा. XPath ट्युटोरियल (ZVON)म्हाका हें ट्युटोरियल म्हज्या स्वताच्या शिकपाक सगळ्यांत उपकाराचें दिसलां, ताका लागून उदाहरणां आनी स्पश्ट स्पश्टीकरणां मेळटात. XPatherहें परस्पर संवादात्मक साधन तुमकां कोड वांगडा थेट काम करूंक दिता.
