વર્ષોથી એક વલણ જોવા માટે હું લાંબા સમયથી ફ્રન્ટ-એન્ડ ડેવલપમેન્ટમાં રહ્યો છું: તેના ઐતિહાસિક સંદર્ભને સમજ્યા વિના પ્રોગ્રામિંગના નવા દાખલા સાથે કામ કરતા યુવા વિકાસકર્તાઓ. તે, અલબત્ત, કંઈક ન જાણવું તે સંપૂર્ણપણે સમજી શકાય તેવું છે. વેબ એ વિવિધ કૌશલ્યો અને વિશેષતાઓના સમૂહ સાથેનું ખૂબ મોટું સ્થાન છે, અને અમે હંમેશા જાણતા નથી કે અમે શું નથી જાણતા. આ ક્ષેત્રમાં શીખવું એ એક વખત બનેલી અને સમાપ્ત થાય તેવી કોઈ વસ્તુને બદલે ચાલુ સફર છે. કેસમાં: મારી ટીમના કોઈએ પૂછ્યું કે શું વપરાશકર્તાઓ UI માં ચોક્કસ ટેબથી દૂર નેવિગેટ કરે છે કે કેમ તે કહેવું શક્ય છે. મેં જાવાસ્ક્રિપ્ટની અનલોડ ઇવેન્ટ પહેલાં નિર્દેશ કર્યો. પરંતુ જેમણે પહેલા આનો સામનો કર્યો છે તેઓ જાણે છે કે આ શક્ય છે કારણ કે તેઓને અન્ય સાઇટ્સ પર વણસાચવેલા ડેટા વિશે ચેતવણીઓ આપવામાં આવી છે, જેના માટે અનલોડ એ એક સામાન્ય ઉપયોગ કેસ છે. મેં સારા માપદંડ માટે મારા સાથીદારને પૃષ્ઠ છુપાવો અને દૃશ્યતા બદલો ઇવેન્ટ્સ પણ દર્શાવી. મને તે વિશે કેવી રીતે ખબર પડી? કારણ કે તે બીજા પ્રોજેક્ટમાં આવ્યો હતો, એટલા માટે નહીં કે શરૂઆતમાં જાવાસ્ક્રિપ્ટ શીખતી વખતે મેં તેના પર અભ્યાસ કર્યો હતો. હકીકત એ છે કે આધુનિક ફ્રન્ટ-એન્ડ ફ્રેમવર્ક ટેક્નોલોજી દિગ્ગજોના ખભા પર ઉભા છે જે તેમની પહેલા હતા. તેઓ વિકાસ પ્રથાઓને અમૂર્ત કરે છે, ઘણીવાર વધુ સારા વિકાસકર્તાના અનુભવ માટે જે પરંપરાગત રીતે આવશ્યક ફ્રન્ટ-એન્ડ વિભાવનાઓ દરેકને જાણવી જોઈએ તે જાણવાની અથવા તેને સ્પર્શવાની જરૂરિયાત ઘટાડે છે અથવા તો દૂર કરે છે. CSS ઑબ્જેક્ટ મોડલ (CSSOM) ને ધ્યાનમાં લો. તમે અપેક્ષા રાખી શકો છો કે CSS અને JavaScript માં કામ કરતી કોઈપણ વ્યક્તિ પાસે CSSOM અનુભવનો સમૂહ છે, પરંતુ તે હંમેશા એવું બનતું નથી. હાલમાં પસંદ કરેલ ચુકવણી પ્રદાતા માટે અમારે સ્ટાઈલશીટ લોડ કરવાની જરૂર હોય તે ઈ-કોમર્સ સાઈટ માટે એક રિએક્ટ પ્રોજેક્ટ હતો જેના પર મેં કામ કર્યું હતું. સમસ્યા એ હતી કે સ્ટાઈલશીટ દરેક પૃષ્ઠ પર લોડ થઈ રહી હતી જ્યારે તે ફક્ત ચોક્કસ પૃષ્ઠ પર જ જરૂરી હતી. જે ડેવલપરે આ બનવાનું કામ સોંપ્યું છે તેણે ક્યારેય સ્ટાઈલશીટને ગતિશીલ રીતે લોડ કરી નથી. ફરીથી, આ સંપૂર્ણપણે સમજી શકાય તેવું છે જ્યારે પ્રતિક્રિયા એ પરંપરાગત અભિગમને દૂર કરે છે જેના માટે તમે પહોંચી શકો છો. CSSOM એ સંભવતઃ તમારા રોજિંદા કામમાં તમને જોઈતી વસ્તુ નથી. પરંતુ સંભવ છે કે તમારે અમુક સમયે તેની સાથે ક્રિયાપ્રતિક્રિયા કરવાની જરૂર પડશે, એક વખતના કિસ્સામાં પણ. આ અનુભવોએ મને આ લેખ લખવાની પ્રેરણા આપી. જંગલમાં અસ્તિત્વમાં છે તે ઘણી વેબ સુવિધાઓ અને તકનીકો છે જેને તમે તમારા રોજિંદા કામમાં ક્યારેય સીધો સ્પર્શ કરી શકતા નથી. કદાચ તમે વેબ ડેવલપમેન્ટ માટે એકદમ નવા છો અને તમે તેનાથી અજાણ છો કારણ કે તમે ચોક્કસ ફ્રેમવર્કના અમૂર્તતામાં ડૂબી ગયા છો કે જેના માટે તમારે તેને ઊંડાણપૂર્વક અથવા તો બિલકુલ જાણવાની જરૂર નથી. હું ખાસ કરીને XML વિશે બોલું છું, જે આપણામાંના ઘણા જાણે છે કે એક પ્રાચીન ભાષા છે જે HTML થી સંપૂર્ણપણે અલગ નથી. હું આને તાજેતરની WHATWG ચર્ચાઓને કારણે લાવી રહ્યો છું જે સૂચવે છે કે XSLT પ્રોગ્રામિંગ તરીકે ઓળખાતા XML સ્ટેકનો નોંધપાત્ર ભાગ બ્રાઉઝર્સમાંથી દૂર કરવો જોઈએ. આ બરાબર જૂની, અસ્તિત્વમાં છે તે પ્રકારની ટેક્નોલોજી અમારી પાસે વર્ષોથી છે જેનો ઉપયોગ CSSOM પરિસ્થિતિ જેટલો વ્યવહારુ માટે થઈ શકે છે. શું તમે પહેલા XSLT સાથે કામ કર્યું છે? ચાલો જોઈએ કે શું આપણે આ જૂની ટેક્નોલોજીમાં ભારે ઝુકાવ કરીએ છીએ અને આજે વાસ્તવિક દુનિયાની સમસ્યાઓનો સામનો કરવા માટે XML ના સંદર્ભની બહાર તેની સુવિધાઓનો લાભ લઈએ છીએ. XPath: સેન્ટ્રલ API સૌથી મહત્વપૂર્ણ XML ટેક્નોલોજી કે જે કદાચ સીધા XML પરિપ્રેક્ષ્યની બહાર સૌથી વધુ ઉપયોગી છે તે XPath છે, એક ક્વેરી લેંગ્વેજ કે જે તમને એક રુટ એલિમેન્ટ સાથે માર્કઅપ ટ્રીમાં કોઈપણ નોડ અથવા વિશેષતા શોધવા માટે પરવાનગી આપે છે. મને XSLT માટે વ્યક્તિગત સ્નેહ છે, પરંતુ તે XPath પર પણ આધાર રાખે છે, અને વ્યક્તિગત સ્નેહને રેન્કિંગના મહત્વમાં બાજુએ મૂકવો જોઈએ. XSLT ને દૂર કરવા માટેની દલીલ XPath નો કોઈ ઉલ્લેખ કરતી નથી, તેથી હું માનું છું કે તે હજી પણ માન્ય છે. તે સારું છે કારણ કે XPath એ ટેક્નોલોજીના આ સ્યુટમાં કેન્દ્રિય અને સૌથી મહત્વપૂર્ણ API છે, ખાસ કરીને જ્યારે સામાન્ય XML ઉપયોગની બહાર ઉપયોગ કરવા માટે કંઈક શોધવાનો પ્રયાસ કરવામાં આવે છે. તે મહત્વપૂર્ણ છે કારણ કે, જ્યારે CSS પસંદગીકારોનો ઉપયોગ તમારા પૃષ્ઠના મોટાભાગના ઘટકોને શોધવા માટે થઈ શકે છે, તેઓ તે બધાને શોધી શકતા નથી. વધુમાં, CSS પસંદગીકારોનો ઉપયોગ DOM માં તેની વર્તમાન સ્થિતિના આધારે તત્વ શોધવા માટે કરી શકાતો નથી. XPath કરી શકે છે. હવે, તમારામાંથી કેટલાક આ વાંચી રહ્યા છે કદાચ XPath જાણતા હશે, અને કેટલાકને કદાચ નહીં. XPath એ ટેક્નૉલૉજીનું ખૂબ મોટું ક્ષેત્ર છે, અને હું ખરેખર બધી મૂળભૂત બાબતો શીખવી શકતો નથી અને તમને આના જેવા એક લેખમાં તેની સાથે કરવા માટેની સરસ વસ્તુઓ પણ બતાવી શકતો નથી. મેં ખરેખર તે લેખ લખવાનો પ્રયાસ કર્યો, પરંતુ સરેરાશ સ્મેશિંગ મેગેઝિન પ્રકાશન 5,000 શબ્દોથી વધુ નથી. હું પહેલેથી જ કરતાં વધુ હતો2,000 શબ્દો જ્યારે માત્ર બેઝિક્સમાંથી અડધા માર્ગે. તેથી, હું XPath સાથે સરસ સામગ્રી કરવાનું શરૂ કરવા જઈ રહ્યો છું અને તમને કેટલીક લિંક્સ આપીશ જેનો ઉપયોગ તમે મૂળભૂત બાબતો માટે કરી શકો છો જો તમને આ સામગ્રી રસપ્રદ લાગતી હોય. XPath અને CSSનું સંયોજન XPath ઘણી બધી વસ્તુઓ કરી શકે છે જે CSS પસંદગીકારો તત્વોની ક્વેરી કરતી વખતે કરી શકતા નથી. પરંતુ CSS પસંદગીકારો કેટલીક વસ્તુઓ પણ કરી શકે છે જે XPath કરી શકતા નથી, એટલે કે, વર્ગના નામ દ્વારા ક્વેરી તત્વો.
CSS XPath .myClass /*[સમાવે છે(@class, "myClass")]
આ ઉદાહરણમાં, CSS ક્વેરીઝ એલિમેન્ટ્સ કે જેમાં .myClass ક્લાસનામ હોય છે. દરમિયાન, XPath ઉદાહરણ એવા તત્વોને પૂછે છે કે જેમાં “myClass” શબ્દમાળા સાથે એટ્રિબ્યુટ ક્લાસ હોય છે. બીજા શબ્દોમાં કહીએ તો, તે .myClass વર્ગનામ — તેમજ સ્ટ્રિંગમાં “myClass” ધરાવતા તત્વો, જેમ કે .myClass2 સહિત કોઈપણ વિશેષતામાં myClass સાથેના ઘટકોને પસંદ કરે છે. XPath એ અર્થમાં વ્યાપક છે. તેથી, ના. હું એવું સૂચન કરતો નથી કે આપણે CSS ને ટૉસ આઉટ કરવું જોઈએ અને XPath દ્વારા બધા ઘટકો પસંદ કરવાનું શરૂ કરવું જોઈએ. તે મુદ્દો નથી. મુદ્દો એ છે કે XPath એવી વસ્તુઓ કરી શકે છે જે CSS કરી શકતું નથી અને હજુ પણ તે ખૂબ જ ઉપયોગી હોઈ શકે છે, તેમ છતાં તે બ્રાઉઝર સ્ટેકમાં જૂની ટેક્નોલોજી છે અને તે પ્રથમ નજરમાં સ્પષ્ટ લાગતું નથી. ચાલો બે ટેક્નોલોજીનો એકસાથે ઉપયોગ કરીએ માત્ર એટલા માટે જ નહીં કે અમે કરી શકીએ છીએ, પરંતુ કારણ કે અમે પ્રક્રિયામાં XPath વિશે કંઈક શીખીશું, તેને તમારા સ્ટેકમાં બીજું સાધન બનાવીશું — જે તમે કદાચ જાણતા પણ ન હોવ તે બધા સમયથી ત્યાં છે! સમસ્યા એ છે કે JavaScript ની document.evaluate પદ્ધતિ અને અમે JavaScript માટે CSS APIs સાથે ઉપયોગ કરીએ છીએ તે વિવિધ ક્વેરી સિલેક્ટર પદ્ધતિઓ અસંગત છે. મેં અમને પ્રારંભ કરવા માટે એક સુસંગત ક્વેરીંગ API બનાવ્યું છે, જોકે સ્વીકાર્યપણે, મેં તેમાં બહુ વિચાર કર્યો નથી કારણ કે તે અમે અહીં જે કરી રહ્યા છીએ તેનાથી વિદાય છે. અહીં પુનઃઉપયોગી ક્વેરી કન્સ્ટ્રક્ટરનું એકદમ સરળ કાર્યકારી ઉદાહરણ છે: બ્રાયન રાસમુસેન દ્વારા પેન ક્વેરી એક્સપાથ [ફોર્ક્ડ] જુઓ. મેં દસ્તાવેજ ઑબ્જેક્ટ પર બે પદ્ધતિઓ ઉમેરી છે: queryCSSSelectors (જે અનિવાર્યપણે querySelectorAll છે) અને queryXPaths. આ બંને ક્વેરી રિઝલ્ટ ઑબ્જેક્ટ પરત કરે છે:
{ ક્વેરી પ્રકાર: નોડ્સ | શબ્દમાળા | નંબર | બુલિયન પરિણામો: કોઈપણ[] // html તત્વો, xml તત્વો, શબ્દમાળાઓ, સંખ્યાઓ, બુલિયન, queryCSSSselectors: (query: string, amend: boolean) => ક્વેરી પરિણામો, queryXpaths: (ક્વેરી: સ્ટ્રિંગ, સુધારો: બુલિયન) => ક્વેરી પરિણામો }
queryCSSSelectors અને queryXpaths ફંક્શન્સ તમે તેમને પરિણામો એરેમાંના ઘટકો પર આપો છો તે ક્વેરી ચલાવે છે, જ્યાં સુધી પરિણામો એરે પ્રકારના નોડ્સનો હોય, અલબત્ત. નહિંતર, તે ખાલી એરે અને નોડ્સના પ્રકાર સાથે queryResult પરત કરશે. જો સુધારો ગુણધર્મ સાચું પર સેટ કરેલ હોય, તો કાર્યો તેમના પોતાના ક્વેરી પરિણામો બદલશે. કોઈ પણ સંજોગોમાં આનો ઉપયોગ ઉત્પાદન વાતાવરણમાં થવો જોઈએ નહીં. બે ક્વેરી API નો એકસાથે ઉપયોગ કરવાની વિવિધ અસરોને દર્શાવવા માટે હું આ રીતે કરી રહ્યો છું. ઉદાહરણ ક્વેરીઝ હું વિવિધ XPath ક્વેરીઝના કેટલાક ઉદાહરણો બતાવવા માંગુ છું જે દર્શાવે છે કે તેઓ કઈ શક્તિશાળી વસ્તુઓ કરી શકે છે અને અન્ય અભિગમોની જગ્યાએ તેનો ઉપયોગ કેવી રીતે કરી શકાય છે. પ્રથમ ઉદાહરણ છે //li/text(). આ તમામ li તત્વોને પૂછે છે અને તેમના ટેક્સ્ટ નોડ્સ પરત કરે છે. તેથી, જો આપણે નીચેના HTML ને ક્વેરી કરવાના હતા:
- એક
- બે
- ત્રણ
…આ તે છે જે પરત કરવામાં આવે છે:
{"queryType":"xpathEvaluate","results":["one","two","three"],"resultType":"string"}
બીજા શબ્દોમાં કહીએ તો, આપણને નીચેનો એરે મળે છે: ["એક","બે","ત્રણ"]. સામાન્ય રીતે, તમે તે મેળવવા માટે li એલિમેન્ટ્સ માટે ક્વેરી કરશો, તે ક્વેરીનું પરિણામ એરેમાં ફેરવો, એરેને મેપ કરો અને દરેક એલિમેન્ટના ટેક્સ્ટ નોડ પરત કરો. પરંતુ અમે XPath સાથે તે વધુ સંક્ષિપ્તમાં કરી શકીએ છીએ: document.queryXPaths("//li/text()").પરિણામો.
નોંધ લો કે ટેક્સ્ટ નોડ મેળવવાનો માર્ગ ટેક્સ્ટ() નો ઉપયોગ કરવાનો છે, જે ફંક્શન સિગ્નેચર જેવો દેખાય છે — અને તે છે. તે એલિમેન્ટના ટેક્સ્ટ નોડને પરત કરે છે. અમારા ઉદાહરણમાં, માર્કઅપમાં ત્રણ li એલિમેન્ટ્સ છે, દરેકમાં ટેક્સ્ટ ("એક", "બે", અને "ત્રણ") છે.
ચાલો ટેક્સ્ટ() ક્વેરીનું વધુ એક ઉદાહરણ જોઈએ. ધારો કે આ અમારું માર્કઅપ છે:
ચાલો એક ક્વેરી લખીએ જે href એટ્રિબ્યુટ મૂલ્ય આપે છે: document.queryXPaths("//a[text() = 'સાઇન ઇન']/@href").પરિણામો.
છેલ્લા ઉદાહરણની જેમ જ આ વર્તમાન દસ્તાવેજ પરની XPath ક્વેરી છે, પરંતુ આ વખતે આપણે "સાઇન ઇન" ટેક્સ્ટ ધરાવતી લિંક (એક ઘટક)ની href એટ્રિબ્યુટ પરત કરીએ છીએ. વાસ્તવિક પરત ફર્યાપરિણામ ["/login.html"] છે. XPath કાર્યોનું વિહંગાવલોકન ત્યાં સંખ્યાબંધ XPath ફંક્શન્સ છે, અને તમે કદાચ તેનાથી અજાણ હશો. મને લાગે છે કે, નીચેનાનો સમાવેશ કરીને જાણવા યોગ્ય એવા ઘણા છે:
starts-with જો કોઈ ટેક્સ્ટ ચોક્કસ અન્ય ટેક્સ્ટ ઉદાહરણ સાથે શરૂ થાય છે, starts-with(@href, 'http:') સાચું પરત કરે છે જો href લક્ષણ http: થી શરૂ થાય છે. સમાવે છે જો કોઈ ટેક્સ્ટમાં કોઈ ચોક્કસ અન્ય ટેક્સ્ટ ઉદાહરણ હોય, સમાવે છે(ટેક્સ્ટ(), "સ્મેશિંગ મેગેઝિન") જો ટેક્સ્ટ નોડમાં ગમે ત્યાં "સ્મેશિંગ મેગેઝિન" શબ્દો હોય તો તે સાચું પરત કરે છે. ગણક ક્વેરી માટે કેટલી મેચો છે તેની ગણતરી પરત કરે છે. ઉદાહરણ તરીકે, count(//*[starts-with(@href, 'http:']) સંદર્ભ નોડમાં કેટલી લિંક્સમાં href એટ્રિબ્યુટ સાથે ઘટકો છે કે જે http: થી શરૂ થતું ટેક્સ્ટ ધરાવે છે તેની ગણતરી આપે છે. સબસ્ટ્રિંગ જાવાસ્ક્રિપ્ટ સબસ્ટ્રિંગ જેવું કામ કરે છે, સિવાય કે તમે સ્ટ્રિંગને દલીલ તરીકે પાસ કરો. ઉદાહરણ તરીકે, substring("my text", 2, 4) "y t" પરત કરે છે. substring-before બીજી સ્ટ્રિંગ પહેલાં સ્ટ્રિંગનો ભાગ પરત કરે છે. ઉદાહરણ તરીકે, substing-before("my text", " ") "my" પરત કરે છે. તેવી જ રીતે, substring-before("hi","bye") ખાલી સ્ટ્રિંગ પરત કરે છે. substring-after બીજી સ્ટ્રિંગ પછી સ્ટ્રિંગનો ભાગ પરત કરે છે. ઉદાહરણ તરીકે, substing-after("my text", " ") "ટેક્સ્ટ" પરત કરે છે. તેવી જ રીતે, substring-after("hi","bye") ખાલી સ્ટ્રિંગ પરત કરે છે. નોર્મલાઇઝ-સ્પેસ આગળની અને પાછળની વ્હાઇટસ્પેસને છીનવીને અને વ્હાઇટસ્પેસ અક્ષરોના સિક્વન્સને એક સ્પેસ દ્વારા બદલીને નોર્મલાઇઝ્ડ વ્હાઇટસ્પેસ સાથે દલીલ સ્ટ્રિંગ પરત કરે છે. જો દલીલ ખોટી હોય તો બુલિયન સાચું પરત કરે છે, અન્યથા ખોટા. true બુલિયન સાચું પરત કરે છે. false રીટર્ન બુલિયન ફોલ્સ. concat JavaScript concat જેવી જ વસ્તુ, સિવાય કે તમે તેને સ્ટ્રિંગ પર પદ્ધતિ તરીકે ચલાવો નહીં. તેના બદલે, તમે જે તાર જોડવા માંગો છો તે તમામ સ્ટ્રીંગ્સ મૂકો. string-lengthઆ JavaScript સ્ટ્રિંગ-લેન્થ જેવી નથી, પરંતુ તે દલીલ તરીકે આપેલી સ્ટ્રિંગની લંબાઈ પરત કરે છે. translateThis એક શબ્દમાળા લે છે અને બીજી દલીલને ત્રીજી દલીલમાં બદલે છે. ઉદાહરણ તરીકે, અનુવાદ કરો("abcdef", "abc", "XYZ") XYZdef આઉટપુટ કરો.
આ ચોક્કસ XPath ફંક્શન્સ સિવાય, અન્ય સંખ્યાબંધ ફંક્શન્સ છે જે તેમના JavaScript સમકક્ષો - અથવા મૂળભૂત રીતે કોઈપણ પ્રોગ્રામિંગ ભાષામાં સમકક્ષો જેવા જ કાર્ય કરે છે - જે તમને કદાચ ઉપયોગી પણ લાગશે, જેમ કે ફ્લોર, સીલિંગ, રાઉન્ડ, સરવાળો, વગેરે. નીચેનો ડેમો આ દરેક કાર્યોને સમજાવે છે: બ્રાયન રાસમુસેન દ્વારા પેન એક્સપાથ ન્યુમેરિકલ ફંક્શન્સ [ફોર્ક્ડ] જુઓ. નોંધ કરો કે, મોટાભાગના સ્ટ્રીંગ મેનિપ્યુલેશન ફંક્શન્સની જેમ, સંખ્યાબંધ સંખ્યાબંધ એક જ ઇનપુટ લે છે. આ, અલબત્ત, કારણ કે છેલ્લા XPath ઉદાહરણની જેમ તેઓ ક્વેરી કરવા માટે ઉપયોગમાં લેવાના હોવાનું માનવામાં આવે છે: //li[ફ્લોર(ટેક્સ્ટ()) > 250]/@val
જો તમે તેનો ઉપયોગ કરો છો, જેમ કે મોટાભાગનાં ઉદાહરણો કરે છે, તો તમે તેને પાથ સાથે મેળ ખાતા પ્રથમ નોડ પર ચલાવવાનું સમાપ્ત કરશો. કેટલાક પ્રકારના રૂપાંતરણ કાર્યો પણ છે જે તમારે કદાચ ટાળવા જોઈએ કારણ કે JavaScript પાસે પહેલેથી જ તેની પોતાની પ્રકારની રૂપાંતરણ સમસ્યાઓ છે. પરંતુ એવા સમયે હોઈ શકે છે જ્યારે તમે સ્ટ્રિંગને નંબરમાં રૂપાંતરિત કરવા માંગો છો જેથી કરીને તેને અન્ય સંખ્યાની સામે તપાસી શકાય. ફંક્શન કે જે કોઈ વસ્તુનો પ્રકાર સેટ કરે છે તે બુલિયન, નંબર, સ્ટ્રિંગ અને નોડ છે. આ મહત્વપૂર્ણ XPath ડેટાટાઈપ્સ છે. અને જેમ તમે કલ્પના કરી શકો છો, આમાંના મોટા ભાગના ફંક્શનનો ઉપયોગ ડેટાટાઈપ્સ પર થઈ શકે છે જે DOM નોડ્સ નથી. ઉદાહરણ તરીકે, સબસ્ટ્રિંગ-આફ્ટર એક સ્ટ્રિંગ લે છે કારણ કે આપણે પહેલાથી જ આવરી લીધું છે, પરંતુ તે href એટ્રિબ્યુટમાંથી સ્ટ્રિંગ હોઈ શકે છે. તે ફક્ત એક સ્ટ્રિંગ પણ હોઈ શકે છે:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
દેખીતી રીતે, આ ઉદાહરણ આપણને પરિણામોની શ્રેણીને ["world"] તરીકે પાછું આપશે. આને ક્રિયામાં બતાવવા માટે, મેં DOM નોડ્સ ન હોય તેવી વસ્તુઓ સામે ફંક્શનનો ઉપયોગ કરીને ડેમો પેજ બનાવ્યું છે: બ્રાયન રાસમુસેન દ્વારા પેન ક્વેરી એક્સપાથ [ફોર્ક્ડ] જુઓ. તમારે અનુવાદ કાર્યના આશ્ચર્યજનક પાસાની નોંધ લેવી જોઈએ, જે એ છે કે જો તમારી પાસે બીજી દલીલમાં એક અક્ષર હોય (એટલે કે, તમે અનુવાદ કરવા માંગો છો તે અક્ષરોની સૂચિ) અને અનુવાદ કરવા માટે કોઈ મેળ ખાતું અક્ષર નથી, તો તે અક્ષર આઉટપુટમાંથી દૂર થઈ જશે. આમ, આ:
અનુવાદ કરો('હેલો, મારું નામ ઇનિગો મોન્ટોયા છે, તમે મારા પિતાને મારી નાખ્યા, મરવાની તૈયારી કરો','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…પરિણામો, જગ્યાઓ સહિત: [" * * ** "]
આનો અર્થ એ છે કે અક્ષર “a” નું ભાષાંતર ફૂદડી (*) માં કરવામાં આવી રહ્યું છે, પરંતુ લક્ષ્ય સ્ટ્રિંગને જોતાં દરેક અન્ય અક્ષર કે જેમાં અનુવાદ નથી તે સંપૂર્ણપણે દૂર કરવામાં આવે છે. વ્હાઇટસ્પેસ એ આપણે બાકી રાખી છેઅનુવાદિત "a" અક્ષરો વચ્ચે. પછી ફરીથી, આ ક્વેરી:
અનુવાદ કરો('હેલો, મારું નામ ઇનિગો મોન્ટોયા છે, તમે મારા પિતાને મારી નાખ્યા, મરવાની તૈયારી કરો','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************))
…સમસ્યા નથી અને પરિણામ આઉટપુટ કરે છે જે આના જેવું દેખાય છે:
"********************************************************"
તે તમને પ્રહાર કરી શકે છે કે XPath અનુવાદ ફંક્શન જે કરે છે તે કરવા માટે JavaScriptમાં કોઈ સરળ રીત નથી, જો કે ઘણા ઉપયોગના કિસ્સાઓ માટે, રેગ્યુલર એક્સપ્રેશન સાથે બદલો બધા તેને હેન્ડલ કરી શકે છે. તમે તે જ અભિગમનો ઉપયોગ કરી શકો છો જે મેં દર્શાવ્યું છે, પરંતુ જો તમે ફક્ત શબ્દમાળાઓનું ભાષાંતર કરવા માંગતા હોવ તો તે સબઓપ્ટીમલ છે. નીચેનો ડેમો JavaScript સંસ્કરણ પ્રદાન કરવા માટે XPath ના અનુવાદ કાર્યને લપેટી લે છે: બ્રાયન રાસમુસેન દ્વારા પેન અનુવાદ કાર્ય [ફોર્ક્ડ] જુઓ. તમે આના જેવું કંઈક ક્યાં વાપરી શકો છો? ત્રણ-સ્થાન ઑફસેટ સાથે સીઝર સાઇફર એન્ક્રિપ્શનને ધ્યાનમાં લો (દા.ત., 48 બી.સી.થી ટોચની-ઓફ-ધ-લાઇન એન્ક્રિપ્શન):
અનુવાદ કરો("સીઝર રૂબીકોનને પાર કરવાનું વિચારી રહ્યો છે!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
ઇનપુટ ટેક્સ્ટ "સીઝર રૂબીકોનને પાર કરવાનું વિચારી રહ્યો છે!" પરિણામ "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" વિવિધ શક્યતાઓનું બીજું ઝડપી ઉદાહરણ આપવા માટે, મેં એક મેટલ ફંક્શન બનાવ્યું છે જે સ્ટ્રિંગ ઇનપુટ લે છે અને ટેક્સ્ટને પરત કરવા માટે ટ્રાન્સલેટ ફંક્શનનો ઉપયોગ કરે છે, જેમાં umlauts લેનારા તમામ અક્ષરોનો સમાવેશ થાય છે. બ્રાયન રાસમુસેન દ્વારા પેન મેટલ ફંક્શન [ફોર્ક્ડ] જુઓ.
const metal = (str) => { પરત અનુવાદ(str, "AOUaou","ÄÖÜäöü"); }
અને, જો "મોટલી ક્રૂ રૂલ્સ, રૉક ઓન ડ્યુડ્સ!" લખાણ આપવામાં આવે તો, "મોટલી ક્રુ રુલ્સ, રૉક ઓન ડ્યુડ્સ!" પરત કરે છે. દેખીતી રીતે, આ કાર્યના તમામ પ્રકારના પેરોડી ઉપયોગો હોઈ શકે છે. જો તે તમે છો, તો આ TVTropes લેખ તમને પુષ્કળ પ્રેરણા આપવી જોઈએ. XPath સાથે CSS નો ઉપયોગ કરવો XPath સાથે CSS સિલેક્ટર્સનો ઉપયોગ કરવા માટેનું અમારું મુખ્ય કારણ યાદ રાખો: CSS એ ક્લાસ શું છે તે ઘણું સમજે છે, જ્યારે તમે XPath સાથે શ્રેષ્ઠ રીતે કરી શકો તે ક્લાસ એટ્રિબ્યુટની સ્ટ્રિંગ સરખામણી છે. તે મોટા ભાગના કિસ્સાઓમાં કામ કરશે. પરંતુ જો તમે ક્યારેય એવી પરિસ્થિતિમાં આવી જાવ કે જ્યાં, કહો કે, કોઈએ .primaryLinks અને .primaryLinks2 નામના વર્ગો બનાવ્યા હોય અને તમે .primaryLinks વર્ગ મેળવવા માટે XPath નો ઉપયોગ કરી રહ્યાં હોવ, તો તમને સમસ્યાઓનો સામનો કરવો પડી શકે છે. જ્યાં સુધી આના જેવું કંઈ મૂર્ખ નથી ત્યાં સુધી, તમે કદાચ XPath નો ઉપયોગ કરશો. પરંતુ મને જાણ કરતાં દુઃખ થાય છે કે મેં એવા સ્થળોએ કામ કર્યું છે જ્યાં લોકો આ પ્રકારની મૂર્ખ વસ્તુઓ કરે છે. CSS અને XPath નો એકસાથે ઉપયોગ કરીને અહીં બીજો ડેમો છે. તે બતાવે છે કે જ્યારે આપણે દસ્તાવેજનો નોડ ન હોય તેવા સંદર્ભ નોડ પર XPath ચલાવવા માટે કોડનો ઉપયોગ કરીએ ત્યારે શું થાય છે. બ્રાયન રાસમુસેન દ્વારા પેન સીએસએસ અને એક્સપાથને એકસાથે [ફોર્ક્ડ] જુઓ. CSS ક્વેરી .relatedarticles a છે, જે .relatedarticles વર્ગને સોંપેલ divમાં બે ઘટકોને મેળવે છે. તે પછી ત્રણ "ખરાબ" ક્વેરીઝ છે, એટલે કે, ક્વેરીઝ કે જે આ તત્વો સાથે કોન્ટેસ્ટ નોડ તરીકે ચાલતી વખતે આપણે જે કરવા માંગીએ છીએ તે કરતી નથી. હું સમજાવી શકું છું કે શા માટે તેઓ તમારી અપેક્ષા કરતા અલગ રીતે વર્તે છે. પ્રશ્નમાં ત્રણ ખરાબ પ્રશ્નો છે:
//ટેક્સ્ટ(): દસ્તાવેજમાં તમામ ટેક્સ્ટ પરત કરે છે. //a/text(): દસ્તાવેજમાંની લિંક્સની અંદરની તમામ ટેક્સ્ટ પરત કરે છે. ./a/text(): કોઈ પરિણામ આપતું નથી.
આ પરિણામોનું કારણ એ છે કે જ્યારે તમારો સંદર્ભ CSS ક્વેરીમાંથી પરત કરવામાં આવેલ ઘટકો છે, // સમગ્ર દસ્તાવેજની વિરુદ્ધ જાય છે. આ XPath ની તાકાત છે; CSS નોડમાંથી પૂર્વજ સુધી અને પછી તે પૂર્વજના ભાઈ સુધી જઈ શકતું નથી, અને તે ભાઈના વંશજ સુધી જઈ શકતું નથી. પરંતુ XPath કરી શકે છે. દરમિયાન, ./ વર્તમાન નોડના બાળકોને પૂછે છે, જ્યાં ડોટ (.) વર્તમાન નોડનું પ્રતિનિધિત્વ કરે છે, અને ફોરવર્ડ સ્લેશ (/) અમુક ચાઇલ્ડ નોડ પર જવાનું પ્રતિનિધિત્વ કરે છે — પછી ભલે તે એટ્રિબ્યુટ હોય, એલિમેન્ટ હોય કે ટેક્સ્ટ પાથના આગલા ભાગ દ્વારા નક્કી કરવામાં આવે છે. પરંતુ CSS ક્વેરી દ્વારા પસંદ કરેલ કોઈ ચાઈલ્ડ એલિમેન્ટ નથી, આમ તે ક્વેરી પણ કંઈ પાછી આપતી નથી. તે છેલ્લા ડેમોમાં ત્રણ સારી ક્વેરીઝ છે:
.//ટેક્સ્ટ(), ./text(), નોર્મલાઇઝ-સ્પેસ(./ટેક્સ્ટ()).
નોર્મલાઇઝ-સ્પેસ ક્વેરી XPath ફંક્શનનો ઉપયોગ દર્શાવે છે, પરંતુ અન્ય ક્વેરીઝમાં સમાવિષ્ટ સમસ્યાને પણ ઠીક કરે છે. HTML આ રીતે રચાયેલ છે:
સેલેનિયમ વેબડ્રાઇવર સાથે તમારા ફીચર પરીક્ષણને સ્વચાલિત કરવું
ક્વેરી ટેક્સ્ટ નોડની શરૂઆતમાં અને અંતમાં લાઇન ફીડ આપે છે,અને નોર્મલાઇઝ-સ્પેસ આને દૂર કરે છે. કોઈપણ XPath ફંક્શનનો ઉપયોગ કરવો જે ઈનપુટ 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/"]
XPath ફંક્શનને JavaScript માં ફંક્શન્સની જેમ જ નેસ્ટ કરી શકાય છે. તેથી, જો આપણે સ્મેશિંગ મેગેઝિન URL માળખું જાણતા હોઈએ, તો અમે નીચે મુજબ કરી શકીએ છીએ (ટેમ્પલેટ લિટરલ્સનો ઉપયોગ કરવાની ભલામણ કરવામાં આવે છે): `અનુવાદ( સબસ્ટ્રિંગ( substring-after(./@href, ‘www.smashingmagazine.com/') ,9), '/', '')''
આ એ હદે થોડું જટિલ બની રહ્યું છે કે તે શું કરે છે તેનું વર્ણન કરતી ટિપ્પણીઓની જરૂર છે: www.smashingmagazine.com/ પછી href એટ્રિબ્યુટમાંથી બધા URL લો, પ્રથમ નવ અક્ષરો દૂર કરો, પછી ફોરવર્ડ સ્લેશ (/) અક્ષરને કંઈપણમાં અનુવાદિત કરો જેથી કરીને અંતિમ ફોરવર્ડ સ્લેશથી છુટકારો મેળવી શકાય. પરિણામી એરે:
["સુવિધા-પરીક્ષણ-સેલેનિયમ-વેબડ્રાઇવર","સ્વચાલિત-પરીક્ષણ-પરિણામો-સુધારો-સુલભતા"]
વધુ XPath ઉપયોગના કેસો XPath ખરેખર પરીક્ષણમાં ચમકી શકે છે. કારણ જોવું મુશ્કેલ નથી, કારણ કે XPath નો ઉપયોગ DOM માં દરેક એલિમેન્ટ મેળવવા માટે DOM માં કોઈપણ સ્થાનેથી થઈ શકે છે, જ્યારે CSS કરી શકતું નથી. તમે ઘણી આધુનિક બિલ્ડ સિસ્ટમ્સમાં સતત બાકી રહેલા CSS વર્ગો પર ગણતરી કરી શકતા નથી, પરંતુ XPath સાથે, અમે બદલાતા DOM સ્ટ્રક્ચરને ધ્યાનમાં લીધા વિના, ઘટકની ટેક્સ્ટ સામગ્રી શું છે તે અંગે વધુ મજબૂત મેચો કરવામાં સક્ષમ છીએ. એવી તકનીકો પર સંશોધન કરવામાં આવ્યું છે જે તમને સ્થિતિસ્થાપક XPath પરીક્ષણો કરવાની મંજૂરી આપે છે. કસોટીઓ બહાર આવવા અને નિષ્ફળ જવાથી વધુ ખરાબ કંઈ નથી કારણ કે CSS પસંદગીકાર હવે કામ કરતું નથી કારણ કે કંઈક નામ બદલવામાં આવ્યું છે અથવા દૂર કરવામાં આવ્યું છે. XPath બહુવિધ લોકેટર નિષ્કર્ષણમાં પણ ખરેખર મહાન છે. એક તત્વ સાથે મેળ કરવા માટે XPath ક્વેરીઝનો ઉપયોગ કરવાની એક કરતાં વધુ રીતો છે. આ જ CSS સાથે સાચું છે. પરંતુ XPath ક્વેરી વસ્તુઓને વધુ લક્ષિત રીતે ડ્રિલ કરી શકે છે જે જે પરત કરવામાં આવે છે તેને મર્યાદિત કરે છે, જેનાથી તમે ચોક્કસ મેચ શોધી શકો છો જ્યાં ઘણી સંભવિત મેચો હોઈ શકે છે. ઉદાહરણ તરીકે, અમે એક ચોક્કસ h2 ઘટક પરત કરવા માટે XPath નો ઉપયોગ કરી શકીએ છીએ જે div ની અંદર સમાયેલ છે જે તરત જ ભાઈ-બહેન ડિવને અનુસરે છે જે બદલામાં, તેના પર data-testID="leader" વિશેષતા સાથે બાળ છબી તત્વ ધરાવે છે:
આ મથાળું મળતું નથી
આ હેડલાઇન પણ મેળવશો નહીં
લીડર ઈમેજ માટે હેડર
આ ક્વેરી છે: document.queryXPaths(` //div[ નીચેના-ભાઈ::div[1] /img[@data-testID='નેતા'] ] /h2/ ટેક્સ્ટ() `);
આ બધું એકસાથે કેવી રીતે આવે છે તે જોવા માટે ચાલો ડેમોમાં ડ્રોપ કરીએ: બ્રાયન રાસમુસેન દ્વારા પેન કોમ્પ્લેક્સ H2 ક્વેરી [ફોર્ક્ડ] જુઓ. તો, હા. XPath નો ઉપયોગ કરીને પરીક્ષણમાં કોઈપણ તત્વ માટે ઘણા બધા સંભવિત રસ્તાઓ છે. XSLT 1.0 અવમૂલ્યન મેં શરૂઆતમાં ઉલ્લેખ કર્યો હતો કે ક્રોમ ટીમ બ્રાઉઝરમાંથી 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 આ વિશિષ્ટતાઓના વર્તમાન સંસ્કરણને અમલમાં મૂકે છે, જ્યારે XPath અથવા XSLT નું 1.0 થી આગળના કોઈપણ સંસ્કરણને અમલમાં મૂકતું કોઈ બ્રાઉઝર નથી, અને XQuery લાગુ કરતું કોઈ પણ નથી. હું સેક્સોનિકા ખાતે નોર્મ ટોવે-વોલ્શનો સંપર્ક કર્યો, જે સેક્સોનજેએસ અને સેક્સન એન્જિનના અન્ય સંસ્કરણોની પાછળની કંપની છે. તેણે કહ્યું: "જો કોઈપણ બ્રાઉઝર વિક્રેતા બ્રાઉઝરમાં આધુનિક XML તકનીકોને એકીકૃત કરવા માટે પ્રારંભિક બિંદુ તરીકે SaxonJS લેવા માટે રસ ધરાવતા હોય, તો અમે તેમની સાથે ચર્ચા કરવા માટે રોમાંચિત થઈશું."- નોર્મ ટોવે-વોલ્શ
પણ ઉમેર્યું: "મને ખૂબ જ આશ્ચર્ય થશે જો કોઈ એવું વિચારે કે સેક્સનજેએસને તેના વર્તમાન સ્વરૂપમાં લેવું અને તેને બ્રાઉઝર બિલ્ડમાં યથાવત રાખવો એ આદર્શ અભિગમ હશે. એક બ્રાઉઝર વિક્રેતા, સ્વભાવથી કે તેઓ બ્રાઉઝર બનાવે છે, આપણે 'બહારથી' કરી શકીએ તે કરતાં વધુ ઊંડા સ્તરે એકીકરણનો સંપર્ક કરી શકે છે."- નોર્મ ટોવે-વોલ્શ
તે નોંધવું યોગ્ય છે કે ટોવે-વોલ્શની ટિપ્પણીઓ XSLT અવમૂલ્યનની જાહેરાતના લગભગ એક અઠવાડિયા પહેલા આવી હતી. નિષ્કર્ષ હું પર અને પર જઈ શકે છે. પરંતુ હું આશા રાખું છું કે આનાથી XPath ની શક્તિ પ્રદર્શિત થઈ છે અને તમને મહાન વસ્તુઓ પ્રાપ્ત કરવા માટે તેનો ઉપયોગ કેવી રીતે કરવો તે દર્શાવતા પુષ્કળ ઉદાહરણો આપ્યા છે. તે બ્રાઉઝર સ્ટેકમાં જૂની ટેક્નોલોજીનું ઉત્તમ ઉદાહરણ છે કે જે આજે પણ પુષ્કળ ઉપયોગિતા ધરાવે છે, ભલે તમે ક્યારેય જાણ્યું ન હોય કે તે અસ્તિત્વમાં છે અથવા ક્યારેય તેના સુધી પહોંચવાનું વિચાર્યું નથી. વધુ વાંચન
Maroun Ayli, Youssef Bakouny, Nader Jalloul અને Rima Kilany દ્વારા “નેચરલ લેંગ્વેજ સાથે સ્વચાલિત વેબ ટેસ્ટની સ્થિતિસ્થાપકતા વધારવી” (ACM ડિજિટલ લાઇબ્રેરી) આ લેખ સ્થિતિસ્થાપક પરીક્ષણો લખવા માટે ઘણા XPath ઉદાહરણો પૂરા પાડે છે. XPath (MDN) જો તમને XPath કેવી રીતે કાર્ય કરે છે તેની વિગત આપતી તકનીકી સમજૂતી જોઈતી હોય તો શરૂ કરવા માટે આ એક ઉત્તમ સ્થળ છે. XPath ટ્યુટોરીયલ (ZVON)મને આ ટ્યુટોરીયલ મારા પોતાના શિક્ષણમાં સૌથી વધુ મદદરૂપ જણાયું છે, ઘણા ઉદાહરણો અને સ્પષ્ટ સ્પષ્ટતાઓને કારણે આભાર. XPatherઆ ઇન્ટરેક્ટિવ ટૂલ તમને સીધા કોડ સાથે કામ કરવા દે છે.
