زه د اوږدې مودې لپاره د مخ پر ودې پرمختګ کې وم چې د کلونو په اوږدو کې یو رجحان وګورئ: ځوان پراختیا کونکي د برنامه کولو نوي تمثیل سره کار کوي پرته لدې چې د دې تاریخي شرایطو پوه شي. دا، البته، په بشپړ ډول د پوهیدو وړ دی چې یو څه نه پوهیږي. ویب د مختلفو مهارتونو او ځانګړتیاوو سره یو خورا لوی ځای دی، او موږ تل په هغه څه نه پوهیږو چې موږ نه پوهیږو. پدې برخه کې زده کړه یو روان سفر دی نه د هغه څه په پرتله چې یو ځل پیښیږي او پای ته رسیږي. په ټکي کې قضیه: زما په ټیم کې یو چا وپوښتل چې ایا دا ممکنه وه چې ووایاست که کاروونکي په UI کې د ځانګړي ټب څخه لیرې وي. ما د جاوا سکریپټ د انلوډ کولو پیښې دمخه په ګوته کړه. مګر هغه څوک چې دمخه یې له دې سره مبارزه کړې پوهیږي دا ممکنه ده ځکه چې دوی په نورو سایټونو کې د غیر خوندي شوي ډیټا په اړه خبرتیاو سره مخ شوي ، د کوم لپاره چې دمخه انلوډ کول د کارولو معمول قضیه ده. ما د ښه اندازې لپاره زما همکار ته د پاڼې پټول او لید بدلولو پیښې هم په ګوته کړې. زه څنګه په دې پوه شوم؟ ځکه چې دا په بله پروژه کې راغلی، نه دا چې ما د دې په اړه زده کړه وکړه کله چې په پیل کې جاواسکریپټ زده کړه. حقیقت دا دی چې د مخ په وړاندې عصري چوکاټونه د ټیکنالوژۍ لویانو په اوږو ولاړ دي چې مخکې یې وړاندې کړي. دوی د پراختیایي کړنې خلاصوي، ډیری وختونه د غوره پراختیا کونکي تجربې لپاره چې کموي، یا حتی له منځه وړي، د پوهیدو یا لمس کولو اړتیا چې په دودیز ډول د لومړي پای مفکورې دي چې هرڅوک باید پوه شي. د CSS آبجیکٹ ماډل (CSSOM) ته پام وکړئ. تاسو شاید تمه وکړئ چې هرڅوک په CSS او JavaScript کې کار کوي د CSSOM تجربه لري، مګر دا تل داسې نه وي. د ای کامرس سایټ لپاره د عکس العمل پروژه وه چې ما پکې کار کاوه چیرې چې موږ د اوسني ټاکل شوي تادیې چمتو کونکي لپاره سټایل شیټ پورته کولو ته اړتیا درلوده. ستونزه دا وه چې سټایل شیټ په هره پاڼه کې پورته کیږي کله چې دا یوازې په یوه ځانګړي پاڼه کې اړتیا وه. پراختیا کونکي چې د دې پیښیدو دنده په غاړه لري هیڅکله یې سټایل شیټ په متحرک ډول نه دی پورته کړی. یوځل بیا ، دا په بشپړ ډول د پوهیدو وړ دی کله چې عکس العمل هغه دودیز چلند خلاصوي چې ممکن تاسو ورته رسیدلي وي. CSSOM احتمالا هغه څه ندي چې تاسو یې په ورځني کار کې اړتیا لرئ. مګر دا احتمال لري چې تاسو به په یو وخت کې د دې سره اړیکه ونیسئ، حتی په یو وخت کې. دې تجربو ما ته الهام راکړ چې دا مقاله ولیکم. په ځنګل کې ډیری موجود ویب ب featuresې او ټیکنالوژي شتون لري چې تاسو ممکن هیڅکله په خپل ورځني کار کې مستقیم تماس ونلرئ. شاید تاسو د ویب پراختیا لپاره خورا نوي یاست او په ساده ډول د دوی څخه خبر نه یاست ځکه چې تاسو د یو ځانګړي چوکاټ په خلاصون کې ډوب یاست چې تاسو ته اړتیا نلري چې دا په ژوره توګه وپیژنئ ، یا حتی په هیڅ ډول. زه په ځانګړې توګه د XML په اړه خبرې کوم، کوم چې موږ ډیری پوهیږو یوه لرغونې ژبه ده چې د HTML څخه په بشپړه توګه توپیر نلري. زه دا د وروستي WHATWG بحثونو له امله راوړم چې وړاندیز کوي د XML سټیک یوه مهمه برخه چې د XSLT برنامه کولو په نوم پیژندل کیږي باید له براوزرونو څخه لرې شي. دا په حقیقت کې د پخوانۍ، موجوده ټیکنالوژۍ ډول دی چې موږ د کلونو لپاره درلود چې د یو څه لپاره د عملي کار لپاره کارول کیدی شي لکه د CSSOM وضعیت چې زما ټیم په کې و. ایا تاسو دمخه د XSLT سره کار کړی؟ راځئ وګورو چې ایا موږ دې زړې ټیکنالوژۍ ته په پراخه کچه تکیه ورکوو او د نن ورځې د ریښتیني نړۍ ستونزو سره د مبارزې لپاره د XML شرایطو څخه بهر د هغې ځانګړتیاوې ګټه پورته کوو. XPath: مرکزي API د XML خورا مهم ټیکنالوژي چې شاید د مستقیم XML لید څخه بهر خورا ګټور وي XPath دی ، د پوښتنې ژبه چې تاسو ته اجازه درکوي په مارک اپ ونې کې د یو ریښې عنصر سره کوم نوډ یا خاصیت ومومئ. زه د XSLT لپاره شخصي مینه لرم، مګر دا په XPath باندې هم تکیه کوي، او شخصي مینه باید د درجه بندي اهمیت کې پریښودل شي. د XSLT د لرې کولو دلیل د XPath هیڅ یادونه نه کوي، نو زه فکر کوم چې دا لاهم اجازه لري. دا ښه دی ځکه چې XPath د ټیکنالوژیو په دې سوټ کې مرکزي او خورا مهم API دی، په ځانګړې توګه کله چې د عادي XML کارولو څخه بهر کارولو لپاره د یو څه موندلو هڅه کوي. دا مهمه ده ځکه چې، پداسې حال کې چې د CSS انتخاب کونکي ستاسو په پاڼه کې د ډیری عناصرو موندلو لپاره کارول کیدی شي، دوی نشي کولی دا ټول ومومي. برسېره پردې، د CSS انتخاب کونکي نشي کارول کیدی چې په DOM کې د اوسني موقعیت پراساس یو عنصر ومومي. XPath کولی شي. اوس، ستاسو څخه ځینې دا لوستل ممکن XPath پیژني، او ځینې ممکن نه وي. XPath د ټیکنالوژۍ خورا لوی ساحه ده، او زه واقعیا نشم کولی ټول اساسات درس ورکړم او تاسو ته د دې په څیر په یوه مقاله کې د دې سره کولو لپاره ښه شیان وښایه. ما په حقیقت کې د دې مقالې لیکلو هڅه وکړه، مګر د اوسط Smashing مجلې خپرونه له 5,000 څخه زیات ټکي نه ځي. زه لا دمخه له دې څخه ډیر وم2,000 کلمې پداسې حال کې چې یوازې نیمایي د اساساتو له لارې. نو، زه به د XPath سره ښه شیان پیل کړم او تاسو ته ځینې لینکونه درکړم چې تاسو د اساساتو لپاره کارولی شئ که تاسو دا توکي په زړه پوري ومومئ. د XPath او CSS ترکیب XPath کولی شي ډیری شیان ترسره کړي چې د CSS انتخاب کونکي نشي کولی د عناصرو پوښتنه وکړي. مګر د CSS انتخاب کونکي کولی شي یو څه شیان هم ترسره کړي چې XPath نشي کولی، د بیلګې په توګه، د ټولګي نوم لخوا د پوښتنو عناصر.
سی ایس ایس XPath .myClass /*[شامل (@کلاس، "myClass")]
په دې مثال کې، د CSS پوښتنو عناصر چې د .myClass ټولګي نوم لري. په ورته وخت کې، د XPath مثال د عناصرو پوښتنې کوي چې د "myClass" تار سره د ځانګړتیا ټولګي لري. په بل عبارت، دا په هر صفت کې د myClass سره عناصر غوره کوي، پشمول د .myClass ټولګي نوم سره عناصر - او همدارنګه په تار کې د "myClass" سره عناصر، لکه .myClass2. XPath پدې معنی کې پراخه ده. نو، نه. زه وړاندیز نه کوم چې موږ باید سی ایس ایس وباسو او د XPath له لارې ټول عناصر غوره کول پیل کړو. دا ټکی نه دی. ټکی دا دی چې XPath کولی شي هغه شیان ترسره کړي چې CSS نشي کولی او لاهم خورا ګټور وي، که څه هم دا د براوزر سټیک کې یو زوړ ټیکنالوژي ده او ممکن په لومړي نظر کې څرګند نه ښکاري. راځئ چې دواړه ټیکنالوژي په ګډه وکاروو نه یوازې دا چې موږ یې کولی شو ، مګر دا چې موږ به په پروسه کې د XPath په اړه یو څه زده کړو ، دا به ستاسو په سټیک کې بله وسیله رامینځته کړي - یو چې تاسو شاید نه پیژنئ په ټوله کې شتون درلود! ستونزه دا ده چې د JavaScript document.evaluate میتود او د مختلف پوښتنو ټاکونکي میتودونه چې موږ یې د JavaScript لپاره د CSS APIs سره کاروو متضاد دي. ما د پیل کولو لپاره یو مناسب پوښتنلیک API رامینځته کړی ، که څه هم په اعتراف سره ، ما پدې کې ډیر فکر نه دی کړی ځکه چې دا د هغه څه څخه وتل دی چې موږ یې دلته کوو. دلته د بیا کارونې وړ پوښتنې جوړونکي خورا ساده کاري مثال دی: د براین راسموسن لخوا د قلم پوښتنې ایکس پاتھ [فورک شوی] وګورئ. ما د سند اعتراض کې دوه میتودونه اضافه کړي دي: queryCSSSelectors (کوم چې په اصل کې د querySelectorAll دی) او queryXPaths. دا دواړه د یوې پوښتنې پایلې اعتراض راوړي:
{ د پوښتنې ډول: نوډز | تار | شمیره | بولین پایلې: هر [] // html عناصر، xml عناصر، تارونه، شمیرې، بولین، queryCSSSselectors: (پوښتنه: string, amend: boolean) => د پوښتنو پایلې، queryXpaths: (پوښتنه: تار، تعدیل: بولین) => د پوښتنې پایلې }
د queryCSSSelectors او queryXpaths فنکشنونه هغه پوښتنه پرمخ وړي چې تاسو یې د پایلو په صف کې د عناصرو په اړه ورکوئ، تر هغه چې د پایلو سرې د نوډونو ډول وي، البته. که نه نو، دا به د پوښتنې پایلې د خالي صف او یو ډول نوډونو سره بیرته راولي. که د ترمیم ملکیت ریښتیا ته ټاکل شوی وي، دندې به د دوی د پوښتنو پایلې بدل کړي. په هیڅ حالت کې دا باید د تولید چاپیریال کې ونه کارول شي. زه دا په خالص ډول دا کار کوم ترڅو د دوه پوښتنو APIs سره یوځای کارولو مختلف اغیزې وښیې. بېلګې پوښتنې زه غواړم د مختلف XPath پوښتنو یو څو مثالونه وښیم چې ځینې پیاوړي شیان ښیې چې دوی یې کولی شي او څنګه د نورو لارو په ځای کارول کیدی شي. لومړی مثال دی //li/text(). دا ټول عناصر پوښتي او د دوی متن نوډونه بیرته راولي. نو، که موږ د لاندې HTML پوښتنه وکړو:
- یو
- دوه
- درې
... دا هغه څه دي چې بیرته راستانه کیږي:
{"queryType":"xpathEvaluate","results":["one","دوه","درې"],"resultType":"string"}
په بل عبارت، موږ لاندې صف ترلاسه کوو: ["یو"،"دوه"،"درې"]. په عموم ډول، تاسو به د li عناصرو لپاره پوښتنه وکړئ ترڅو دا ترلاسه کړي، د دې پوښتنې پایله په یوه صف کې بدله کړئ، سري نقشه کړئ، او د هر عنصر متن نوډ بیرته راستانه کړئ. مګر موږ کولی شو دا د XPath سره په ډیر لنډ ډول ترسره کړو: document.queryXPaths("//li/text()") پایلې.
په یاد ولرئ چې د متن نوډ ترلاسه کولو لاره د متن () کارول دي ، کوم چې د فعالیت لاسلیک په څیر ښکاري - او دا دی. دا د عنصر متن نوډ بیرته راګرځوي. زموږ په مثال کې، په مارک اپ کې درې عناصر شتون لري، هر یو متن لري ("یو"، "دوه"، او "درې").
راځئ چې د متن () پوښتنې یوه بله بیلګه وګورو. فرض کړئ چې دا زموږ نښه ده:
راځئ یوه پوښتنه ولولو چې د href خاصیت ارزښت بیرته راګرځوي: document.queryXPaths("//a[text() = 'Sign In']/@href"). پایلې.
دا په اوسني سند کې د XPath پوښتنه ده، لکه د وروستي مثال په څیر، مګر دا ځل موږ د لینک (یو عنصر) د href خاصیت بیرته راګرځوو چې متن لري "Sign In". اصلي بیرته راستون شوپایله ["/login.html"] ده. د XPath دندو کتنه د XPath یو شمیر فعالیتونه شتون لري، او تاسو شاید له دوی سره نا اشنا یاست. زما په اند ډیری شتون لري چې د پوهیدو وړ دي، په شمول د الندې:
starts-with که یو متن د یو ځانګړي بل متن مثال سره پیل شي، starts-with(@href, 'http:') ریښتیا راګرځي که د href خاصیت د http: سره پیل شي. که یو متن د بل ځانګړي متن مثال ولري، پکې شامل وي (متن()، "ماتولو مجله") ریښتیا راځي که د متن نوډ په هر ځای کې د "Smashing Magazine" ټکي ولري. count د یوې پوښتنې لپاره د څو میچونو شمیره راګرځوي. د مثال په توګه، شمېرنه(//*[Starts-with(@href, 'http:']) د دې شمیره بیرته راګرځوي چې د شرایطو نوډ کې څومره لینکونه د href خاصیت سره عناصر لري چې متن پکې د http: سره پیل کیږي. substring د JavaScript سبسټرینګ په څیر کار کوي، پرته لدې چې تاسو تار د دلیل په توګه تیر کړئ. د مثال په توګه، substring("زما متن"، 2، 4) "y t" راګرځي. substring-before د بل تار مخکې د تار برخه بیرته راګرځوي. د مثال په توګه، substing-before("زما متن"، "") "زما" راګرځي. په ورته ډول، substring-before("hi","bye") یو خالي تار راګرځوي. substring-after د بل تار وروسته د تار برخه راګرځوي. د مثال په توګه، substing-after("زما متن"، "") "متن" راګرځي. په ورته ډول، substring-after("hi","bye") یو خالي تار راګرځوي. normalize-space د استدلال تار د سپینې ځای سره بیرته راګرځي چې د مخکښ او تعقیبي سپین سپیس د لرې کولو او د یو واحد ځای لخوا د سپینې ځای حروفونو ترتیبونو بدلولو سره نورمال شوي. نه د بولین ریښتیا بیرته راګرځوي که دلیل غلط وي، که نه نو غلط. true د بولین ریښتیا راګرځي. غلط بولین غلط راګرځي. concat ورته شی د جاواسکریپټ concat په څیر دی، پرته لدې چې تاسو دا په تار کې د میتود په توګه نه چلوئ. پرځای یې، تاسو ټول هغه تارونه واچوئ چې تاسو یې غواړئ یوځای کړئ. string-length دا د JavaScript string-length سره ورته نه دی، بلکې د تار اوږدوالی بیرته راګرځوي چې دا د دلیل په توګه ورکړل شوی. دا یو تار اخلي او دوهم دلیل دریم دلیل ته بدلوي. د مثال په توګه، ژباړه ("abcdef"، "abc"، "XYZ") د XYZdef محصول.
د دې ځانګړي XPath دندو سربیره، یو شمیر نورې دندې شتون لري چې یوازې د دوی د جاوا سکریپټ همکارانو په څیر کار کوي - یا په بنسټیز ډول د پروګرام کولو ژبه کې همکاران - چې تاسو به یې هم ګټور ومومئ، لکه فرش، چت، ګردي، مجموعه، او داسې نور. لاندې ډیمو د دې هرې دندې توضیح کوي: د Bryan Rasmussen لخوا د Pen XPath شمیري افعال [فورک شوي] وګورئ. په یاد ولرئ چې د ډیری تار د مینځلو دندو په څیر، ډیری شمیرې یو واحد داخل کوي. دا، البته، ځکه چې دوی باید د پوښتنو لپاره وکارول شي، لکه څنګه چې په وروستي XPath مثال کې: //li[فروش(متن())> 250]/@val
که تاسو دا وکاروئ، لکه څنګه چې ډیری مثالونه کوي، تاسو به دا په لومړي نوډ کې پرمخ وړئ چې د لارې سره سمون لري. د تبادلې ځینې ډولونه هم شتون لري چې تاسو یې باید مخنیوی وکړئ ځکه چې جاواسکریپټ دمخه د خپل ډول تبادلې ستونزې لري. مګر داسې وختونه کیدی شي کله چې تاسو غواړئ یو تار په شمیره بدل کړئ ترڅو دا د نورو شمیرو په مقابل کې چیک کړئ. هغه دندې چې د یو څه ډول ټاکي بولین، شمیره، تار، او نوډ دي. دا د XPath مهم ډیټاټایپونه دي. او لکه څنګه چې تاسو تصور کولی شئ، ډیری دا افعال په ډیټاټایپونو کې کارول کیدی شي چې د DOM نوډونه ندي. د مثال په توګه، substring-after یو تار اخلي لکه څنګه چې موږ دمخه پوښلي، مګر دا کیدای شي د href خاصیت څخه تار وي. دا یوازې یو تار هم کیدی شي:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
په ښکاره ډول، دا مثال به موږ ته د ["نړۍ"] په توګه د پایلو لړۍ بیرته راکړي. په عمل کې د دې ښودلو لپاره، ما د هغو شیانو په وړاندې د فعالیتونو په کارولو سره یو ډیمو پاڼه جوړه کړې چې د DOM نوډونه ندي: د براین راسموسن لخوا د قلم پوښتنې ایکس پاتھ [فورک شوی] وګورئ. تاسو باید د ژباړې فنکشن حیرانونکي اړخ په پام کې ونیسئ، کوم چې دا دی چې که تاسو په دویم دلیل کې یو کرکټر ولرئ (د بیلګې په توګه، د حروفونو لیست چې تاسو یې ژباړئ) او د ژباړې لپاره کوم ورته کرکټر شتون نلري، دا کرکټر د محصول څخه لیرې کیږي. په دې توګه، دا:
ژباړه('سلام، زما نوم انګو مونټویا دی، تاسو زما پلار وژلی، مرګ ته چمتو یاست','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ','*')
… پایلې په تار کې، د ځایونو په شمول: ["*****"]
دا پدې مانا ده چې "a" توری ستوري (*) ته ژباړل کیږي، مګر هر بل کرکټر چې د هدف تار ته په پام سره ژباړه نلري په بشپړه توګه لیرې شوي. سپینه ځای ټول هغه څه دي چې موږ یې پریښودلد ژباړل شوي "a" حروفونو ترمنځ. بیا بیا دا پوښتنه:
ژباړه('سلام، زما نوم انیګو مونټویا دی، تا زما پلار وژلی، مرګ ته چمتو اوسئ','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','**********************************************)
... ستونزه نلري او پایله یې داسې ښکاري چې داسې ښکاري:
"***********************************************************
دا ممکن تاسو ته زیان ورسوي چې په جاواسکریپټ کې هیڅ اسانه لاره شتون نلري چې دقیقا هغه څه وکړي چې د XPath ژباړې فنکشن کوي ، که څه هم د ډیری کارولو قضیو لپاره ، د منظم څرګندونو سره ځای په ځای کول کولی شي دا اداره کړي. تاسو کولی شئ ورته طریقه وکاروئ چې ما ښودلې، مګر دا فرعي غوره ده که تاسو غواړئ د تارونو ژباړه وکړئ. لاندې ډیمو د جاواسکریپټ نسخه چمتو کولو لپاره د XPath ژباړې فنکشن پوښي: د براین راسموسن لخوا د قلم ژباړې فعالیت [فورک شوی] وګورئ. تاسو د دې په څیر یو څه چیرته کارولی شئ؟ د سیزر سیفر کوډ کول په پام کې ونیسئ د درې ځایي آفسټ سره (د مثال په توګه ، د 48 BC څخه د پورتنۍ کرښې کوډ کول):
ژباړه("قیصر پلان لري چې د روبیکون څخه تیر شي!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz" "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
د ننوتلو متن "قیصر پلان لري چې د روبیکون څخه تیر شي!" په پایله کې "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" د مختلف امکاناتو بل ګړندي مثال ورکولو لپاره ، ما یو فلزي فنکشن رامینځته کړی چې د سټینګ ان پټ اخلي او د متن بیرته راستنولو لپاره د ژباړې فنکشن کاروي ، پشمول ټول هغه حروف چې املاوټ اخلي. د براین راسموسن لخوا د قلم فلزي فعالیت [فورک شوی] وګورئ.
const metal = (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 ده، کوم چې دوه عناصر په یوه div کې د .relatedarticles په ټولګي کې ترلاسه کوي. له هغې وروسته درې "خراب" پوښتنې دي، دا هغه پوښتنې دي چې هغه څه نه کوي چې موږ یې غواړو هغه څه وکړو کله چې د دې عناصرو سره د شرایطو نوډ په توګه چلوو. زه کولی شم تشریح کړم چې ولې دوی ستاسو د تمه په پرتله مختلف چلند کوي. درې ناوړه پوښتنې په لاندې ډول دي:
// متن (): په سند کې ټول متن بیرته راګرځوي. //a/text(): په سند کې د لینکونو دننه ټول متن بیرته راګرځي. ./a/text(): هیڅ پایلې نه راګرځوي.
د دې پایلو دلیل دا دی چې پداسې حال کې چې ستاسو شرایط د CSS پوښتنې څخه راستانه شوي عناصر دي، // د ټول سند خلاف ځي. دا د XPath ځواک دی؛ CSS نشي کولی د نوډ څخه یو پلار ته لاړ شي او بیا د هغه پلار ورور ته لاړ شي، او د هغه وروڼه نسل ته لاړ شي. مګر XPath کولی شي. په عین حال کې، ./ د اوسني نوډ ماشومانو څخه پوښتنه کوي، چیرې چې نقطه (.) د اوسني نوډ استازیتوب کوي، او فارورډ سلیش (/) د ځینې ماشوم نوډ ته د تګ استازیتوب کوي - ایا دا یو ځانګړتیا، عنصر، یا متن د لارې د بلې برخې لخوا ټاکل کیږي. مګر هیڅ ماشوم شتون نلري کوم عنصر چې د CSS پوښتنې لخوا ټاکل شوی وي، پدې توګه دا پوښتنه هم هیڅ شی بیرته نه راوړي. په دې وروستي ډیمو کې درې ښې پوښتنې شتون لري:
.//متن() ./text(), نورمالیز-ځای(./text()).
د نورمال کولو ځای پوښتنه د XPath فعالیت کارول ښیې ، مګر په نورو پوښتنو کې شامله ستونزه هم حل کوي. HTML په دې ډول جوړ شوی دی:
د سیلینیم ویب ډرایور سره ستاسو د فیچر ازموینې اتومات کول
پوښتنه د متن نوډ په پیل او پای کې د لاین فیډ بیرته راګرځوي،او نورمالیز ځای دا لیرې کوي. د هر XPath فنکشن کارول چې د ان پټ سره د بولین پرته بل څه بیرته راګرځوي 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/"]
د XPath فنکشنونه په جاواسکریپټ کې د افعالونو په څیر نیست کیدی شي. نو، که موږ د Smashing Magazine 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 پوښتنې کولی شي شیانو ته په ډیر نښه شوي طریقه کې ډرل کړي چې هغه څه محدودوي چې بیرته راستنیږي، تاسو ته اجازه درکوي چې یو ځانګړی میچ ومومئ چیرې چې ممکن ډیری احتمالي میچونه وي. د مثال په توګه، موږ کولی شو د XPath څخه کار واخلو ترڅو یو ځانګړی h2 عنصر بیرته راستانه کړو چې په div کې شتون لري چې سمدلاسه د وروڼه div تعقیبوي چې په پایله کې، د ماشوم عکس عنصر لري چې د ډاټا-testID="leader" خاصیت سره لري:
دا سرلیک مه اخلئ
دا سرلیک هم مه اخلئ
د مشر انځور لپاره سرلیک
دا پوښتنه ده: document.queryXPaths(` //div[ لاندې وروڼه::div[1] /img[@data-testID='لیډر'] ] /h2/ متن() `);
راځئ چې په ډیمو کې پریږدو ترڅو وګورو چې دا ټول څنګه یوځای کیږي: د Bryan Rasmussen لخوا د قلم کمپلیکس 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 انجنونو لپاره بندر دی. دا یو په زړه پوری نظر دی، په ځانګړې توګه لکه څنګه چې ساکسون-JS د دې ځانګړتیاوو اوسنی نسخه پلي کوي، پداسې حال کې چې هیڅ براوزر شتون نلري چې د XPath یا XSLT کومه نسخه د 1.0 څخه هاخوا پلي کوي، او هیڅ څوک چې XQuery پلي نه کوي. زه په ساکسونیکا کې نورم تووی والش ته ورسیدم، د SaxonJS او د ساکسون انجن نورو نسخو شاته شرکت. هغه وویل: "که چیرې کوم براوزر پلورونکی په براوزر کې د عصري XML ټیکنالوژیو ادغام لپاره د پیل ټکي په توګه ساکسون جے ایس اخیستلو کې لیوالتیا ولري ، نو موږ به د دوی سره د دې په اړه بحث کولو ته لیواله شو." - نورم تووی-والش
بلکې زیاته یې کړه: "زه به ډیر حیران شم که څوک فکر وکړي چې د ساکسون جے ایس په اوسني شکل کې اخیستل او د براوزر په جوړولو کې یې بدلون نه راوستل به غوره لاره وي. د براوزر پلورونکی ، د دې حقیقت له مخې چې دوی براوزر رامینځته کوي ، کولی شي ادغام ته په خورا ژوره کچه د هغه په پرتله چې موږ یې له بهر څخه "- نورم تووی-والش کولی شو.
د یادولو وړ ده چې د Tovey-Walsh تبصرې د XSLT د استخراج اعلان شاوخوا یوه اونۍ وړاندې راغلې. پایله زه کولی شم پرمخ ولاړ شم. مګر زه امید لرم چې دې د XPath ځواک ښودلی او تاسو ته یې ډیری مثالونه درکړي چې دا ښیې چې څنګه یې د عالي شیانو لاسته راوړلو لپاره وکاروئ. دا د براوزر سټیک کې د زړې ټیکنالوژۍ یوه ښه بیلګه ده چې لاهم نن ورځ کافي افادیت لري ، حتی که تاسو هیڅکله نه پوهیږئ چې دا شتون لري یا هیڅکله دې ته رسیدو په اړه فکر نه کوي. نور لوستل
"د طبیعي ژبې سره د اتوماتیک ویب ټیسټونو انعطاف لوړول" (ACM ډیجیټل کتابتون) د مارون عیلی، یوسف باکوني، نادر جالول، او ریما کلیاني لخوا دا مقاله د انعطاف وړ ازموینو لیکلو لپاره ډیری XPath مثالونه وړاندې کوي. XPath (MDN) دا د پیل کولو لپاره خورا ښه ځای دی که تاسو تخنیکي توضیحات غواړئ چې د XPath څنګه کار کوي. د XPath ټیوټوریل (ZVON) ما وموندله چې دا ټیوټوریل زما په خپله زده کړه کې خورا ګټور و ، د ډیری مثالونو او روښانه توضیحاتو څخه مننه. XPather دا متقابل وسیله تاسو ته اجازه درکوي په مستقیم ډول د کوډ سره کار وکړي.
