വർഷങ്ങളായി ഒരു ട്രെൻഡ് കാണാൻ ഞാൻ ഫ്രണ്ട്-എൻഡ് ഡെവലപ്മെൻ്റിലാണ്: അതിൻ്റെ ചരിത്രപരമായ സന്ദർഭം മനസ്സിലാക്കാതെ പ്രോഗ്രാമിംഗിൻ്റെ ഒരു പുതിയ മാതൃകയുമായി പ്രവർത്തിക്കുന്ന യുവ ഡെവലപ്പർമാർ. തീർച്ചയായും, എന്തെങ്കിലും അറിയാത്തത് തികച്ചും മനസ്സിലാക്കാവുന്നതേയുള്ളൂ. വൈവിധ്യമാർന്ന കഴിവുകളും പ്രത്യേകതകളും ഉള്ള ഒരു വലിയ സ്ഥലമാണ് വെബ്, മാത്രമല്ല ഞങ്ങൾക്ക് അറിയാത്തത് എപ്പോഴും അറിയില്ല. ഈ മേഖലയിൽ പഠിക്കുന്നത് ഒരിക്കൽ സംഭവിച്ച് അവസാനിക്കുന്ന ഒന്നല്ല എന്നതിലുപരി തുടർച്ചയായ ഒരു യാത്രയാണ്. ഉദാഹരണം: യുഐയിലെ ഒരു പ്രത്യേക ടാബിൽ നിന്ന് ഉപയോക്താക്കൾ നാവിഗേറ്റ് ചെയ്യുന്നുണ്ടോ എന്ന് പറയാൻ കഴിയുമോ എന്ന് എൻ്റെ ടീമിലെ ഒരാൾ ചോദിച്ചു. JavaScript-ൻ്റെ മുമ്പുള്ള അൺലോഡ് ഇവൻ്റ് ഞാൻ ചൂണ്ടിക്കാണിച്ചു. എന്നാൽ മുമ്പ് ഇത് കൈകാര്യം ചെയ്തവർക്ക് ഇത് സാധ്യമാണെന്ന് അറിയാം, കാരണം മറ്റ് സൈറ്റുകളിൽ സംരക്ഷിക്കപ്പെടാത്ത ഡാറ്റയെക്കുറിച്ചുള്ള അലേർട്ടുകൾ അവർക്ക് ലഭിച്ചിട്ടുണ്ട്, ഇതിന് മുമ്പുള്ള അൺലോഡ് ഒരു സാധാരണ ഉപയോഗമാണ്. പേജ് മറയ്ക്കുക, ദൃശ്യപരത ഇവൻ്റുകൾ മാറ്റുക എന്നതും ഞാൻ ചൂണ്ടിക്കാണിച്ചു, നല്ല അളവിനായി എൻ്റെ സഹപ്രവർത്തകന്. അതെങ്ങനെ ഞാൻ അറിഞ്ഞു? ഇത് മറ്റൊരു പ്രോജക്റ്റിൽ വന്നതിനാൽ, തുടക്കത്തിൽ ജാവാസ്ക്രിപ്റ്റ് പഠിക്കുമ്പോൾ ഞാൻ അത് പഠിച്ചതുകൊണ്ടല്ല. ആധുനിക ഫ്രണ്ട് എൻഡ് ചട്ടക്കൂടുകൾ അവയ്ക്ക് മുമ്പുണ്ടായിരുന്ന സാങ്കേതിക ഭീമന്മാരുടെ ചുമലിൽ നിൽക്കുന്നു എന്നതാണ് വസ്തുത. അവർ വികസന സമ്പ്രദായങ്ങളെ അമൂർത്തമാക്കുന്നു, പലപ്പോഴും ഒരു മികച്ച ഡെവലപ്പർ അനുഭവം കുറയ്ക്കുകയോ അല്ലെങ്കിൽ ഇല്ലാതാക്കുകയോ ചെയ്യുന്നു, പരമ്പരാഗതമായി എല്ലാവരും അറിഞ്ഞിരിക്കേണ്ട അത്യാവശ്യമായ ഫ്രണ്ട്-എൻഡ് ആശയങ്ങൾ എന്താണെന്ന് അറിയുകയോ സ്പർശിക്കുകയോ ചെയ്യുക. CSS ഒബ്ജക്റ്റ് മോഡൽ (CSSOM) പരിഗണിക്കുക. CSS-ലും JavaScript-ലും പ്രവർത്തിക്കുന്ന ആർക്കും ഒരു കൂട്ടം CSSOM അനുഭവം ഉണ്ടായിരിക്കുമെന്ന് നിങ്ങൾ പ്രതീക്ഷിച്ചേക്കാം, എന്നാൽ അത് എല്ലായ്പ്പോഴും അങ്ങനെ ആയിരിക്കില്ല. നിലവിൽ തിരഞ്ഞെടുത്ത പേയ്മെൻ്റ് ദാതാവിനായി ഒരു സ്റ്റൈൽഷീറ്റ് ലോഡ് ചെയ്യേണ്ട സ്ഥലത്ത് ഞാൻ ജോലി ചെയ്തിരുന്ന ഒരു ഇ-കൊമേഴ്സ് സൈറ്റിനായി ഒരു റിയാക്റ്റ് പ്രോജക്റ്റ് ഉണ്ടായിരുന്നു. ഒരു പ്രത്യേക പേജിൽ മാത്രം ആവശ്യമുള്ളപ്പോൾ സ്റ്റൈൽഷീറ്റ് എല്ലാ പേജിലും ലോഡ് ചെയ്യുന്നതാണ് പ്രശ്നം. ഇത് സാധ്യമാക്കാൻ ചുമതലപ്പെടുത്തിയ ഡെവലപ്പർ ഒരിക്കലും ഒരു സ്റ്റൈൽഷീറ്റ് ചലനാത്മകമായി ലോഡ് ചെയ്തിട്ടില്ല. വീണ്ടും, നിങ്ങൾ എത്തിച്ചേരാനിടയുള്ള പരമ്പരാഗത സമീപനത്തെ പ്രതികരണം അമൂർത്തമാക്കുമ്പോൾ ഇത് പൂർണ്ണമായും മനസ്സിലാക്കാവുന്നതേയുള്ളൂ. CSSOM നിങ്ങളുടെ ദൈനംദിന ജോലിയിൽ ആവശ്യമായ ഒന്നായിരിക്കില്ല. എന്നാൽ ഒരു ഘട്ടത്തിൽ, ഒറ്റയടിക്ക് പോലും നിങ്ങൾ ഇതുമായി സംവദിക്കേണ്ടി വരും. ഈ അനുഭവങ്ങളാണ് ഈ ലേഖനം എഴുതാൻ എന്നെ പ്രേരിപ്പിച്ചത്. നിങ്ങളുടെ ദൈനംദിന ജോലിയിൽ നേരിട്ട് സ്പർശിക്കാത്ത നിരവധി വെബ് സവിശേഷതകളും സാങ്കേതികവിദ്യകളും കാട്ടിൽ ഉണ്ട്. ഒരുപക്ഷേ നിങ്ങൾ വെബ് ഡെവലപ്മെൻ്റിൽ തീർത്തും പുതിയ ആളാണ്, മാത്രമല്ല അവയെക്കുറിച്ച് നിങ്ങൾക്ക് അറിയില്ലായിരിക്കാം, കാരണം നിങ്ങൾ ഒരു പ്രത്യേക ചട്ടക്കൂടിൻ്റെ അമൂർത്തീകരണത്തിൽ മുഴുകിയിരിക്കുന്നതിനാൽ അത് ആഴത്തിൽ അറിയാൻ ആവശ്യമില്ല. ഞാൻ പ്രത്യേകമായി സംസാരിക്കുന്നത് XML നെക്കുറിച്ചാണ്, അത് HTML-ൽ നിന്ന് തികച്ചും വ്യത്യസ്തമല്ലാത്ത ഒരു പുരാതന ഭാഷയാണെന്ന് നമ്മിൽ പലർക്കും അറിയാം. XSLT പ്രോഗ്രാമിംഗ് എന്നറിയപ്പെടുന്ന XML സ്റ്റാക്കിൻ്റെ ഒരു പ്രധാന ഭാഗം ബ്രൗസറുകളിൽ നിന്ന് നീക്കം ചെയ്യണമെന്ന് സമീപകാല WHATWG ചർച്ചകൾ നിർദ്ദേശിക്കുന്നതിനാലാണ് ഞാൻ ഇത് കൊണ്ടുവരുന്നത്. എൻ്റെ ടീം ഉണ്ടായിരുന്ന CSSOM സാഹചര്യം പോലെ പ്രായോഗികമായി ഉപയോഗിക്കാവുന്ന പഴയതും നിലവിലുള്ളതുമായ സാങ്കേതികവിദ്യയാണ് ഇത്. നിങ്ങൾ മുമ്പ് XSLT-യിൽ പ്രവർത്തിച്ചിട്ടുണ്ടോ? ഇന്നത്തെ യഥാർത്ഥ ലോക പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നതിന് ഞങ്ങൾ ഈ പഴയ സാങ്കേതികവിദ്യയിലേക്ക് വളരെയധികം ചായ്വ് കാണിക്കുന്നുണ്ടോ എന്നും XML-ൻ്റെ സന്ദർഭത്തിന് പുറത്ത് അതിൻ്റെ സവിശേഷതകൾ പ്രയോജനപ്പെടുത്തുന്നുണ്ടോ എന്നും നോക്കാം. XPath: സെൻട്രൽ API നേരിട്ടുള്ള XML കാഴ്ചപ്പാടിന് പുറത്ത് ഏറ്റവും ഉപയോഗപ്രദമായ ഏറ്റവും പ്രധാനപ്പെട്ട XML സാങ്കേതികവിദ്യ, ഒരു റൂട്ട് എലമെൻ്റ് ഉപയോഗിച്ച് ഒരു മാർക്ക്അപ്പ് ട്രീയിൽ ഏതെങ്കിലും നോഡോ ആട്രിബ്യൂട്ടോ കണ്ടെത്താൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു അന്വേഷണ ഭാഷയായ XPath ആണ്. എനിക്ക് XSLT-യോട് വ്യക്തിപരമായ ഇഷ്ടം ഉണ്ട്, എന്നാൽ അതും XPath-നെ ആശ്രയിക്കുന്നു, റാങ്കിംഗ് പ്രാധാന്യത്തിൽ വ്യക്തിപരമായ വാത്സല്യം മാറ്റിവെക്കണം. XSLT നീക്കം ചെയ്യുന്നതിനുള്ള വാദം XPath-നെ കുറിച്ച് പരാമർശിക്കുന്നില്ല, അതിനാൽ ഇത് ഇപ്പോഴും അനുവദനീയമാണെന്ന് ഞാൻ കരുതുന്നു. ഇത് നല്ലതാണ്, കാരണം ഈ സാങ്കേതിക വിദ്യകളുടെ കേന്ദ്രവും ഏറ്റവും പ്രധാനപ്പെട്ടതുമായ API ആണ് XPath, പ്രത്യേകിച്ചും സാധാരണ XML ഉപയോഗത്തിന് പുറത്ത് ഉപയോഗിക്കാൻ എന്തെങ്കിലും കണ്ടെത്താൻ ശ്രമിക്കുമ്പോൾ. നിങ്ങളുടെ പേജിലെ ഒട്ടുമിക്ക ഘടകങ്ങളും കണ്ടെത്താൻ CSS സെലക്ടറുകൾ ഉപയോഗിക്കാമെങ്കിലും, അവയെല്ലാം കണ്ടെത്താനാകാത്തതിനാൽ ഇത് പ്രധാനമാണ്. കൂടാതെ, DOM-ലെ നിലവിലെ സ്ഥാനത്തെ അടിസ്ഥാനമാക്കി ഒരു ഘടകം കണ്ടെത്താൻ CSS സെലക്ടറുകൾ ഉപയോഗിക്കാനാവില്ല. XPath കഴിയും. ഇപ്പോൾ, ഇത് വായിക്കുന്ന നിങ്ങളിൽ ചിലർക്ക് XPath അറിയാമായിരിക്കും, ചിലർക്ക് അറിയില്ലായിരിക്കാം. XPath എന്നത് സാങ്കേതികവിദ്യയുടെ ഒരു വലിയ മേഖലയാണ്, എനിക്ക് എല്ലാ അടിസ്ഥാന കാര്യങ്ങളും ശരിക്കും പഠിപ്പിക്കാൻ കഴിയില്ല, മാത്രമല്ല ഇത് പോലെയുള്ള ഒരൊറ്റ ലേഖനത്തിൽ നിങ്ങൾക്ക് അത് ചെയ്യാനുള്ള രസകരമായ കാര്യങ്ങൾ കാണിക്കാനും കഴിയില്ല. ഞാൻ യഥാർത്ഥത്തിൽ ആ ലേഖനം എഴുതാൻ ശ്രമിച്ചു, പക്ഷേ ശരാശരി സ്മാഷിംഗ് മാഗസിൻ പ്രസിദ്ധീകരണം 5,000 വാക്കുകളിൽ കവിയുന്നില്ല. ഞാൻ ഇതിനകം അതിലും കൂടുതലായിരുന്നു2,000 വാക്കുകൾ, അടിസ്ഥാന കാര്യങ്ങളിൽ പകുതി മാത്രം. അതിനാൽ, ഞാൻ XPath ഉപയോഗിച്ച് രസകരമായ കാര്യങ്ങൾ ചെയ്യാൻ തുടങ്ങുകയും ഈ സ്റ്റഫ് നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ അടിസ്ഥാന കാര്യങ്ങൾക്കായി ഉപയോഗിക്കാവുന്ന ചില ലിങ്കുകൾ നൽകുകയും ചെയ്യും. XPath & CSS എന്നിവ സംയോജിപ്പിക്കുന്നു ഘടകങ്ങൾ അന്വേഷിക്കുമ്പോൾ CSS സെലക്ടർമാർക്ക് ചെയ്യാൻ കഴിയാത്ത ഒരുപാട് കാര്യങ്ങൾ XPath-ന് ചെയ്യാൻ കഴിയും. എന്നാൽ XPath-ന് ചെയ്യാൻ കഴിയാത്ത ചില കാര്യങ്ങൾ CSS സെലക്ടർമാർക്ക് ചെയ്യാൻ കഴിയും, അതായത്, ക്ലാസ്സിൻ്റെ പേര് ഉപയോഗിച്ച് ഘടകങ്ങൾ അന്വേഷിക്കുക.
സി.എസ്.എസ് എക്സ്പാത്ത് .myClass /*[അടങ്ങുന്നു(@class, "myClass")]
ഈ ഉദാഹരണത്തിൽ, ഒരു .myClass ക്ലാസ്സ്നെയിം അടങ്ങിയ ഘടകങ്ങളെ CSS അന്വേഷിക്കുന്നു. അതേസമയം, "myClass" എന്ന സ്ട്രിംഗ് ഉള്ള ഒരു ആട്രിബ്യൂട്ട് ക്ലാസ് അടങ്ങിയിരിക്കുന്ന ഘടകങ്ങളെ XPath ഉദാഹരണം അന്വേഷിക്കുന്നു. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, .myClass ക്ലാസ് നാമമുള്ള ഘടകങ്ങൾ ഉൾപ്പെടെ ഏത് ആട്രിബ്യൂട്ടിലും myClass ഉള്ള ഘടകങ്ങളെ തിരഞ്ഞെടുക്കുന്നു — അതുപോലെ .myClass2 പോലെയുള്ള സ്ട്രിംഗിലെ "myClass" ഉള്ള ഘടകങ്ങളും. XPath ആ അർത്ഥത്തിൽ വിശാലമാണ്. അതിനാൽ, ഇല്ല. ഞങ്ങൾ CSS ഒഴിവാക്കി എല്ലാ ഘടകങ്ങളും XPath വഴി തിരഞ്ഞെടുക്കാൻ തുടങ്ങണമെന്ന് ഞാൻ നിർദ്ദേശിക്കുന്നില്ല. അതല്ല കാര്യം. ബ്രൗസർ സ്റ്റാക്കിലെ ഒരു പഴയ സാങ്കേതികവിദ്യയാണെങ്കിലും ഒറ്റനോട്ടത്തിൽ വ്യക്തമാകണമെന്നില്ലെങ്കിലും, CSS-ന് ചെയ്യാൻ കഴിയാത്തതും ഇപ്പോഴും വളരെ ഉപയോഗപ്രദവുമായ കാര്യങ്ങൾ XPath-ന് ചെയ്യാൻ കഴിയും എന്നതാണ്. നമുക്ക് രണ്ട് സാങ്കേതികവിദ്യകളും ഒരുമിച്ച് ഉപയോഗിക്കാൻ കഴിയുക മാത്രമല്ല, ഈ പ്രക്രിയയിൽ ഞങ്ങൾ XPath-നെ കുറിച്ച് എന്തെങ്കിലും പഠിക്കുകയും നിങ്ങളുടെ സ്റ്റാക്കിലെ മറ്റൊരു ഉപകരണമാക്കി മാറ്റുകയും ചെയ്യും - നിങ്ങൾ അറിഞ്ഞിരിക്കാനിടയില്ലാത്ത ഒന്ന് എല്ലാക്കാലത്തും ഉണ്ടായിരുന്നു! JavaScript-ൻ്റെ document.evaluate രീതിയും JavaScript-നായുള്ള CSS API-കൾക്കൊപ്പം ഞങ്ങൾ ഉപയോഗിക്കുന്ന വിവിധ അന്വേഷണ സെലക്ടർ രീതികളും പൊരുത്തപ്പെടുന്നില്ല എന്നതാണ് പ്രശ്നം. ഞങ്ങൾ ആരംഭിക്കുന്നതിന് അനുയോജ്യമായ ഒരു അന്വേഷണ API ഞാൻ ഉണ്ടാക്കിയിട്ടുണ്ട്, സമ്മതിച്ചാലും, ഞങ്ങൾ ഇവിടെ ചെയ്യുന്ന കാര്യങ്ങളിൽ നിന്നുള്ള ഒരു വ്യതിചലനമായതിനാൽ ഞാൻ അതിൽ കൂടുതൽ ചിന്തിച്ചിട്ടില്ല. പുനരുപയോഗിക്കാവുന്ന ക്വറി കൺസ്ട്രക്ടറിൻ്റെ വളരെ ലളിതമായ പ്രവർത്തന ഉദാഹരണം ഇതാ: Bryan Rasmussen എഴുതിയ Pen queryXPath [ഫോർക്ക്ഡ്] കാണുക. ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റിൽ ഞാൻ രണ്ട് രീതികൾ ചേർത്തിട്ടുണ്ട്: queryCSSSelectors (അത് അടിസ്ഥാനപരമായി querySelectorAll) കൂടാതെ queryXPaths. ഇവ രണ്ടും ഒരു queryResults ഒബ്ജക്റ്റ് നൽകുന്നു:
{ ചോദ്യം തരം: നോഡുകൾ | ചരട് | നമ്പർ | ബൂലിയൻ, ഫലങ്ങൾ: ഏതെങ്കിലും[] // html ഘടകങ്ങൾ, xml ഘടകങ്ങൾ, സ്ട്രിംഗുകൾ, നമ്പറുകൾ, ബൂളിയൻസ്, queryCSSSelectors: (അന്വേഷണം: സ്ട്രിംഗ്, ഭേദഗതി വരുത്തുക: ബൂളിയൻ) => അന്വേഷണഫലങ്ങൾ, queryXpaths: (അന്വേഷണം: സ്ട്രിംഗ്, ഭേദഗതി വരുത്തുക: ബൂളിയൻ) => അന്വേഷണഫലങ്ങൾ }
queryCSSSelectors ഉം queryXpaths ഫംഗ്ഷനുകളും ഫല ശ്രേണിയിലെ ഘടകങ്ങളിൽ നിങ്ങൾ നൽകുന്ന അന്വേഷണം റൺ ചെയ്യുന്നു, ഫലങ്ങളുടെ അറേ ടൈപ്പ് നോഡുകളാണെങ്കിൽ, തീർച്ചയായും. അല്ലെങ്കിൽ, അത് ഒരു ശൂന്യമായ അറേയും ഒരു തരം നോഡുകളും ഉള്ള ഒരു അന്വേഷണഫലം നൽകും. ഭേദഗതി പ്രോപ്പർട്ടി ശരി എന്ന് സജ്ജീകരിച്ചാൽ, ഫംഗ്ഷനുകൾ അവരുടെ സ്വന്തം അന്വേഷണഫലങ്ങൾ മാറ്റും. ഒരു സാഹചര്യത്തിലും ഇത് ഉൽപ്പാദന അന്തരീക്ഷത്തിൽ ഉപയോഗിക്കരുത്. രണ്ട് ക്വറി API-കൾ ഒരുമിച്ച് ഉപയോഗിക്കുന്നതിൻ്റെ വിവിധ ഇഫക്റ്റുകൾ കാണിക്കുന്നതിനാണ് ഞാൻ ഇത് ചെയ്യുന്നത്. ഉദാഹരണ ചോദ്യങ്ങൾ വ്യത്യസ്തമായ XPath അന്വേഷണങ്ങളുടെ ഏതാനും ഉദാഹരണങ്ങൾ കാണിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു, അത് അവർക്ക് ചെയ്യാൻ കഴിയുന്ന ശക്തമായ ചില കാര്യങ്ങളും മറ്റ് സമീപനങ്ങളുടെ സ്ഥാനത്ത് അവ എങ്ങനെ ഉപയോഗിക്കാമെന്നും കാണിക്കുന്നു. ആദ്യ ഉദാഹരണം //li/text(). ഇത് എല്ലാ li ഘടകങ്ങളെയും അന്വേഷിക്കുകയും അവയുടെ ടെക്സ്റ്റ് നോഡുകൾ തിരികെ നൽകുകയും ചെയ്യുന്നു. അതിനാൽ, ഞങ്ങൾ ഇനിപ്പറയുന്ന HTML അന്വേഷിക്കുകയാണെങ്കിൽ:
- ഒന്ന്
- രണ്ട്
- മൂന്ന്
…ഇതാണ് തിരികെ ലഭിച്ചത്:
{"queryType":"xpathEvaluate","ഫലങ്ങൾ":["ഒന്ന്","രണ്ട്","മൂന്ന്"],"ഫല തരം":"സ്ട്രിംഗ്"}
മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, നമുക്ക് ഇനിപ്പറയുന്ന അറേ ലഭിക്കും: ["ഒന്ന്", "രണ്ട്", "മൂന്ന്"]. സാധാരണഗതിയിൽ, ലി എലമെൻ്റുകൾക്കായി നിങ്ങൾ അന്വേഷിക്കും, ആ അന്വേഷണത്തിൻ്റെ ഫലം ഒരു അറേയാക്കി മാറ്റുക, അറേ മാപ്പ് ചെയ്യുക, ഓരോ എലമെൻ്റിൻ്റെയും ടെക്സ്റ്റ് നോഡ് തിരികെ നൽകുക. എന്നാൽ XPath ഉപയോഗിച്ച് നമുക്ക് അത് കൂടുതൽ സംക്ഷിപ്തമായി ചെയ്യാൻ കഴിയും: document.queryXPaths("//li/text()").ഫലങ്ങൾ.
ഒരു ടെക്സ്റ്റ് നോഡ് ലഭിക്കുന്നതിനുള്ള മാർഗ്ഗം ടെക്സ്റ്റ്(), ഒരു ഫംഗ്ഷൻ സിഗ്നേച്ചർ പോലെ തോന്നിക്കുന്നതാണ് - അത്. ഇത് ഒരു മൂലകത്തിൻ്റെ ടെക്സ്റ്റ് നോഡ് നൽകുന്നു. ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, മാർക്ക്അപ്പിൽ മൂന്ന് ലി ഘടകങ്ങൾ ഉണ്ട്, ഓരോന്നിനും വാചകം ("ഒന്ന്", "രണ്ട്", "മൂന്ന്") അടങ്ങിയിരിക്കുന്നു.
ഒരു ടെക്സ്റ്റ്() ചോദ്യത്തിൻ്റെ ഒരു ഉദാഹരണം കൂടി നോക്കാം. ഇത് ഞങ്ങളുടെ മാർക്ക്അപ്പ് ആണെന്ന് കരുതുക:
href ആട്രിബ്യൂട്ട് മൂല്യം നൽകുന്ന ഒരു ചോദ്യം എഴുതാം: document.queryXPaths("//a[text() = 'സൈൻ ഇൻ']/@href").ഫലങ്ങൾ.
അവസാനത്തെ ഉദാഹരണം പോലെ, നിലവിലെ ഡോക്യുമെൻ്റിലെ ഒരു XPath അന്വേഷണമാണിത്, എന്നാൽ ഇത്തവണ "സൈൻ ഇൻ" എന്ന വാചകം ഉൾക്കൊള്ളുന്ന ഒരു ലിങ്കിൻ്റെ (ഒരു ഘടകം) href ആട്രിബ്യൂട്ട് ഞങ്ങൾ നൽകുന്നു. യഥാർത്ഥ തിരിച്ചെത്തിഫലം ["/login.html"] ആണ്. XPath ഫംഗ്ഷനുകളുടെ അവലോകനം നിരവധി XPath ഫംഗ്ഷനുകൾ ഉണ്ട്, അവ നിങ്ങൾക്ക് പരിചിതമല്ലായിരിക്കാം. ഇനിപ്പറയുന്നവ ഉൾപ്പെടെ, അറിയേണ്ട നിരവധി കാര്യങ്ങളുണ്ട്:
ഒരു ടെക്സ്റ്റ് ആരംഭിക്കുന്നത് മറ്റൊരു പ്രത്യേക ടെക്സ്റ്റ് ഉദാഹരണത്തിലൂടെയാണെങ്കിൽ, href ആട്രിബ്യൂട്ട് http: എന്നതിൽ ആരംഭിക്കുകയാണെങ്കിൽ, starts-with(@href, 'http:') true ആയി നൽകുന്നു. ഒരു ടെക്സ്റ്റിൽ മറ്റൊരു പ്രത്യേക ടെക്സ്റ്റ് ഉദാഹരണം അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, ഒരു ടെക്സ്റ്റ് നോഡിൽ എവിടെയെങ്കിലും “സ്മാഷിംഗ് മാഗസിൻ” എന്ന വാക്കുകൾ അടങ്ങിയിരിക്കുന്നുവെങ്കിൽ, അടങ്ങിയിരിക്കുന്ന(ടെക്സ്റ്റ്(), "സ്മാഷിംഗ് മാഗസിൻ") ശരിയായി നൽകുന്നു. ഒരു ചോദ്യത്തിന് എത്ര പൊരുത്തങ്ങളുണ്ട് എന്നതിൻ്റെ കണക്ക് countReturn നൽകുന്നു. ഉദാഹരണത്തിന്, കൗണ്ട്(//*[starts-with(@href, 'http:']) എന്നത്, http: എന്നതിൽ തുടങ്ങുന്ന വാചകം ഉൾക്കൊള്ളുന്ന href ആട്രിബ്യൂട്ട് ഉള്ള ഘടകങ്ങളുള്ള സന്ദർഭ നോഡിലെ എത്ര ലിങ്കുകൾ ഉണ്ട് എന്നതിൻ്റെ കണക്ക് നൽകുന്നു. substringനിങ്ങൾ സ്ട്രിംഗ് ഒരു ആർഗ്യുമെൻ്റായി നൽകിയതൊഴിച്ചാൽ JavaScript സബ്സ്ട്രിംഗ് പോലെ പ്രവർത്തിക്കുന്നു. ഉദാഹരണത്തിന്, 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")ഒരു ശൂന്യമായ സ്ട്രിംഗ് നൽകുന്നു. നോർമലൈസ്-സ്പെയ്സ് ലീഡിംഗ്, ട്രെയിലിംഗ് വൈറ്റ്സ്പെയ്സ് നീക്കം ചെയ്ത് വൈറ്റ്സ്പെയ്സ് പ്രതീകങ്ങളുടെ സീക്വൻസുകൾ മാറ്റി ഒരൊറ്റ സ്പെയ്സ് ഉപയോഗിച്ച് നോർമലൈസ് ചെയ്ത വൈറ്റ്സ്പെയ്സ് ഉപയോഗിച്ച് ആർഗ്യുമെൻ്റ് സ്ട്രിംഗ് തിരികെ നൽകുന്നു. വാദങ്ങൾ തെറ്റാണെങ്കിൽ ഒരു ബൂളിയൻ true തിരികെ നൽകുന്നു, അല്ലാത്തപക്ഷം തെറ്റ്. trueReturns boolean true. തെറ്റ് ബൂളിയൻ തെറ്റായി നൽകുന്നു. concat JavaScript കോൺകാറ്റിൻ്റെ അതേ കാര്യം, നിങ്ങൾ ഇത് ഒരു സ്ട്രിംഗിൽ ഒരു രീതിയായി പ്രവർത്തിപ്പിക്കുന്നില്ല എന്നതൊഴിച്ചാൽ. പകരം, നിങ്ങൾ കൂട്ടിച്ചേർക്കാൻ ആഗ്രഹിക്കുന്ന എല്ലാ സ്ട്രിംഗുകളും നിങ്ങൾ ഇട്ടു. string-lengthഇത് JavaScript സ്ട്രിംഗ്-ലെംഗ്ത് പോലെയല്ല, പകരം ഒരു ആർഗ്യുമെൻ്റായി നൽകിയിരിക്കുന്ന സ്ട്രിംഗിൻ്റെ ദൈർഘ്യം നൽകുന്നു. translateഇത് ഒരു സ്ട്രിംഗ് എടുത്ത് രണ്ടാമത്തെ ആർഗ്യുമെൻ്റിനെ മൂന്നാമത്തെ ആർഗ്യുമെൻ്റിലേക്ക് മാറ്റുന്നു. ഉദാഹരണത്തിന്, വിവർത്തനം ചെയ്യുക("abcdef", "abc", "XYZ") XYZdef ഔട്ട്പുട്ടുകൾ.
ഈ പ്രത്യേക XPath ഫംഗ്ഷനുകൾ കൂടാതെ, അവയുടെ JavaScript എതിരാളികൾക്ക് സമാനമായി പ്രവർത്തിക്കുന്ന മറ്റ് നിരവധി ഫംഗ്ഷനുകളുണ്ട് - അല്ലെങ്കിൽ അടിസ്ഥാനപരമായി ഏതെങ്കിലും പ്രോഗ്രാമിംഗ് ഭാഷയിലെ എതിരാളികൾ - ഫ്ലോർ, സീലിംഗ്, റൗണ്ട്, സം മുതലായവ പോലെ നിങ്ങൾക്ക് ഉപയോഗപ്രദമാകും. ഇനിപ്പറയുന്ന ഡെമോ ഈ ഓരോ ഫംഗ്ഷനുകളും ചിത്രീകരിക്കുന്നു: Bryan Rasmussen എഴുതിയ Pen XPath ന്യൂമറിക്കൽ ഫംഗ്ഷനുകൾ [ഫോർക്ക്ഡ്] കാണുക. മിക്ക സ്ട്രിംഗ് മാനിപ്പുലേഷൻ ഫംഗ്ഷനുകളെയും പോലെ, സംഖ്യാപരമായ പലതും ഒരൊറ്റ ഇൻപുട്ട് എടുക്കുന്നു എന്നത് ശ്രദ്ധിക്കുക. ഇത് തീർച്ചയായും, അവസാനത്തെ XPath ഉദാഹരണത്തിലെന്നപോലെ, അവ അന്വേഷണത്തിനായി ഉപയോഗിക്കേണ്ടതായതിനാൽ: //li[ഫ്ലോർ(ടെക്സ്റ്റ്()) > 250]/@val
മിക്ക ഉദാഹരണങ്ങളും ചെയ്യുന്നതുപോലെ, നിങ്ങൾ അവ ഉപയോഗിക്കുകയാണെങ്കിൽ, പാതയുമായി പൊരുത്തപ്പെടുന്ന ആദ്യ നോഡിൽ നിങ്ങൾ അത് പ്രവർത്തിപ്പിക്കുന്നത് അവസാനിക്കും. ജാവാസ്ക്രിപ്റ്റിന് അതിൻ്റേതായ തരത്തിലുള്ള പരിവർത്തന പ്രശ്നങ്ങൾ ഉള്ളതിനാൽ നിങ്ങൾ ഒരുപക്ഷേ ഒഴിവാക്കേണ്ട ചില തരം കൺവേർഷൻ ഫംഗ്ഷനുകളും ഉണ്ട്. എന്നാൽ, മറ്റേതെങ്കിലും നമ്പറുമായി ബന്ധപ്പെട്ട് ഒരു സ്ട്രിംഗിനെ ഒരു സംഖ്യയിലേക്ക് പരിവർത്തനം ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്ന സമയങ്ങൾ ഉണ്ടാകാം. ബൂളിയൻ, നമ്പർ, സ്ട്രിംഗ്, നോഡ് എന്നിവയാണ് എന്തെങ്കിലും തരം സജ്ജീകരിക്കുന്ന പ്രവർത്തനങ്ങൾ. ഇവയാണ് പ്രധാനപ്പെട്ട XPath ഡാറ്റാടൈപ്പുകൾ. നിങ്ങൾ ഊഹിക്കുന്നതുപോലെ, ഈ ഫംഗ്ഷനുകളിൽ ഭൂരിഭാഗവും DOM നോഡുകളല്ലാത്ത ഡാറ്റാടൈപ്പുകളിൽ ഉപയോഗിക്കാനാകും. ഉദാഹരണത്തിന്, സബ്സ്ട്രിംഗ്-ആഫ്റ്റർ ഞങ്ങൾ ഇതിനകം കവർ ചെയ്തിരിക്കുന്നതുപോലെ ഒരു സ്ട്രിംഗ് എടുക്കുന്നു, പക്ഷേ അത് ഒരു href ആട്രിബ്യൂട്ടിൽ നിന്നുള്ള സ്ട്രിംഗ് ആകാം. ഇത് ഒരു സ്ട്രിംഗും ആകാം:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
വ്യക്തമായും, ഈ ഉദാഹരണം നമുക്ക് ഫല ശ്രേണിയെ ["ലോകം"] ആയി തിരികെ നൽകും. ഇത് പ്രവർത്തനത്തിൽ കാണിക്കുന്നതിന്, DOM നോഡുകൾ അല്ലാത്ത കാര്യങ്ങൾക്കെതിരെ ഫംഗ്ഷനുകൾ ഉപയോഗിച്ച് ഞാൻ ഒരു ഡെമോ പേജ് ഉണ്ടാക്കി: Bryan Rasmussen എഴുതിയ Pen queryXPath [ഫോർക്ക്ഡ്] കാണുക. വിവർത്തന ഫംഗ്ഷൻ്റെ ആശ്ചര്യകരമായ വശം നിങ്ങൾ ശ്രദ്ധിക്കേണ്ടതാണ്, അതായത്, രണ്ടാമത്തെ ആർഗ്യുമെൻ്റിൽ നിങ്ങൾക്ക് ഒരു പ്രതീകമുണ്ടെങ്കിൽ (അതായത്, നിങ്ങൾ വിവർത്തനം ചെയ്യാൻ ആഗ്രഹിക്കുന്ന പ്രതീകങ്ങളുടെ ലിസ്റ്റ്) വിവർത്തനം ചെയ്യാൻ പൊരുത്തപ്പെടുന്ന പ്രതീകമില്ലെങ്കിൽ, ആ പ്രതീകം ഔട്ട്പുട്ടിൽ നിന്ന് നീക്കം ചെയ്യപ്പെടും. അതിനാൽ, ഇത്:
പരിഭാഷപ്പെടുത്തുക ('ഹലോ, എൻ്റെ പേര് ഇനിഗോ മോണ്ടോയ, നിങ്ങൾ എൻ്റെ പിതാവിനെ കൊന്നു, മരിക്കാൻ തയ്യാറെടുക്കുന്നു','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…സ്പെയ്സുകൾ ഉൾപ്പെടെ സ്ട്രിംഗിലെ ഫലങ്ങൾ: [" * * ** "]
ഇതിനർത്ഥം "a" എന്ന അക്ഷരം ഒരു നക്ഷത്രചിഹ്നത്തിലേക്ക് (*) വിവർത്തനം ചെയ്യപ്പെടുന്നു എന്നാണ്, എന്നാൽ ടാർഗെറ്റ് സ്ട്രിംഗ് നൽകിയിട്ടുള്ള വിവർത്തനം ഇല്ലാത്ത മറ്റെല്ലാ പ്രതീകങ്ങളും പൂർണ്ണമായും നീക്കം ചെയ്യപ്പെടും. വൈറ്റ്സ്പേസ് മാത്രമാണ് നമുക്ക് അവശേഷിക്കുന്നത്വിവർത്തനം ചെയ്ത "a" പ്രതീകങ്ങൾക്കിടയിൽ. പിന്നെ വീണ്ടും, ഈ ചോദ്യം:
പരിഭാഷപ്പെടുത്തുക ('ഹലോ, എൻ്റെ പേര് ഇനിഗോ മോണ്ടോയ, നീ എൻ്റെ പിതാവിനെ കൊന്നു, മരിക്കാൻ തയ്യാറെടുക്കുന്നു','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','**********************************************************************************************************************************************************************************
… പ്രശ്നമില്ല, ഇതുപോലെയുള്ള ഒരു ഫലം ഔട്ട്പുട്ട് ചെയ്യുന്നു:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** **"
XPath ട്രാൻസ്ലേറ്റ് ഫംഗ്ഷൻ ചെയ്യുന്നത് കൃത്യമായി ചെയ്യാൻ JavaScript-ൽ ഒരു എളുപ്പവഴിയും ഇല്ലെന്നത് നിങ്ങളെ ആകർഷിച്ചേക്കാം, എന്നിരുന്നാലും, പല ഉപയോഗ സന്ദർഭങ്ങളിലും, എല്ലാം സാധാരണ പദപ്രയോഗങ്ങൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാനാകും. ഞാൻ പ്രദർശിപ്പിച്ച അതേ സമീപനം നിങ്ങൾക്കും ഉപയോഗിക്കാം, എന്നാൽ സ്ട്രിംഗുകൾ വിവർത്തനം ചെയ്യുകയാണ് നിങ്ങൾ ആഗ്രഹിക്കുന്നതെങ്കിൽ അത് ഉപയുക്തമാണ്. ഒരു JavaScript പതിപ്പ് നൽകുന്നതിന് ഇനിപ്പറയുന്ന ഡെമോ XPath-ൻ്റെ വിവർത്തന പ്രവർത്തനത്തെ പൊതിയുന്നു: ബ്രയാൻ റാസ്മുസൻ്റെ പെൻ വിവർത്തന പ്രവർത്തനം [ഫോർക്ക്ഡ്] കാണുക. ഇതുപോലുള്ള ഒന്ന് നിങ്ങൾക്ക് എവിടെ ഉപയോഗിക്കാം? ത്രീ-പ്ലേസ് ഓഫ്സെറ്റുള്ള സീസർ സൈഫർ എൻക്രിപ്ഷൻ പരിഗണിക്കുക (ഉദാ. 48 ബി.സി. മുതൽ ടോപ്പ്-ഓഫ്-ലൈൻ എൻക്രിപ്ഷൻ):
പരിഭാഷപ്പെടുത്തുക ("സീസർ റൂബിക്കോൺ കടക്കാൻ പദ്ധതിയിടുന്നു!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
ഇൻപുട്ട് വാചകം "സീസർ റൂബിക്കോൺ കടക്കാൻ പദ്ധതിയിടുന്നു!" ഫലങ്ങൾ "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" വ്യത്യസ്ത സാധ്യതകളുടെ മറ്റൊരു ദ്രുത ഉദാഹരണം നൽകാൻ, ഞാൻ ഒരു സ്ട്രിംഗ് ഇൻപുട്ട് എടുക്കുന്ന ഒരു മെറ്റൽ ഫംഗ്ഷൻ ഉണ്ടാക്കി, umlauts എടുക്കുന്ന എല്ലാ പ്രതീകങ്ങളും ഉൾപ്പെടെ ടെക്സ്റ്റ് തിരികെ നൽകുന്നതിന് ഒരു വിവർത്തന പ്രവർത്തനം ഉപയോഗിക്കുന്നു. ബ്രയാൻ റാസ്മുസൻ്റെ പെൻ മെറ്റൽ ഫംഗ്ഷൻ [ഫോർക്ക്ഡ്] കാണുക.
കോൺസ്റ്റ് മെറ്റൽ = (str) => { വിവർത്തനം തിരികെ നൽകുക(str, "AOUaou","ÄÖÜäöü"); }
കൂടാതെ, “മോട്ട്ലി ക്രൂ റൂൾസ്, റോക്ക് ഓൺ ഡ്യൂഡ്സ്!” എന്ന വാചകം നൽകിയാൽ, “മോട്ട്ലി ക്രൂ റൂൾസ്, റോക്ക് ഓൻ ഡ്യൂഡ്സ്!” എന്ന് നൽകുന്നു. വ്യക്തമായും, ഒരാൾക്ക് ഈ ഫംഗ്ഷൻ്റെ എല്ലാത്തരം പാരഡി ഉപയോഗങ്ങളും ഉണ്ടായിരിക്കാം. അത് നിങ്ങളാണെങ്കിൽ, ഈ TVTropes ലേഖനം നിങ്ങൾക്ക് ധാരാളം പ്രചോദനം നൽകണം. XPath ഉപയോഗിച്ച് CSS ഉപയോഗിക്കുന്നു XPath-നൊപ്പം CSS സെലക്ടറുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഞങ്ങളുടെ പ്രധാന കാരണം ഓർക്കുക: ക്ലാസ് എന്താണെന്ന് CSS നന്നായി മനസ്സിലാക്കുന്നു, എന്നാൽ XPath ഉപയോഗിച്ച് നിങ്ങൾക്ക് ചെയ്യാൻ കഴിയുന്ന ഏറ്റവും മികച്ചത് ക്ലാസ് ആട്രിബ്യൂട്ടിൻ്റെ സ്ട്രിംഗ് താരതമ്യമാണ്. അത് മിക്ക കേസുകളിലും പ്രവർത്തിക്കും. എന്നാൽ നിങ്ങൾ എപ്പോഴെങ്കിലും .primaryLinks, .primaryLinks2 എന്ന പേരിൽ ക്ലാസുകൾ സൃഷ്ടിക്കുകയും .primaryLinks ക്ലാസ് ലഭിക്കാൻ നിങ്ങൾ XPath ഉപയോഗിക്കുകയും ചെയ്താൽ, നിങ്ങൾ പ്രശ്നങ്ങളിൽ അകപ്പെട്ടേക്കാം. അത്തരത്തിലുള്ള വിഡ്ഢിത്തം ഒന്നും ഇല്ലാത്തിടത്തോളം, നിങ്ങൾ ഒരുപക്ഷേ XPath ഉപയോഗിക്കും. എന്നാൽ ആളുകൾ ഇത്തരം മണ്ടത്തരങ്ങൾ ചെയ്യുന്ന സ്ഥലങ്ങളിൽ ഞാൻ ജോലി ചെയ്തിട്ടുണ്ടെന്ന് റിപ്പോർട്ടുചെയ്യുന്നതിൽ എനിക്ക് സങ്കടമുണ്ട്. CSS ഉം XPath ഉം ഒരുമിച്ച് ഉപയോഗിക്കുന്ന മറ്റൊരു ഡെമോ ഇതാ. ഡോക്യുമെൻ്റിൻ്റെ നോഡല്ലാത്ത ഒരു സന്ദർഭ നോഡിൽ ഒരു എക്സ്പാത്ത് പ്രവർത്തിപ്പിക്കുന്നതിന് ഞങ്ങൾ കോഡ് ഉപയോഗിക്കുമ്പോൾ എന്താണ് സംഭവിക്കുന്നതെന്ന് ഇത് കാണിക്കുന്നു. Bryan Rasmussen എഴുതിയ Pen css ഉം xpath ഉം ഒരുമിച്ച് [ഫോർക്ക്ഡ്] കാണുക. CSS അന്വേഷണം .relatedarticles a ആണ്, ഇത് ഒരു .relatedarticles ക്ലാസ്സ് നൽകിയിരിക്കുന്ന ഒരു div-ലെ രണ്ട് a ഘടകങ്ങൾ ലഭ്യമാക്കുന്നു. അതിനു ശേഷം മൂന്ന് "മോശം" ചോദ്യങ്ങളുണ്ട്, അതായത്, ഈ ഘടകങ്ങളെ സന്ദർഭ നോഡായി പ്രവർത്തിപ്പിക്കുമ്പോൾ നമ്മൾ ചെയ്യേണ്ടത് ചെയ്യാത്ത ചോദ്യങ്ങൾ. നിങ്ങൾ പ്രതീക്ഷിക്കുന്നതിലും വ്യത്യസ്തമായി അവർ പെരുമാറുന്നത് എന്തുകൊണ്ടാണെന്ന് എനിക്ക് വിശദീകരിക്കാൻ കഴിയും. ചോദ്യം ചെയ്യപ്പെടുന്ന മൂന്ന് മോശം ചോദ്യങ്ങൾ ഇവയാണ്:
//text(): പ്രമാണത്തിലെ എല്ലാ വാചകങ്ങളും നൽകുന്നു. //a/text(): ഡോക്യുമെൻ്റിലെ ലിങ്കുകൾക്കുള്ളിലെ എല്ലാ വാചകങ്ങളും നൽകുന്നു. ./a/text(): ഫലങ്ങളൊന്നും നൽകുന്നില്ല.
ഈ ഫലങ്ങളുടെ കാരണം, നിങ്ങളുടെ സന്ദർഭം CSS അന്വേഷണത്തിൽ നിന്നുള്ള ഒരു ഘടകമാണ്, // മുഴുവൻ പ്രമാണത്തിനും എതിരാണ്. ഇതാണ് എക്സ്പാത്തിൻ്റെ ശക്തി; CSS-ന് ഒരു നോഡിൽ നിന്ന് ഒരു പൂർവ്വികനിലേക്കും പിന്നീട് ആ പൂർവ്വികൻ്റെ ഒരു സഹോദരനിലേക്കും പോകാനും ആ സഹോദരൻ്റെ പിൻഗാമികളിലേക്ക് ഇറങ്ങാനും കഴിയില്ല. എന്നാൽ XPath കഴിയും. അതേസമയം, നിലവിലെ നോഡിലെ കുട്ടികളെ ./ അന്വേഷിക്കുന്നു, അവിടെ ഡോട്ട് (.) നിലവിലെ നോഡിനെ പ്രതിനിധീകരിക്കുന്നു, ഫോർവേഡ് സ്ലാഷ് (/) ചില ചൈൽഡ് നോഡിലേക്ക് പോകുന്നതിനെ പ്രതിനിധീകരിക്കുന്നു - അത് ഒരു ആട്രിബ്യൂട്ടോ ഘടകമോ ടെക്സ്റ്റോ ആകട്ടെ, പാതയുടെ അടുത്ത ഭാഗം നിർണ്ണയിക്കുന്നു. എന്നാൽ CSS അന്വേഷണം തിരഞ്ഞെടുത്ത ഒരു ഘടകം ഇല്ല, അതിനാൽ ആ അന്വേഷണവും ഒന്നും നൽകുന്നില്ല. അവസാനത്തെ ഡെമോയിൽ മൂന്ന് നല്ല ചോദ്യങ്ങളുണ്ട്:
.//ടെക്സ്റ്റ്(), ./text(), normalize-space(./text()).
നോർമലൈസ്-സ്പേസ് അന്വേഷണം XPath ഫംഗ്ഷൻ ഉപയോഗം കാണിക്കുന്നു, മാത്രമല്ല മറ്റ് ചോദ്യങ്ങളിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്ന ഒരു പ്രശ്നം പരിഹരിക്കുകയും ചെയ്യുന്നു. HTML ഇതുപോലെയാണ് ക്രമീകരിച്ചിരിക്കുന്നത്:
സെലിനിയം വെബ്ഡ്രൈവർ ഉപയോഗിച്ച് നിങ്ങളുടെ ഫീച്ചർ ടെസ്റ്റിംഗ് ഓട്ടോമേറ്റ് ചെയ്യുന്നു
ചോദ്യം ടെക്സ്റ്റ് നോഡിൻ്റെ തുടക്കത്തിലും അവസാനത്തിലും ഒരു ലൈൻ ഫീഡ് നൽകുന്നു,കൂടാതെ നോർമലൈസ്-സ്പേസ് ഇത് നീക്കം ചെയ്യുന്നു. ഒരു ഇൻപുട്ട് ഉപയോഗിച്ച് ബൂളിയൻ അല്ലാതെ മറ്റെന്തെങ്കിലും നൽകുന്ന ഏതെങ്കിലും XPath ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നത് മറ്റ് ഫംഗ്ഷനുകൾക്ക് ബാധകമാണ്. ഇനിപ്പറയുന്ന ഡെമോ നിരവധി ഉദാഹരണങ്ങൾ കാണിക്കുന്നു: Bryan Rasmussen എഴുതിയ Pen xpath ഫംഗ്ഷനുകളുടെ ഉദാഹരണങ്ങൾ [ഫോർക്ക്ഡ്] കാണുക. നിങ്ങൾ ശ്രദ്ധിക്കേണ്ട ഒരു പ്രശ്നം ആദ്യ ഉദാഹരണം കാണിക്കുന്നു. പ്രത്യേകിച്ചും, ഇനിപ്പറയുന്ന കോഡ്:
document.queryXPaths("substring-after(//a/@href,'https://')");
…ഒരു സ്ട്രിംഗ് നൽകുന്നു:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
ഇത് യുക്തിസഹമാണ്, അല്ലേ? ഈ ഫംഗ്ഷനുകൾ അറേകളല്ല, പകരം ഒറ്റ സ്ട്രിംഗുകളോ ഒറ്റ സംഖ്യകളോ നൽകുന്നു. ഒന്നിലധികം ഫലങ്ങളോടെ എവിടെയും ഫംഗ്ഷൻ പ്രവർത്തിപ്പിക്കുന്നത് ആദ്യ ഫലം മാത്രമേ നൽകൂ. രണ്ടാമത്തെ ഫലം നമുക്ക് ശരിക്കും എന്താണ് വേണ്ടതെന്ന് കാണിക്കുന്നു:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
ഇത് രണ്ട് സ്ട്രിംഗുകളുടെ ഒരു ശ്രേണി നൽകുന്നു:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
JavaScript-ലെ ഫംഗ്ഷനുകൾ പോലെ XPath ഫംഗ്ഷനുകളും നെസ്റ്റുചെയ്യാനാകും. അതിനാൽ, സ്മാഷിംഗ് മാഗസിൻ URL ഘടന അറിയാമെങ്കിൽ, ഞങ്ങൾക്ക് ഇനിപ്പറയുന്നവ ചെയ്യാം (ടെംപ്ലേറ്റ് അക്ഷരങ്ങൾ ഉപയോഗിക്കുന്നത് ശുപാർശ ചെയ്യുന്നു): `വിവർത്തനം ചെയ്യുക( ഉപസ്ട്രിംഗ്( substring-after(./@href, ‘www.smashingmagazine.com/') ,9), '/','')`
ഇത് എന്താണ് ചെയ്യുന്നതെന്ന് വിവരിക്കുന്ന അഭിപ്രായങ്ങൾ ആവശ്യമായി വരുന്നിടത്തോളം ഇത് സങ്കീർണ്ണമായിക്കൊണ്ടിരിക്കുകയാണ്: www.smashingmagazine.com/ എന്നതിന് ശേഷമുള്ള href ആട്രിബ്യൂട്ടിൽ നിന്ന് എല്ലാ URL-ഉം എടുക്കുക, ആദ്യത്തെ ഒമ്പത് പ്രതീകങ്ങൾ നീക്കം ചെയ്യുക, തുടർന്ന് ഫോർവേഡ് സ്ലാഷ് (/) പ്രതീകം വിവർത്തനം ചെയ്യുക, അങ്ങനെ അവസാനിക്കുന്ന ഫോർവേഡ് സ്ലാഷ് ഒഴിവാക്കുക. തത്ഫലമായുണ്ടാകുന്ന ശ്രേണി:
["feature-testing-selenium-webdriver","Automated-test-results-improve-accessibility"]
കൂടുതൽ XPath ഉപയോഗ കേസുകൾ XPath-ന് ടെസ്റ്റിംഗിൽ ശരിക്കും തിളങ്ങാൻ കഴിയും. കാരണം കാണാൻ പ്രയാസമില്ല, കാരണം DOM-ലെ ഏത് സ്ഥാനത്തുനിന്നും DOM-ലെ എല്ലാ ഘടകങ്ങളും ലഭിക്കാൻ XPath ഉപയോഗിക്കാനാകും, എന്നാൽ CSS-ന് കഴിയില്ല. പല ആധുനിക ബിൽഡ് സിസ്റ്റങ്ങളിലും സ്ഥിരതയുള്ള CSS ക്ലാസുകൾ നിങ്ങൾക്ക് കണക്കാക്കാൻ കഴിയില്ല, എന്നാൽ മാറിക്കൊണ്ടിരിക്കുന്ന DOM ഘടന പരിഗണിക്കാതെ തന്നെ, ഒരു ഘടകത്തിൻ്റെ ടെക്സ്റ്റ് ഉള്ളടക്കം എന്താണെന്നതിന് XPath ഉപയോഗിച്ച് കൂടുതൽ ശക്തമായ പൊരുത്തങ്ങൾ ഉണ്ടാക്കാൻ ഞങ്ങൾക്ക് കഴിയും. പ്രതിരോധശേഷിയുള്ള എക്സ്പാത്ത് ടെസ്റ്റുകൾ നടത്താൻ നിങ്ങളെ അനുവദിക്കുന്ന സാങ്കേതിക വിദ്യകളെക്കുറിച്ച് ഗവേഷണം നടന്നിട്ടുണ്ട്. എന്തെങ്കിലും പേരുമാറ്റുകയോ നീക്കം ചെയ്യുകയോ ചെയ്തതിനാൽ ഒരു CSS സെലക്ടർ ഇനി പ്രവർത്തിക്കാത്തതിനാൽ പരിശോധനകൾ പരാജയപ്പെടുകയും പരാജയപ്പെടുകയും ചെയ്യുന്നതിനേക്കാൾ മോശമായ ഒന്നുമില്ല. ഒന്നിലധികം ലൊക്കേറ്റർ എക്സ്ട്രാക്ഷനിലും എക്സ്പാത്ത് മികച്ചതാണ്. ഒരു ഘടകവുമായി പൊരുത്തപ്പെടുന്നതിന് XPath അന്വേഷണങ്ങൾ ഉപയോഗിക്കുന്നതിന് ഒന്നിലധികം മാർഗങ്ങളുണ്ട്. CSS ൻ്റെ കാര്യവും ഇതുതന്നെയാണ്. എന്നാൽ XPath അന്വേഷണങ്ങൾക്ക് കൂടുതൽ ടാർഗെറ്റുചെയ്ത രീതിയിൽ കാര്യങ്ങൾ പരിശോധിക്കാൻ കഴിയും, അത് തിരികെ ലഭിക്കുന്നതിനെ പരിമിതപ്പെടുത്തുന്നു, സാധ്യമായ നിരവധി പൊരുത്തങ്ങൾ ഉണ്ടാകാനിടയുള്ള ഒരു നിർദ്ദിഷ്ട പൊരുത്തം കണ്ടെത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു ഡിവിയിൽ അടങ്ങിയിരിക്കുന്ന ഒരു നിർദ്ദിഷ്ട h2 ഘടകം തിരികെ നൽകാൻ ഞങ്ങൾക്ക് XPath ഉപയോഗിക്കാം, അത് ഉടൻ തന്നെ ഒരു സഹോദരൻ ഡിവിയെ പിന്തുടരുന്നു, അതാകട്ടെ, ഡാറ്റ-testID="ലീഡർ" ആട്രിബ്യൂട്ടുള്ള ഒരു ചൈൽഡ് ഇമേജ് ഘടകം ഉൾക്കൊള്ളുന്നു:
ഈ തലക്കെട്ട് മനസ്സിലാകുന്നില്ല
ഈ തലക്കെട്ടും കാണരുത്
നേതാവിൻ്റെ ചിത്രത്തിനായുള്ള തലക്കെട്ട്
ഇതാണ് ചോദ്യം: document.queryXPaths(` //div[ താഴെ-സഹോദരൻ::div[1] /img[@data-testID='leader'] ] /h2/ ടെക്സ്റ്റ്() `);
ഇതെല്ലാം എങ്ങനെ ഒത്തുചേരുന്നു എന്നറിയാൻ നമുക്ക് ഒരു ഡെമോയിൽ നോക്കാം: Bryan Rasmussen എഴുതിയ Pen Complex H2 Query [ഫോർക്ക്ഡ്] കാണുക. അതിനാൽ, അതെ. XPath ഉപയോഗിച്ച് ഒരു ടെസ്റ്റിൽ ഏത് ഘടകത്തിലേക്കും സാധ്യമായ നിരവധി പാതകളുണ്ട്. XSLT 1.0 ഒഴിവാക്കൽ ബ്രൗസറിൽ നിന്ന് XSLT 1.0 പിന്തുണ നീക്കം ചെയ്യാൻ Chrome ടീം പദ്ധതിയിടുന്നതായി ഞാൻ നേരത്തെ സൂചിപ്പിച്ചിരുന്നു. XSLT 1.0 ഡോക്യുമെൻ്റ് പരിവർത്തനത്തിനായി XML-ഫോക്കസ്ഡ് പ്രോഗ്രാമിംഗ് ഉപയോഗിക്കുന്നതിനാൽ അത് വളരെ പ്രധാനമാണ്, അത് XPath 1.0-നെ ആശ്രയിക്കുന്നു, അതാണ് മിക്ക ബ്രൗസറുകളിലും കാണപ്പെടുന്നത്. അത് സംഭവിക്കുമ്പോൾ, ഞങ്ങൾക്ക് XPath-ൻ്റെ ഒരു പ്രധാന ഘടകം നഷ്ടപ്പെടും. എന്നാൽ ടെസ്റ്റുകൾ എഴുതാൻ XPath വളരെ മികച്ചതാണ് എന്ന വസ്തുത കണക്കിലെടുക്കുമ്പോൾ, XPath മൊത്തത്തിൽ എപ്പോൾ വേണമെങ്കിലും അപ്രത്യക്ഷമാകാൻ സാധ്യതയില്ല. അതായത്, ഒരു ഫീച്ചർ എടുത്തുകളയുമ്പോൾ ആളുകൾക്ക് അതിൽ താൽപ്പര്യം തോന്നുന്നത് ഞാൻ ശ്രദ്ധിച്ചു. XSLT 1.0 ഒഴിവാക്കപ്പെടുന്ന സാഹചര്യത്തിൽ അത് തീർച്ചയായും ശരിയാണ്. ഹാക്കർ ന്യൂസിൽ മൂല്യനിർണ്ണയത്തിനെതിരായ വാദങ്ങൾ നിറഞ്ഞ ഒരു മുഴുവൻ ചർച്ചയും നടക്കുന്നു. XSLT ഉപയോഗിച്ച് ഒരു ബ്ലോഗിംഗ് ചട്ടക്കൂട് സൃഷ്ടിക്കുന്നതിനുള്ള മികച്ച ഉദാഹരണമാണ് പോസ്റ്റ്. നിങ്ങൾചർച്ച നിങ്ങൾക്ക് വായിക്കാൻ കഴിയും, എന്നാൽ അത്തരം കേസുകൾ കൈകാര്യം ചെയ്യുന്നതിനായി XLST-യുടെ ഒരു ഷിം ആയി JavaScript എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഇത് മനസ്സിലാക്കുന്നു. JavaScript-ൻ്റെ Saxon XSLT, XQUERY, XPath എഞ്ചിനുകളിലേക്കുള്ള ഒരു പോർട്ട് ആയ SaxonJS ബ്രൗസറുകൾ ഉപയോഗിക്കണമെന്ന നിർദ്ദേശങ്ങളും ഞാൻ കണ്ടു. അതൊരു രസകരമായ ആശയമാണ്, പ്രത്യേകിച്ചും സാക്സൺ-ജെഎസ് ഈ സ്പെസിഫിക്കേഷനുകളുടെ നിലവിലെ പതിപ്പ് നടപ്പിലാക്കുന്നതിനാൽ, XPath അല്ലെങ്കിൽ XSLT യുടെ ഏതെങ്കിലും പതിപ്പ് 1.0-നപ്പുറം നടപ്പിലാക്കുന്ന ബ്രൗസറില്ല, XQuery നടപ്പിലാക്കുന്ന ഒന്നുമില്ല. SaxonJS-ൻ്റെയും സാക്സൺ എഞ്ചിൻ്റെ മറ്റ് പതിപ്പുകളുടെയും പിന്നിലുള്ള കമ്പനിയായ Saxonica-യിലെ Norm Tovey-Walsh-ൽ ഞാൻ എത്തി. അദ്ദേഹം പറഞ്ഞു: "ആധുനിക XML സാങ്കേതികവിദ്യകൾ ബ്രൗസറിലേക്ക് സമന്വയിപ്പിക്കുന്നതിനുള്ള ഒരു ആരംഭ പോയിൻ്റായി SaxonJS എടുക്കാൻ ഏതെങ്കിലും ബ്രൗസർ വെണ്ടർക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, അവരുമായി അത് ചർച്ച ചെയ്യുന്നതിൽ ഞങ്ങൾക്ക് സന്തോഷമുണ്ട്." - നോർം ടോവി-വാൾഷ്
എന്നാൽ ഇതും ചേർത്തു: "SaxonJS അതിൻ്റെ നിലവിലെ രൂപത്തിൽ എടുത്ത് ബ്രൗസർ ബിൽഡിലേക്ക് മാറ്റമില്ലാതെ ഇടുന്നതാണ് അനുയോജ്യമായ സമീപനമെന്ന് ആരെങ്കിലും ചിന്തിച്ചാൽ ഞാൻ വളരെ ആശ്ചര്യപ്പെടും. ഒരു ബ്രൗസർ വെണ്ടർക്ക്, അവർ ബ്രൗസർ നിർമ്മിക്കുന്ന വസ്തുതയുടെ സ്വഭാവമനുസരിച്ച്, നമുക്ക് 'പുറത്തുനിന്ന്' കഴിയുന്നതിനേക്കാൾ വളരെ ആഴത്തിലുള്ള തലത്തിൽ സംയോജനത്തെ സമീപിക്കാൻ കഴിയും." - നോർം ടോവി-വാൾഷ്
ടോവി-വാൽഷിൻ്റെ അഭിപ്രായങ്ങൾ XSLT ഒഴിവാക്കൽ പ്രഖ്യാപനത്തിന് ഏകദേശം ഒരാഴ്ച മുമ്പാണ് വന്നത് എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. ഉപസംഹാരം എനിക്ക് മുന്നോട്ട് പോകാമായിരുന്നു. എന്നാൽ ഇത് XPath-ൻ്റെ ശക്തി പ്രകടമാക്കുകയും മഹത്തായ കാര്യങ്ങൾ നേടുന്നതിന് അത് എങ്ങനെ ഉപയോഗിക്കാമെന്ന് തെളിയിക്കുന്ന ധാരാളം ഉദാഹരണങ്ങൾ നിങ്ങൾക്ക് നൽകുകയും ചെയ്തുവെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു. ബ്രൗസർ സ്റ്റാക്കിലെ പഴയ സാങ്കേതികവിദ്യയുടെ മികച്ച ഉദാഹരണമാണിത്, അത് ഇപ്പോഴും ധാരാളം യൂട്ടിലിറ്റികൾ ഉണ്ട്, അത് നിലവിലുണ്ടെന്ന് നിങ്ങൾക്കറിയില്ലെങ്കിലും അല്ലെങ്കിൽ അതിനായി എത്താൻ ഒരിക്കലും ചിന്തിച്ചിട്ടില്ലെങ്കിലും. കൂടുതൽ വായന
മറൗൺ അയ്ലി, യൂസഫ് ബകൂണി, നാദർ ജല്ലൂൽ, റിമ കിലാനി എന്നിവരുടെ “സ്വാഭാവിക ഭാഷയോടുകൂടിയ ഓട്ടോമേറ്റഡ് വെബ് ടെസ്റ്റുകളുടെ പ്രതിരോധശേഷി വർദ്ധിപ്പിക്കൽ” (ACM ഡിജിറ്റൽ ലൈബ്രറി) ഈ ലേഖനം പ്രതിരോധശേഷിയുള്ള ടെസ്റ്റുകൾ എഴുതുന്നതിനുള്ള നിരവധി XPath ഉദാഹരണങ്ങൾ നൽകുന്നു. XPath (MDN) XPath എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് വിശദീകരിക്കുന്ന ഒരു സാങ്കേതിക വിശദീകരണം നിങ്ങൾക്ക് വേണമെങ്കിൽ ആരംഭിക്കാനുള്ള മികച്ച സ്ഥലമാണിത്. XPath ട്യൂട്ടോറിയൽ (ZVON) ഈ ട്യൂട്ടോറിയൽ എൻ്റെ സ്വന്തം പഠനത്തിന് ഏറ്റവും സഹായകരമാണെന്ന് ഞാൻ കണ്ടെത്തി, ധാരാളം ഉദാഹരണങ്ങൾക്കും വ്യക്തമായ വിശദീകരണങ്ങൾക്കും നന്ദി. XPatherThis സംവേദനാത്മക ഉപകരണം നിങ്ങളെ കോഡ് ഉപയോഗിച്ച് നേരിട്ട് പ്രവർത്തിക്കാൻ അനുവദിക്കുന്നു.
