నేను చాలా కాలంగా ఫ్రంట్-ఎండ్ డెవలప్మెంట్లో ఉన్నాను: చాలా సంవత్సరాలుగా ట్రెండ్ని చూసేందుకు: యువ డెవలపర్లు ప్రోగ్రామింగ్ యొక్క చారిత్రక సందర్భాన్ని అర్థం చేసుకోకుండా కొత్త నమూనాతో పని చేస్తున్నారు. ఇది, వాస్తవానికి, ఏదో తెలియదని ఖచ్చితంగా అర్థం చేసుకోవచ్చు. విభిన్న నైపుణ్యాలు మరియు ప్రత్యేకతలతో వెబ్ చాలా పెద్ద ప్రదేశం, మరియు మనకు తెలియనిది మనకు ఎల్లప్పుడూ తెలియదు. ఈ రంగంలో నేర్చుకోవడం అనేది ఒకసారి జరిగి ముగిసేది కాకుండా కొనసాగుతున్న ప్రయాణం. కేస్ ఇన్ పాయింట్: యూజర్లు 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 సెలెక్టర్లను ఉపయోగించవచ్చు, అవి అన్నింటినీ కనుగొనలేవు. ఇంకా, DOMలో దాని ప్రస్తుత స్థానం ఆధారంగా మూలకాన్ని కనుగొనడానికి CSS ఎంపిక సాధనాలు ఉపయోగించబడవు. XPath చెయ్యవచ్చు. ఇప్పుడు, దీన్ని చదివే మీలో కొందరికి XPath తెలిసి ఉండవచ్చు, మరికొందరికి తెలియకపోవచ్చు. XPath అనేది సాంకేతిక పరిజ్ఞానం యొక్క చాలా పెద్ద ప్రాంతం, మరియు నేను నిజంగా అన్ని ప్రాథమిక అంశాలను బోధించలేను మరియు దానితో చేయవలసిన చక్కని విషయాలను కూడా ఇలాంటి ఒకే కథనంలో మీకు చూపించలేను. నేను నిజానికి ఆ కథనాన్ని వ్రాయడానికి ప్రయత్నించాను, కానీ సగటు స్మాషింగ్ మ్యాగజైన్ ప్రచురణ 5,000 పదాలకు మించి ఉండదు. నేను ఇప్పటికే కంటే ఎక్కువ వద్ద ఉన్నాను2,000 పదాలు బేసిక్స్లో సగం మాత్రమే. కాబట్టి, నేను XPathతో కూల్ స్టఫ్ చేయడం ప్రారంభించబోతున్నాను మరియు ఈ విషయం మీకు ఆసక్తికరంగా అనిపిస్తే మీరు బేసిక్స్ కోసం ఉపయోగించగల కొన్ని లింక్లను మీకు అందించబోతున్నాను. XPath & CSS కలపడం ఎలిమెంట్లను ప్రశ్నించేటప్పుడు CSS సెలెక్టర్లు చేయలేని చాలా పనులను XPath చేయగలదు. కానీ CSS సెలెక్టర్లు XPath చేయలేని కొన్ని పనులను కూడా చేయగలరు, అవి క్లాస్ పేరుతో ఎలిమెంట్లను ప్రశ్నించవచ్చు.
CSS XPath .myClass /*[ఉంది(@క్లాస్, "మైక్లాస్")]
ఈ ఉదాహరణలో, CSS .myClass తరగతి పేరును కలిగి ఉన్న అంశాలను ప్రశ్నిస్తుంది. ఇంతలో, XPath ఉదాహరణ స్ట్రింగ్ “myClass”తో అట్రిబ్యూట్ క్లాస్ని కలిగి ఉన్న ఎలిమెంట్లను ప్రశ్నిస్తుంది. మరో మాటలో చెప్పాలంటే, ఇది .myClass క్లాస్నేమ్తో కూడిన ఎలిమెంట్లతో సహా ఏదైనా లక్షణంలో myClassతో కూడిన ఎలిమెంట్లను ఎంచుకుంటుంది — అలాగే .myClass2 వంటి స్ట్రింగ్లో “myClass” ఉన్న ఎలిమెంట్లను కూడా ఎంచుకుంటుంది. XPath ఆ కోణంలో విస్తృతమైనది. కాబట్టి, లేదు. మేము CSSని తొలగించి, XPath ద్వారా అన్ని ఎలిమెంట్లను ఎంచుకోవడం ప్రారంభించాలని నేను సూచించడం లేదు. అది విషయం కాదు. XPath అనేది బ్రౌజర్ స్టాక్లో పాత సాంకేతికత అయినప్పటికీ, మొదటి చూపులో స్పష్టంగా కనిపించకపోయినప్పటికీ, CSS చేయలేని మరియు ఇప్పటికీ చాలా ఉపయోగకరంగా ఉండే పనులను XPath చేయగలదు. మనం చేయగలిగినందున మాత్రమే కాకుండా, ఈ ప్రక్రియలో XPath గురించి కొంత నేర్చుకుంటాము, మీ స్టాక్లో దీన్ని మరొక సాధనంగా మారుస్తాము కాబట్టి - మీకు తెలియనిది ఇంతకాలం ఉంది! సమస్య ఏమిటంటే JavaScript యొక్క document.evaluate పద్ధతి మరియు JavaScript కోసం CSS APIలతో మేము ఉపయోగించే వివిధ ప్రశ్న ఎంపిక పద్ధతులు అనుకూలంగా లేవు. మమ్మల్ని ప్రారంభించడానికి నేను అనుకూలమైన క్వెరీయింగ్ APIని తయారు చేసాను, అయితే ఒప్పుకున్నప్పటికీ, మేము ఇక్కడ చేస్తున్న దాని నుండి నిష్క్రమించినందున నేను దాని గురించి పెద్దగా ఆలోచించలేదు. పునర్వినియోగ క్వెరీ కన్స్ట్రక్టర్ యొక్క చాలా సులభమైన పని ఉదాహరణ ఇక్కడ ఉంది: బ్రయాన్ రాస్ముస్సేన్ రాసిన పెన్ క్వెరీ ఎక్స్పాత్ [ఫోర్క్డ్] చూడండి. నేను డాక్యుమెంట్ ఆబ్జెక్ట్పై రెండు పద్ధతులను జోడించాను: queryCSSSelectors (ఇది తప్పనిసరిగా querySelectorAll) మరియు queryXPaths. ఈ రెండూ ప్రశ్న ఫలితాల ఆబ్జెక్ట్ను అందిస్తాయి:
{ ప్రశ్న రకం: నోడ్స్ | స్ట్రింగ్ | సంఖ్య | బూలియన్, ఫలితాలు: ఏదైనా[] // html ఎలిమెంట్స్, xml ఎలిమెంట్స్, స్ట్రింగ్స్, నంబర్స్, బూలియన్స్, queryCSSSసెలెక్టర్లు: (ప్రశ్న: స్ట్రింగ్, సవరణ: బూలియన్) => ప్రశ్న ఫలితాలు, queryXpaths: (ప్రశ్న: స్ట్రింగ్, సవరణ: బూలియన్) => ప్రశ్న ఫలితాలు }
queryCSSSelectors మరియు queryXpaths ఫంక్షన్లు ఫలితాల శ్రేణిలోని మూలకాలపై మీరు ఇచ్చిన ప్రశ్నను అమలు చేస్తాయి, ఫలితాల శ్రేణి టైప్ నోడ్లలో ఉన్నంత వరకు. లేకపోతే, ఇది ఖాళీ శ్రేణి మరియు నోడ్ల రకంతో ప్రశ్న ఫలితాన్ని అందిస్తుంది. సవరణ ప్రాపర్టీని ఒప్పుకు సెట్ చేస్తే, ఫంక్షన్లు వాటి స్వంత ప్రశ్న ఫలితాలను మారుస్తాయి. ఎట్టి పరిస్థితుల్లోనూ దీనిని ఉత్పత్తి వాతావరణంలో ఉపయోగించకూడదు. రెండు క్వెరీ APIలను కలిపి ఉపయోగించడం వల్ల కలిగే వివిధ ప్రభావాలను ప్రదర్శించడానికి నేను ఈ విధంగా చేస్తున్నాను. ఉదాహరణ ప్రశ్నలు నేను వివిధ XPath ప్రశ్నలకు కొన్ని ఉదాహరణలను చూపాలనుకుంటున్నాను, అవి చేయగలిగిన కొన్ని శక్తివంతమైన పనులను మరియు వాటిని ఇతర విధానాల స్థానంలో ఎలా ఉపయోగించవచ్చో తెలియజేస్తాయి. మొదటి ఉదాహరణ //li/text(). ఇది అన్ని li మూలకాలను ప్రశ్నిస్తుంది మరియు వాటి టెక్స్ట్ నోడ్లను అందిస్తుంది. కాబట్టి, మేము ఈ క్రింది HTMLని ప్రశ్నించినట్లయితే:
- ఒకటి
- రెండు
- మూడు
…ఇదే తిరిగి ఇవ్వబడింది:
{"queryType":"xpathEvaluate","ఫలితాలు":["ఒకటి","రెండు","మూడు"],"ఫలితం రకం":"string"}
మరో మాటలో చెప్పాలంటే, మేము ఈ క్రింది శ్రేణిని పొందుతాము: ["ఒకటి", "రెండు", "మూడు"]. సాధారణంగా, మీరు li ఎలిమెంట్స్ని పొందడానికి ప్రశ్నిస్తారు, ఆ ప్రశ్న యొక్క ఫలితాన్ని శ్రేణిగా మార్చండి, శ్రేణిని మ్యాప్ చేయండి మరియు ప్రతి మూలకం యొక్క టెక్స్ట్ నోడ్ను తిరిగి ఇవ్వండి. కానీ మనం XPathతో మరింత సంక్షిప్తంగా చేయవచ్చు: document.queryXPaths("//li/text()").ఫలితాలు.
టెక్స్ట్ నోడ్ని పొందే మార్గం టెక్స్ట్()ని ఉపయోగించడం అని గమనించండి, ఇది ఫంక్షన్ సిగ్నేచర్ లాగా కనిపిస్తుంది — మరియు అది. ఇది మూలకం యొక్క టెక్స్ట్ నోడ్ను అందిస్తుంది. మా ఉదాహరణలో, మార్కప్లో మూడు లి ఎలిమెంట్స్ ఉన్నాయి, ప్రతి ఒక్కటి టెక్స్ట్ ("ఒకటి", "రెండు" మరియు "మూడు") కలిగి ఉంటుంది.
టెక్స్ట్() ప్రశ్నకు మరో ఉదాహరణ చూద్దాం. ఇది మా మార్కప్ అని భావించండి:
href అట్రిబ్యూట్ విలువను అందించే ప్రశ్నను వ్రాద్దాం: document.queryXPaths("//a[text() = 'సైన్ ఇన్']/@href").ఫలితాలు.
ఇది గత ఉదాహరణ వలె ప్రస్తుత డాక్యుమెంట్లోని XPath ప్రశ్న, కానీ ఈసారి మేము "సైన్ ఇన్" అనే వచనాన్ని కలిగి ఉన్న లింక్ (ఒక మూలకం) యొక్క href లక్షణాన్ని తిరిగి ఇస్తాము. అసలు తిరిగొచ్చిందిఫలితం ["/login.html"]. XPath ఫంక్షన్ల అవలోకనం అనేక XPath ఫంక్షన్లు ఉన్నాయి మరియు వాటి గురించి మీకు బహుశా తెలియకపోవచ్చు. కింది వాటితో సహా తెలుసుకోవలసినవి చాలా ఉన్నాయి, నేను అనుకుంటున్నాను:
ఒక టెక్స్ట్ ఒక నిర్దిష్ట ఇతర వచన ఉదాహరణతో ప్రారంభమైతే, href లక్షణం http:తో ప్రారంభమైతే, starts-with(@href, 'http:') నిజాన్ని అందిస్తుంది. కలిగి ఉంటే ఒక టెక్స్ట్ నిర్దిష్ట ఇతర వచన ఉదాహరణను కలిగి ఉంటే, కలిగి(టెక్స్ట్(), "స్మాషింగ్ మ్యాగజైన్") టెక్స్ట్ నోడ్లో ఎక్కడైనా “స్మాషింగ్ మ్యాగజైన్” అనే పదాలు ఉంటే అది నిజం అవుతుంది. countReturns ఒక ప్రశ్నకు ఎన్ని మ్యాచ్లు ఉన్నాయో లెక్కిస్తుంది. ఉదాహరణకు, కౌంట్(//*[starts-with(@href, 'http:']) అనేది సందర్భం నోడ్లోని ఎన్ని లింక్లు http:తో ప్రారంభమయ్యే టెక్స్ట్ను కలిగి ఉన్న href లక్షణంతో మూలకాలను కలిగి ఉన్నాయనే గణనను అందిస్తుంది. సబ్స్ట్రింగ్ మీరు స్ట్రింగ్ను ఆర్గ్యుమెంట్గా పాస్ చేస్తే తప్ప, జావాస్క్రిప్ట్ సబ్స్ట్రింగ్ లాగా పనిచేస్తుంది. ఉదాహరణకు, సబ్స్ట్రింగ్("నా టెక్స్ట్", 2, 4) "y t"ని అందిస్తుంది. substring-before మరొక స్ట్రింగ్ ముందు స్ట్రింగ్ యొక్క భాగాన్ని తిరిగి ఇస్తుంది. ఉదాహరణకు, substing-before("my text", " ") "my"ని అందిస్తుంది. అదేవిధంగా, substring-before("hi","bye") ఖాళీ స్ట్రింగ్ని అందిస్తుంది. substring-after మరొక స్ట్రింగ్ తర్వాత స్ట్రింగ్ యొక్క భాగాన్ని తిరిగి ఇస్తుంది. ఉదాహరణకు, substing-after("my text", " ") "text"ని అందిస్తుంది. అదేవిధంగా, సబ్స్ట్రింగ్-ఆఫ్టర్("హాయ్","బై") ఖాళీ స్ట్రింగ్ను అందిస్తుంది. normalize-space వైట్స్పేస్ని లీడింగ్ మరియు ట్రైలింగ్ వైట్స్పేస్ని తీసివేయడం మరియు వైట్స్పేస్ అక్షరాల సీక్వెన్స్లను ఒకే స్పేస్ ద్వారా సాధారణీకరించడం ద్వారా ఆర్గ్యుమెంట్ స్ట్రింగ్ను తిరిగి అందిస్తుంది. notReturns ఒక బూలియన్ నిజమైన వాదన తప్పు అయితే, లేకపోతే తప్పు. trueరిటర్న్స్ బూలియన్ ట్రూ. false తిరిగి బూలియన్ తప్పు. concat JavaScript concat మాదిరిగానే ఉంటుంది, మీరు దీన్ని స్ట్రింగ్లో పద్ధతిగా అమలు చేయరు తప్ప. బదులుగా, మీరు కలపాలనుకుంటున్న అన్ని స్ట్రింగ్లను ఉంచారు. string-lengthఇది JavaScript స్ట్రింగ్-పొడవు వలె ఉండదు, కానీ అది ఆర్గ్యుమెంట్గా ఇవ్వబడిన స్ట్రింగ్ యొక్క పొడవును అందిస్తుంది. అనువాదం ఇది స్ట్రింగ్ను తీసుకుంటుంది మరియు రెండవ ఆర్గ్యుమెంట్ను మూడవ ఆర్గ్యుమెంట్గా మారుస్తుంది. ఉదాహరణకు, అనువాదం("abcdef", "abc", "XYZ") XYZdef అవుట్పుట్లు.
ఈ ప్రత్యేక XPath ఫంక్షన్లను పక్కన పెడితే, వాటి జావాస్క్రిప్ట్ కౌంటర్పార్ట్ల మాదిరిగానే పని చేసే అనేక ఇతర ఫంక్షన్లు ఉన్నాయి - లేదా ప్రాథమికంగా ఏదైనా ప్రోగ్రామింగ్ భాషలో ప్రతిరూపాలు - మీరు బహుశా ఫ్లోర్, సీలింగ్, రౌండ్, సమ్ మొదలైనవాటిని కూడా ఉపయోగకరంగా చూడవచ్చు. కింది డెమో ఈ ప్రతి ఫంక్షన్ను వివరిస్తుంది: బ్రయాన్ రాస్ముస్సేన్ రాసిన పెన్ XPath సంఖ్యాపరమైన విధులను [ఫోర్క్డ్] చూడండి. చాలా స్ట్రింగ్ మానిప్యులేషన్ ఫంక్షన్ల మాదిరిగానే, అనేక సంఖ్యాపరమైనవి ఒకే ఇన్పుట్ని తీసుకుంటాయని గమనించండి. ఇది, వాస్తవానికి, గత XPath ఉదాహరణలో వలె, వారు ప్రశ్నించడం కోసం ఉపయోగించబడాలి: //li[floor(text()) > 250]/@val
మీరు వాటిని ఉపయోగిస్తే, చాలా ఉదాహరణలు చేసినట్లుగా, మీరు దానిని మార్గానికి సరిపోయే మొదటి నోడ్లో అమలు చేయడం ముగించవచ్చు. జావాస్క్రిప్ట్కు ఇప్పటికే దాని స్వంత రకం మార్పిడి సమస్యలు ఉన్నందున మీరు బహుశా నివారించాల్సిన కొన్ని రకాల మార్పిడి ఫంక్షన్లు కూడా ఉన్నాయి. కానీ మీరు స్ట్రింగ్ను వేరే నంబర్తో చెక్ చేయడానికి దాన్ని నంబర్గా మార్చాలనుకున్న సందర్భాలు ఉండవచ్చు. బూలియన్, నంబర్, స్ట్రింగ్ మరియు నోడ్ ఏదైనా రకాన్ని సెట్ చేసే విధులు. ఇవి ముఖ్యమైన XPath డేటాటైప్లు. మరియు మీరు ఊహించినట్లుగా, ఈ విధులు చాలా వరకు DOM నోడ్లు కాని డేటాటైప్లలో ఉపయోగించబడతాయి. ఉదాహరణకు, సబ్స్ట్రింగ్-ఆఫ్టర్ అనేది మనం ఇప్పటికే కవర్ చేసిన విధంగా స్ట్రింగ్ను తీసుకుంటుంది, కానీ అది href లక్షణం నుండి వచ్చిన స్ట్రింగ్ కావచ్చు. ఇది కేవలం స్ట్రింగ్ కూడా కావచ్చు:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
సహజంగానే, ఈ ఉదాహరణ మనకు ఫలితాల శ్రేణిని ["ప్రపంచం"]గా తిరిగి ఇస్తుంది. దీన్ని చర్యలో చూపించడానికి, నేను DOM నోడ్లు కాని వాటికి వ్యతిరేకంగా ఫంక్షన్లను ఉపయోగించి డెమో పేజీని తయారు చేసాను: బ్రయాన్ రాస్ముస్సేన్ రాసిన పెన్ క్వెరీ ఎక్స్పాత్ [ఫోర్క్డ్] చూడండి. మీరు అనువాద ఫంక్షన్లోని ఆశ్చర్యకరమైన అంశాన్ని గమనించాలి, అంటే మీకు రెండవ ఆర్గ్యుమెంట్లో అక్షరం ఉంటే (అంటే, మీరు అనువదించాలనుకుంటున్న అక్షరాల జాబితా) మరియు అనువదించడానికి సరిపోలే అక్షరం లేకపోతే, ఆ అక్షరం అవుట్పుట్ నుండి తీసివేయబడుతుంది. అందువలన, ఇది:
అనువదించు ('హలో, నా పేరు ఇనిగో మోంటోయా, మీరు నా తండ్రిని చంపారు, చనిపోవడానికి సిద్ధం','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…స్పేస్లతో సహా స్ట్రింగ్లోని ఫలితాలు: [" * * ** "]
దీని అర్థం “a” అక్షరం ఒక నక్షత్రం (*)కి అనువదించబడుతోంది, అయితే లక్ష్య స్ట్రింగ్ ఇచ్చిన అనువాదం లేని ప్రతి ఇతర అక్షరం పూర్తిగా తీసివేయబడుతుంది. మనకి మిగిలింది తెల్లని ఖాళీ మాత్రమేఅనువదించబడిన "a" అక్షరాల మధ్య. మళ్ళీ, ఈ ప్రశ్న:
అనువదించండి ('హలో, నా పేరు ఇనిగో మోంటోయా, మీరు నా తండ్రిని చంపారు, చనిపోవడానికి సిద్ధం','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','***********************************************************************************************************************************
… సమస్య లేదు మరియు ఫలితం ఇలా కనిపిస్తుంది:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** **"
XPath ట్రాన్స్లేట్ ఫంక్షన్ని సరిగ్గా చేయడానికి జావాస్క్రిప్ట్లో సులభమైన మార్గం లేదని మీకు అనిపించవచ్చు, అయినప్పటికీ చాలా సందర్భాలలో, సాధారణ వ్యక్తీకరణలతో అన్నింటినీ భర్తీ చేయవచ్చు. నేను ప్రదర్శించిన అదే విధానాన్ని మీరు ఉపయోగించవచ్చు, కానీ మీకు కావలసినదంతా తీగలను అనువదించడమే ఉత్తమం. జావాస్క్రిప్ట్ సంస్కరణను అందించడానికి క్రింది డెమో XPath యొక్క అనువాద ఫంక్షన్ను చుట్టుముడుతుంది: బ్రయాన్ రాస్ముస్సేన్ రాసిన పెన్ ట్రాన్స్లేట్ ఫంక్షన్ [ఫోర్క్డ్] చూడండి. మీరు ఇలాంటి వాటిని ఎక్కడ ఉపయోగించవచ్చు? మూడు స్థానాల ఆఫ్సెట్తో సీజర్ సైఫర్ ఎన్క్రిప్షన్ను పరిగణించండి (ఉదా., 48 B.C. నుండి టాప్-ఆఫ్-ది-లైన్ ఎన్క్రిప్షన్):
అనువదించండి ("సీజర్ రూబికాన్ను దాటడానికి ప్లాన్ చేస్తున్నాడు!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
ఇన్పుట్ టెక్స్ట్ “సీజర్ రూబికాన్ను దాటడానికి ప్లాన్ చేస్తున్నాడు!” ఫలితాలు “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” విభిన్న అవకాశాలకు మరొక శీఘ్ర ఉదాహరణను ఇవ్వడానికి, నేను స్ట్రింగ్ ఇన్పుట్ని తీసుకునే మెటల్ ఫంక్షన్ను తయారు చేసాను మరియు ఉమ్లాట్లను తీసుకునే అన్ని అక్షరాలతో సహా టెక్స్ట్ను తిరిగి ఇవ్వడానికి ట్రాన్స్లేట్ ఫంక్షన్ని ఉపయోగిస్తాను. బ్రయాన్ రాస్ముస్సేన్ రాసిన పెన్ మెటల్ ఫంక్షన్ [ఫోర్క్డ్] చూడండి.
కాన్స్ట్ మెటల్ = (str) => { తిరిగి అనువాదం(str, "AOUaou","ÄÖÜäöü"); }
మరియు, “మోట్లీ క్రూ రూల్స్, రాక్ ఆన్ డ్యూడ్స్!” అనే టెక్స్ట్ ఇచ్చినట్లయితే, “మోట్లీ క్రూ రూల్స్, రాక్ ఓన్ డ్యూడ్స్!” అని తిరిగి వస్తుంది. సహజంగానే, ఈ ఫంక్షన్ యొక్క అన్ని రకాల పేరడీ ఉపయోగాలు ఉండవచ్చు. అది మీరే అయితే, ఈ TVTropes కథనం మీకు పుష్కలంగా స్ఫూర్తిని అందించాలి. XPathతో CSSని ఉపయోగించడం XPathతో పాటు CSS సెలెక్టర్లను ఉపయోగించడం కోసం మా ప్రధాన కారణాన్ని గుర్తుంచుకోండి: CSS క్లాస్ అంటే ఏమిటో చాలా చక్కగా అర్థం చేసుకుంటుంది, అయితే XPathతో మీరు చేయగలిగినది క్లాస్ అట్రిబ్యూట్ స్ట్రింగ్ పోలికలు. ఇది చాలా సందర్భాలలో పని చేస్తుంది. కానీ మీరు ఎప్పుడైనా .primaryLinks మరియు .primaryLinks2 పేరుతో తరగతులను సృష్టించి, .primaryLinks తరగతిని పొందడానికి XPathని ఉపయోగిస్తుంటే, మీరు ఎప్పుడైనా సమస్యలను ఎదుర్కొనే అవకాశం ఉంది. అలాంటి వెర్రి ఏమీ లేనంత కాలం, మీరు బహుశా XPathని ఉపయోగించవచ్చు. కానీ ప్రజలు అలాంటి వెర్రి పనులు చేసే ప్రదేశాలలో నేను పనిచేశానని నివేదించడానికి నేను విచారంగా ఉన్నాను. CSS మరియు XPathలను కలిపి ఉపయోగించే మరో డెమో ఇక్కడ ఉంది. డాక్యుమెంట్ నోడ్ కాని కాంటెక్స్ట్ నోడ్లో XPathని అమలు చేయడానికి మేము కోడ్ని ఉపయోగించినప్పుడు ఏమి జరుగుతుందో ఇది చూపుతుంది. Bryan Rasmussen రాసిన పెన్ css మరియు xpath కలిసి [ఫోర్క్డ్] చూడండి. CSS ప్రశ్న .relatedarticles a, ఇది .relatedarticles తరగతిని కేటాయించిన divలో రెండు a ఎలిమెంట్లను పొందుతుంది. ఆ తర్వాత మూడు “చెడు” ప్రశ్నలు, అంటే, ఈ మూలకాలను సందర్భ నోడ్గా అమలు చేస్తున్నప్పుడు మనం ఏమి చేయాలనుకుంటున్నామో అవి చేయని ప్రశ్నలు. వారు మీరు ఊహించిన దానికంటే భిన్నంగా ఎందుకు ప్రవర్తిస్తున్నారో నేను వివరించగలను. ప్రశ్నలోని మూడు చెడు ప్రశ్నలు:
//text(): పత్రంలోని మొత్తం వచనాన్ని అందిస్తుంది. //a/text(): డాక్యుమెంట్లోని లింక్ల లోపల ఉన్న మొత్తం వచనాన్ని అందిస్తుంది. ./a/text(): ఫలితాలు ఏవీ అందించబడవు.
ఈ ఫలితాలకు కారణం ఏమిటంటే, మీ సందర్భం CSS ప్రశ్న నుండి అందించబడిన మూలకం అయితే, // మొత్తం డాక్యుమెంట్కు విరుద్ధంగా ఉంటుంది. ఇది XPath యొక్క బలం; CSS నోడ్ నుండి పూర్వీకుల వద్దకు మరియు ఆ పూర్వీకుల తోబుట్టువు వద్దకు వెళ్లదు మరియు ఆ తోబుట్టువు యొక్క వారసుల వద్దకు వెళ్లదు. కానీ XPath చేయవచ్చు. ఇంతలో, ./ ప్రస్తుత నోడ్లోని పిల్లలను ప్రశ్నిస్తుంది, ఇక్కడ డాట్ (.) ప్రస్తుత నోడ్ను సూచిస్తుంది మరియు ఫార్వర్డ్ స్లాష్ (/) కొన్ని చైల్డ్ నోడ్కి వెళ్లడాన్ని సూచిస్తుంది - ఇది ఒక లక్షణం, మూలకం లేదా టెక్స్ట్ అనేది మార్గం యొక్క తదుపరి భాగం ద్వారా నిర్ణయించబడుతుంది. కానీ CSS ప్రశ్న ద్వారా ఎంపిక చేయబడిన మూలకం ఏదీ లేదు, ఆ ప్రశ్న కూడా ఏమీ ఇవ్వదు. ఆ చివరి డెమోలో మూడు మంచి ప్రశ్నలు ఉన్నాయి:
.//టెక్స్ట్(), ./టెక్స్ట్(), normalize-space(./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 ఫంక్షన్లు జావాస్క్రిప్ట్లోని ఫంక్షన్ల మాదిరిగానే గూడులో ఉంటాయి. కాబట్టి, స్మాషింగ్ మ్యాగజైన్ URL నిర్మాణం మనకు తెలిస్తే, మేము ఈ క్రింది వాటిని చేయవచ్చు (టెంప్లేట్ అక్షరాలను ఉపయోగించడం సిఫార్సు చేయబడింది): `అనువదించు( సబ్స్ట్రింగ్ ( substring-after(./@href, ‘www.smashingmagazine.com/') ,9), '/','')`
ఇది ఏమి చేస్తుందో వివరించే కామెంట్లు అవసరం కాబట్టి ఇది కొంచెం క్లిష్టంగా ఉంది: www.smashingmagazine.com/ తర్వాత href లక్షణం నుండి మొత్తం URLని తీసుకోండి, మొదటి తొమ్మిది అక్షరాలను తీసివేసి, తర్వాత ఫార్వర్డ్ స్లాష్ (/) అక్షరాన్ని ఏమీ లేకుండా అనువదించండి, తద్వారా ముగిసే ఫార్వర్డ్ స్లాష్ను వదిలించుకోండి. ఫలిత శ్రేణి:
["ఫీచర్-టెస్టింగ్-సెలీనియం-వెబ్డ్రైవర్","ఆటోమేటెడ్-టెస్ట్-ఫలితాలు-ఇంప్రూవ్-యాక్సెసిబిలిటీ"]
మరిన్ని XPath వినియోగ కేసులు XPath నిజంగా పరీక్షలో ప్రకాశిస్తుంది. కారణాన్ని చూడటం కష్టం కాదు, ఎందుకంటే DOMలోని ప్రతి మూలకాన్ని DOMలోని ఏ స్థానం నుండి అయినా పొందడానికి XPath ఉపయోగించబడుతుంది, అయితే CSS చేయలేము. మీరు అనేక ఆధునిక బిల్డ్ సిస్టమ్లలో స్థిరంగా మిగిలి ఉన్న CSS తరగతులను లెక్కించలేరు, కానీ XPathతో, మారుతున్న DOM నిర్మాణంతో సంబంధం లేకుండా మూలకం యొక్క టెక్స్ట్ కంటెంట్ ఏమిటో మేము మరింత బలమైన సరిపోలికలను చేయగలము. మీరు స్థితిస్థాపకంగా XPath పరీక్షలను చేయడానికి అనుమతించే సాంకేతికతలపై పరిశోధన ఉంది. ఏదో పేరు మార్చబడినందున లేదా తీసివేయబడినందున CSS సెలెక్టర్ ఇకపై పని చేయనందున పరీక్షలు విఫలమై విఫలమవడం కంటే అధ్వాన్నంగా ఏమీ లేదు. XPath బహుళ లొకేటర్ వెలికితీతలో కూడా చాలా గొప్పది. ఒక మూలకాన్ని సరిపోల్చడానికి XPath ప్రశ్నలను ఉపయోగించడానికి ఒకటి కంటే ఎక్కువ మార్గాలు ఉన్నాయి. CSS విషయంలో కూడా ఇదే వర్తిస్తుంది. కానీ XPath ప్రశ్నలు మరింత లక్ష్యమైన మార్గంలో విషయాలు లోకి డ్రిల్ చేయగలవు, అది వాపసు పొందే వాటిని పరిమితం చేస్తుంది, అనేక సరిపోలికలు ఉన్న నిర్దిష్ట సరిపోలికను కనుగొనడానికి మిమ్మల్ని అనుమతిస్తుంది. ఉదాహరణకు, మేము ఒక నిర్దిష్ట h2 మూలకాన్ని తిరిగి అందించడానికి XPathని ఉపయోగించవచ్చు, అది వెంటనే తోబుట్టువుల divని అనుసరిస్తుంది, అది డేటా-testID="నాయకుడు" లక్షణంతో కూడిన చైల్డ్ ఇమేజ్ ఎలిమెంట్ను కలిగి ఉంటుంది:
ఈ శీర్షికను పొందవద్దు
ఈ శీర్షికను కూడా పొందవద్దు
లీడర్ ఇమేజ్ కోసం హెడర్
ఇది ప్రశ్న: document.queryXPaths(` //div[ కింది-తోబుట్టువులు::div[1] /img[@data-testID='నాయకుడు'] ] /h2/ వచనం() `);
అవన్నీ ఎలా కలిసివస్తాయో చూడటానికి డెమోలో చూద్దాం: బ్రయాన్ రాస్ముస్సేన్ రాసిన పెన్ కాంప్లెక్స్ H2 ప్రశ్న [ఫోర్క్డ్] చూడండి. కాబట్టి, అవును. XPathని ఉపయోగించి పరీక్షలో ఏదైనా మూలకానికి చాలా మార్గాలు ఉన్నాయి. XSLT 1.0 తగ్గింపు Chrome బృందం బ్రౌజర్ నుండి XSLT 1.0 మద్దతును తీసివేయాలని యోచిస్తోందని నేను ముందుగానే ప్రస్తావించాను. XSLT 1.0 డాక్యుమెంట్ ట్రాన్స్ఫర్మేషన్ కోసం XML-ఫోకస్డ్ ప్రోగ్రామింగ్ను ఉపయోగిస్తుంది, ఇది చాలా బ్రౌజర్లలో కనిపించే XPath 1.0పై ఆధారపడుతుంది. అది జరిగినప్పుడు, మేము XPath యొక్క కీలక భాగాన్ని కోల్పోతాము. కానీ XPath నిజంగా పరీక్షలు రాయడానికి చాలా గొప్పది అనే వాస్తవాన్ని పరిగణనలోకి తీసుకుంటే, XPath మొత్తం ఎప్పుడైనా త్వరలో అదృశ్యమయ్యే అవకాశం లేదు. అది తీసివేయబడినప్పుడు వ్యక్తులు ఒక ఫీచర్పై ఆసక్తి చూపడాన్ని నేను గమనించాను. XSLT 1.0 నిలిపివేయబడిన విషయంలో ఇది ఖచ్చితంగా నిజం. హ్యాకర్ న్యూస్లో డిప్రికేషన్కు వ్యతిరేకంగా వాదనలతో నిండిన మొత్తం చర్చ జరుగుతోంది. XSLTతో బ్లాగింగ్ ఫ్రేమ్వర్క్ను రూపొందించడానికి పోస్ట్ కూడా ఒక గొప్ప ఉదాహరణ. మీరుమీ కోసం చర్చను చదవగలరు, అయితే ఆ విధమైన కేసులను నిర్వహించడానికి XLST కోసం జావాస్క్రిప్ట్ని షిమ్గా ఎలా ఉపయోగించవచ్చో అది పొందుతుంది. జావాస్క్రిప్ట్ యొక్క Saxon XSLT, XQUERY మరియు XPath ఇంజిన్లకు పోర్ట్ అయిన SaxonJSని బ్రౌజర్లు ఉపయోగించాలనే సూచనలను కూడా నేను చూశాను. ఇది ఒక ఆసక్తికరమైన ఆలోచన, ప్రత్యేకించి Saxon-JS ఈ స్పెసిఫికేషన్ల యొక్క ప్రస్తుత సంస్కరణను అమలు చేస్తుంది, అయితే XPath లేదా XSLT యొక్క ఏ వెర్షన్ను 1.0కి మించి అమలు చేసే బ్రౌజర్ లేదు మరియు XQueryని అమలు చేసేది ఏదీ లేదు. నేను సాక్సోనికాలోని నార్మ్ టోవీ-వాల్ష్ను సంప్రదించాను, ఇది SaxonJS మరియు సాక్సన్ ఇంజిన్ యొక్క ఇతర వెర్షన్ల వెనుక ఉన్న కంపెనీ. అతను ఇలా అన్నాడు: "బ్రౌజర్లో ఆధునిక XML టెక్నాలజీలను ఏకీకృతం చేయడానికి SaxonJSని ప్రారంభ బిందువుగా తీసుకోవడానికి ఏదైనా బ్రౌజర్ విక్రేత ఆసక్తి కలిగి ఉంటే, మేము వారితో చర్చించడానికి థ్రిల్డ్ అవుతాము." - నార్మ్ టోవీ-వాల్ష్
కానీ కూడా జోడించబడింది: "ఎవరైనా SaxonJSని ప్రస్తుత రూపంలో తీసుకొని బ్రౌజర్ బిల్డ్లోకి మార్చడం ఆదర్శవంతమైన విధానం అని ఎవరైనా అనుకుంటే నేను చాలా ఆశ్చర్యపోతాను. ఒక బ్రౌజర్ విక్రేత, వారు బ్రౌజర్ను రూపొందించడం వల్ల, మనం 'బయటి నుండి' కంటే చాలా లోతైన స్థాయిలో ఏకీకరణను చేరుకోవచ్చు." - నార్మ్ టోవే-వాల్ష్
XSLT తరుగుదల ప్రకటనకు ఒక వారం ముందు Tovey-Walsh యొక్క వ్యాఖ్యలు రావడం గమనించదగ్గ విషయం. తీర్మానం నేను ఇంకా వెళ్ళగలను. కానీ ఇది XPath యొక్క శక్తిని ప్రదర్శించిందని మరియు గొప్ప విషయాలను సాధించడానికి దీన్ని ఎలా ఉపయోగించాలో ప్రదర్శించే అనేక ఉదాహరణలను మీకు అందించిందని నేను ఆశిస్తున్నాను. బ్రౌజర్ స్టాక్లోని పాత సాంకేతికతకు ఇది సరైన ఉదాహరణ, ఇది ఇప్పటికీ పుష్కలంగా యుటిలిటీని కలిగి ఉంది, ఇది ఉనికిలో ఉందని మీకు ఎప్పటికీ తెలియకపోయినా లేదా దాని కోసం ఎన్నడూ ఆలోచించకపోయినా. తదుపరి పఠనం
"సహజ భాషతో స్వయంచాలక వెబ్ పరీక్షల స్థితిస్థాపకతను మెరుగుపరుస్తుంది" (ACM డిజిటల్ లైబ్రరీ) మరౌన్ అయ్లీ, యూసఫ్ బకౌనీ, నాడర్ జల్లౌల్ మరియు రిమా కిలానీచే ఈ కథనం స్థితిస్థాపక పరీక్షలను వ్రాయడానికి అనేక XPath ఉదాహరణలను అందిస్తుంది. XPath (MDN) XPath ఎలా పని చేస్తుందో వివరించే సాంకేతిక వివరణ మీకు కావాలంటే ప్రారంభించడానికి ఇది ఒక అద్భుతమైన ప్రదేశం. XPath ట్యుటోరియల్ (ZVON)ఈ ట్యుటోరియల్ నా స్వంత అభ్యాసంలో చాలా సహాయకారిగా ఉందని నేను కనుగొన్నాను, అనేక ఉదాహరణలు మరియు స్పష్టమైన వివరణలకు ధన్యవాదాలు. XPatherఈ ఇంటరాక్టివ్ సాధనం కోడ్తో నేరుగా పని చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.
