ကျွန်ုပ်သည် နှစ်များတစ်လျှောက် လမ်းကြောင်းသစ်တစ်ခုကို မြင်နိုင်လောက်အောင် ရှေ့ဆုံးမှ ဖွံ့ဖြိုးတိုးတက်မှုတွင် ရှိနေခဲ့သည်- ငယ်ရွယ်သော developer များသည် ၎င်း၏သမိုင်းကြောင်းကို နားမလည်ဘဲ ပရိုဂရမ်ရေးဆွဲခြင်း၏ ပါရာဒိုင်းအသစ်ဖြင့် လုပ်ဆောင်နေပါသည်။ တစ်စုံတစ်ရာကို မသိခြင်းသည် လုံးဝနားလည်နိုင်သည် ။ ဝဘ်သည် မတူကွဲပြားသော ကျွမ်းကျင်မှုများနှင့် အထူးပြုသည့် အစုံအလင်ရှိသော အလွန်ကြီးမားသော နေရာဖြစ်ပြီး ကျွန်ုပ်တို့ မသိသောအရာကို အမြဲမသိပါ။ ဤနယ်ပယ်တွင် သင်ယူခြင်းသည် တစ်ကြိမ်ပြီးမြောက် ဖြစ်ပျက်နေသည့်အရာထက် စဉ်ဆက်မပြတ် ခရီးတစ်ခုဖြစ်သည်။ ဖြစ်ရပ်မှန်- ကျွန်ုပ်၏အဖွဲ့မှ တစ်စုံတစ်ဦးသည် UI ရှိ သီးခြားတဘ်တစ်ခုမှ အသုံးပြုသူများ သွားလာခြင်းရှိမရှိကို ပြောပြနိုင်မလား။ JavaScript ၏ လုပ်ဆောင်ချက်ကို မလုပ်ဆောင်မီ ထောက်ပြခဲ့သည်။ ဒါပေမယ့် ဒါကို ကိုင်တွယ်ဖြေရှင်းဖူးသူတွေ မသိသေးခင်မှာ ဒေါင်းလုဒ်လုပ်ခြင်းဟာ ပုံမှန်အသုံးပြုမှုကိစ္စတစ်ခုဖြစ်တဲ့ အခြားဆိုက်များရှိ မသိမ်းဆည်းရသေးသော ဒေတာများအကြောင်း သတိပေးချက်များနှင့် ထိမှန်ခံရခြင်းကြောင့် ဖြစ်နိုင်သည်။ အတိုင်းအတာတစ်ခုအထိ ကောင်းမွန်ရန်အတွက် ကျွန်ုပ်၏လုပ်ဖော်ကိုင်ဖက်အား pageHide နှင့် မြင်နိုင်စွမ်းပြောင်းလဲခြင်း ဖြစ်ရပ်များကို ထောက်ပြပါသည်။ အဲဒါကို ငါဘယ်လိုသိတာလဲ။ ဘာကြောင့်လဲဆိုတော့ JavaScript ကိုစလေ့လာတုန်းက ကျွန်တော်လေ့လာခဲ့တဲ့ ပရောဂျက်ကြောင့်မဟုတ်ဘဲ တခြားပရောဂျက်တစ်ခုမှာ ပေါ်လာလို့ပါ။ အမှန်မှာ ခေတ်မီ front-end framework များသည် ၎င်းတို့ရှေ့က နည်းပညာဘီလူးကြီးများ၏ ပခုံးပေါ်တွင် ရပ်တည်နေပါသည်။ ၎င်းတို့သည် မကြာခဏဆိုသလို ပိုမိုကောင်းမွန်သော developer အတွေ့အကြုံတစ်ခုအတွက်၊ လျော့နည်းသွားစေရန် သို့မဟုတ် ဖယ်ရှားပေးသည့် အစဉ်အလာရှိ မရှိမဖြစ်လိုအပ်သော ရှေ့ဆုံးသဘောတရားများကို သိရန် သို့မဟုတ် ထိရန် လိုအပ်မှုတို့ကို မကြာခဏဆိုသလို သိသင့်သည်။ CSS Object Model (CSSOM) ကို သုံးသပ်ကြည့်ပါ။ CSS နှင့် JavaScript တွင်အလုပ်လုပ်သောမည်သူမဆိုသည်လက်တွေ့ CSSOM အတွေ့အကြုံများစွာရှိမည်ဟုမျှော်လင့်နိုင်သော်လည်း ၎င်းသည်အမြဲတမ်းဖြစ်မည်မဟုတ်ပေ။ လက်ရှိရွေးချယ်ထားသော ငွေပေးချေမှုဝန်ဆောင်မှုပေးသူအတွက် ပုံစံစာရွက်တစ်ခုကို တင်ရန်လိုအပ်သည့်နေရာတွင် ကျွန်ုပ်လုပ်ဆောင်ခဲ့သည့် e-commerce ဝဘ်ဆိုက်အတွက် React ပရောဂျက်တစ်ခုရှိသည်။ ပြဿနာမှာ စာမျက်နှာတိုင်းတွင် ၎င်းသည် တိကျသောစာမျက်နှာတစ်ခုတွင် အမှန်တကယ်လိုအပ်နေချိန်တွင် ပုံစံစာရွက်ကို ဖွင့်နေခြင်းဖြစ်သည်။ ၎င်းကိုလုပ်ဆောင်ရန်တာဝန်ပေးထားသော developer သည် stylesheet တစ်ခုကို dynamically မတင်ထားဖူးပါ။ ထပ်မံ၍ React သည် သင်ရောက်ရှိနေသည့် ရိုးရာချဉ်းကပ်နည်းကို ဖယ်ခွာလိုက်သည့်အခါ ၎င်းကို လုံးဝနားလည်နိုင်သည်။ CSSOM သည် သင့်နေ့စဉ်အလုပ်တွင် သင်လိုအပ်သောအရာမဟုတ်ပေ။ သို့သော် တစ်ကြိမ်တစ်ခါ သာဓကတစ်ခုတွင်ပင် သင်သည် ၎င်းနှင့် တစ်ချိန်ချိန်တွင် အပြန်အလှန် တုံ့ပြန်ရန် လိုအပ်နိုင်ဖွယ်ရှိသည်။ ဒီအတွေ့အကြုံတွေက ကျွန်တော့်ကို ဒီဆောင်းပါးရေးဖို့ တွန်းအားဖြစ်စေတယ်။ သင်၏နေ့စဉ်လုပ်ငန်းခွင်တွင် သင်ဘယ်တော့မှ တိုက်ရိုက်မထိနိုင်သော ဝဘ်အင်္ဂါရပ်များနှင့် နည်းပညာများစွာရှိပါသည်။ သင်သည် ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုအတွက် အတော်လေးကို အသစ်ဖြစ်ကောင်းဖြစ်နိုင်သလို သင် နက်နက်ရှိုင်းရှိုင်း သိရန်မလိုသော သို့မဟုတ် လုံးဝပင် လုံးဝမလိုအပ်သော သီးခြားမူဘောင်တစ်ခု၏ စူးစူးနစ်မြုပ်မှုတွင် နစ်မြောနေသောကြောင့် ၎င်းတို့ကို ရိုးရိုးရှင်းရှင်းပင် သတိမထားမိဘဲ ဖြစ်ကောင်းဖြစ်နိုင်သည်။ ကျွန်တော်ကတော့ HTML နဲ့ လုံးဝမတူတဲ့ ရှေးဟောင်းဘာသာစကားတစ်ခုဖြစ်တဲ့ XML အကြောင်း အထူးပြောနေပါတယ်။ မကြာသေးမီက WHATWG ဆွေးနွေးမှုများကြောင့် XSLT ပရိုဂရမ်းမင်းဟုလူသိများသော XML stack ၏ထင်ရှားသောအပိုင်းများကို browsers များမှဖယ်ရှားသင့်သည်ဟုအကြံပြုသောကြောင့်၎င်းကိုတင်ပြရခြင်းဖြစ်ပါသည်။ ၎င်းသည် ကျွန်ုပ်၏အဖွဲ့တွင်ရှိနေသည့် CSSOM အခြေအနေကဲ့သို့ လက်တွေ့ကျသည့်အရာအတွက် အသုံးပြုနိုင်စေရန် နှစ်ပေါင်းများစွာ ကျွန်ုပ်တို့ပိုင်ဆိုင်ထားသော အဟောင်း၊ ရှိပြီးသားနည်းပညာအမျိုးအစားဖြစ်သည်။ အရင်က XSLT နဲ့ အလုပ်လုပ်ဖူးလား။ ယနေ့ခေတ် လက်တွေ့ကမ္ဘာပြဿနာများကို ကိုင်တွယ်ဖြေရှင်းရန်အတွက် ကျွန်ုပ်တို့သည် ဤနည်းပညာအဟောင်းများကို ပြင်းပြင်းထန်ထန် အားကိုးပြီး ၎င်း၏အင်္ဂါရပ်များကို XML ၏ အပြင်ဘက်တွင် အသုံးချခြင်းရှိမရှိ ကြည့်ကြပါစို့။ XPath- ဗဟို API ဖြောင့်တန်းသော XML ရှုထောင့်၏ အပြင်ဘက်တွင် အသုံးအများဆုံးဖြစ်နိုင်သည့် အရေးကြီးဆုံး XML နည်းပညာသည် အမြစ်ဒြပ်စင်တစ်ခုပါရှိသော မည်သည့် node သို့မဟုတ် attribute ကိုမဆို ရှာဖွေနိုင်စေမည့် query language တစ်ခုဖြစ်သည့် XPath ဖြစ်သည်။ ကျွန်ုပ်တွင် XSLT ကို ပုဂ္ဂိုလ်ရေးအရ ချစ်ခင်မှုရှိသည်၊ သို့သော် ၎င်းသည် XPath ကိုလည်း အားကိုးပြီး ပုဂ္ဂိုလ်ရေး ချစ်ခင်မှုကို အရေးပါသော အဆင့်တွင် ဘေးဖယ်ထားရမည်ဖြစ်သည်။ XSLT ကို ဖယ်ရှားခြင်းအတွက် အကြောင်းပြချက်သည် XPath ကို ဖော်ပြထားခြင်းမရှိပါ၊ ထို့ကြောင့် ၎င်းကို ခွင့်ပြုဆဲဟု ယူဆပါသည်။ အဘယ်ကြောင့်ဆိုသော် XPath သည် ပုံမှန် XML အသုံးပြုမှု အပြင်ဘက်တွင် အသုံးပြုရန် တစ်ခုခုကို ရှာဖွေရန် ကြိုးစားသောအခါတွင် ဤနည်းပညာအစုံတွင် အဓိကနှင့် အရေးကြီးဆုံး API ဖြစ်သည်။ သင့်စာမျက်နှာရှိ အစိတ်အပိုင်းအများစုကို ရှာဖွေရန် CSS ရွေးချယ်မှုများကို အသုံးပြုသော်လည်း ၎င်းတို့အားလုံးကို ရှာမတွေ့နိုင်သောကြောင့် အရေးကြီးပါသည်။ ထို့အပြင်၊ DOM တွင် ၎င်း၏ လက်ရှိအနေအထားအပေါ် အခြေခံ၍ အစိတ်အပိုင်းတစ်ခုကို ရှာဖွေရန် CSS ရွေးချယ်မှုများကို အသုံးမပြုနိုင်ပါ။ XPath လုပ်နိုင်ပါတယ်။ အခု ဒီစာကိုဖတ်နေတဲ့ တစ်ချို့က XPath ကို သိပြီး တစ်ချို့က မသိကြဘူး။ XPath သည် နည်းပညာ၏ ကြီးမားသော နယ်ပယ်တစ်ခုဖြစ်ပြီး ကျွန်ုပ်သည် အခြေခံအချက်များအားလုံးကို အမှန်တကယ် မသင်ကြားနိုင်သည့်အပြင် ဤကဲ့သို့သော ဆောင်းပါးတစ်ခုတည်းတွင် ၎င်းနှင့်လုပ်ဆောင်ရမည့်အရာများကို သင်ပြပေးနိုင်ပါသည်။ ဒီဆောင်းပါးကို တကယ်ရေးဖို့ ကြိုးစားခဲ့ပေမယ့် ပျမ်းမျှ Smashing Magazine ထုတ်ဝေမှုက စာလုံးရေ 5,000 ထက်မပိုပါဘူး။ ကျော်ကျော် မှာနေပြီအခြေခံမှ တစ်ဝက်တစ်ပျက်သာရှိသော်လည်း စကားလုံး 2,000 ရှိသည်။ ဒါကြောင့် XPath နဲ့ ကောင်းမွန်တဲ့ အရာတွေကို စတင်လုပ်ဆောင်တော့မှာ ဖြစ်ပြီး ဒီအချက်တွေကို စိတ်ဝင်စားစရာ တွေ့ပါက အခြေခံအတွက် အသုံးပြုနိုင်တဲ့ လင့်ခ်အချို့ကို ပေးပါမယ်။ XPath နှင့် CSS ပေါင်းစပ်ခြင်း။ XPath သည် ဒြပ်စင်များကို မေးမြန်းသည့်အခါ CSS ရွေးချယ်သူများ မလုပ်ဆောင်နိုင်သော အရာများစွာကို လုပ်ဆောင်နိုင်သည်။ သို့သော် CSS ရွေးခြယ်သူများသည် XPath မလုပ်ဆောင်နိုင်သော အရာအချို့ကိုလည်း လုပ်နိုင်သည်၊ ဆိုလိုသည်မှာ၊ အတန်းအမည်ဖြင့် query element များကို လုပ်ဆောင်နိုင်သည်။
CSS XPath .myClass /*[ပါဝင်သည်(@class၊ "myClass")]
ဤဥပမာတွင်၊ CSS သည် .myClass အတန်းအစားအမည်ပါရှိသော ဒြပ်စင်များ။ ဤအတောအတွင်း၊ XPath ဥပမာတွင် “myClass” စာကြောင်းပါရှိသော attribute class တစ်ခုပါရှိသော အစိတ်အပိုင်းများကို မေးမြန်းသည်။ တစ်နည်းအားဖြင့်ဆိုရသော်၊ ၎င်းသည် .myClass အတန်းအစားအမည်ပါသည့် အစိတ်အပိုင်းများအပါအဝင် မည်သည့် attribute တွင်မဆို myClass ပါသည့်ဒြပ်စင်များနှင့် .myClass2 ကဲ့သို့သော string ရှိ “myClass” ပါသည့် အစိတ်အပိုင်းများကို ရွေးချယ်သည်။ XPath သည် ထိုသဘောအရ ပိုမိုကျယ်ပြန့်သည်။ ဒီတော့ မဟုတ်ဘူး၊ ကျွန်ုပ်တို့သည် CSS ကိုဖယ်ထုတ်ပြီး XPath မှတဆင့်ဒြပ်စင်အားလုံးကိုစတင်ရွေးချယ်သင့်သည်ဟုကျွန်ုပ်မအကြံပြုလိုပါ။ ဒါအချက်မဟုတ်ဘူး။ ဆိုလိုသည်မှာ XPath သည် CSS မလုပ်ဆောင်နိုင်သော အရာများကို လုပ်ဆောင်နိုင်ပြီး အလွန်အသုံးဝင်နေသေးသည်မှာ၊ ၎င်းသည် browser stack ရှိ နည်းပညာအဟောင်းဖြစ်ပြီး ပထမတစ်ချက်တွင် သိသာပုံမပေါ်သော်လည်း၊ နည်းပညာနှစ်ခုကို တတ်နိုင်လို့မဟုတ်ဘဲ လုပ်ငန်းစဉ်မှာ XPath အကြောင်းတစ်ခုခုကို လေ့လာထားတာကြောင့် အဲဒါကို မင်းရဲ့ stack ထဲမှာ နောက်ထပ် tool တစ်ခုဖြစ်အောင် လုပ်ထားလို့ပါပဲ — သင်မသိသေးတဲ့တစ်ခုက တစ်ချိန်လုံးရှိပြီးသားပါ။ ပြဿနာမှာ JavaScript ၏ document.evaluate နည်းလမ်းနှင့် JavaScript အတွက် CSS APIs နှင့် ကျွန်ုပ်တို့အသုံးပြုသည့် အမျိုးမျိုးသော query selector နည်းလမ်းများသည် သဟဇာတမဖြစ်ခြင်းကြောင့်ဖြစ်သည်။ ကျွန်ုပ်တို့ကို စတင်ရန် လိုက်ဖက်ညီသော querying API တစ်ခုကို ပြုလုပ်ထားသော်လည်း၊ ၎င်းသည် ကျွန်ုပ်တို့ ဤနေရာမှ ထွက်ခွာသွားခြင်းဖြစ်သောကြောင့် ၎င်းကို ကျွန်ုပ်အများကြီး မစဉ်းစားမိခဲ့ပါ။ ဤသည်မှာ ပြန်သုံးနိုင်သော query constructor ၏ ရိုးရိုးရှင်းရှင်း အလုပ်လုပ်ပုံ ဥပမာတစ်ခုဖြစ်သည်။ Bryan Rasmussen မှ Pen queryXPath [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ ကျွန်ုပ်သည် စာရွက်စာတမ်းအရာဝတ္တုတွင် နည်းလမ်းနှစ်ခုကို ထည့်ထားသည်- queryCSSSelectors (အဓိကအားဖြင့် querySelectorAll) နှင့် queryXPaths။ ဤနှစ်ခုစလုံးသည် queryResults object ကို ပြန်ပေးသည်-
{ queryType: nodes | string | နံပါတ် | ဘူလီယန်၊ ရလဒ်များ- any[] // html ဒြပ်စင်များ၊ xml ဒြပ်စင်များ၊ စာကြောင်းများ၊ နံပါတ်များ၊ booleans၊ queryCSSSelectors: (query: string၊ ပြင်ဆင်ရန်- boolean) => queryResults၊ queryXpaths- (မေးမြန်းချက်- စာကြောင်းများ၊ ပြင်ဆင်ရန်- ဘူလီယံ) => queryResults }
queryCSSSelectors နှင့် queryXpaths လုပ်ဆောင်ချက်များသည် ရလဒ် array အတွင်းရှိ ဒြပ်စင်များပေါ်တွင် ၎င်းတို့အား သင်ပေးသော query ကို run သည်၊ ဟုတ်ပါတယ်၊ မဟုတ်ပါက၊ ၎င်းသည် ဗလာ array နှင့် nodes အမျိုးအစားတစ်ခုပါရှိသော queryResult ကို ပြန်ပေးလိမ့်မည်။ ပြင်ဆင်ခြင်း ပိုင်ဆိုင်မှုကို အမှန်ဟု သတ်မှတ်ပါက၊ လုပ်ဆောင်ချက်များသည် ၎င်းတို့၏ ကိုယ်ပိုင် queryResults ကို ပြောင်းလဲသွားမည်ဖြစ်သည်။ မည်သည့်အခြေအနေမျိုးတွင်မှ ၎င်းကို ထုတ်လုပ်မှုပတ်ဝန်းကျင်တွင် အသုံးမပြုသင့်ပါ။ query APIs နှစ်ခုကို အတူတကွအသုံးပြုခြင်း၏ အမျိုးမျိုးသောသက်ရောက်မှုများကို သရုပ်ပြရန် ဤနည်းလမ်းကို သက်သက်လုပ်ခြင်းဖြစ်ပါသည်။ နမူနာမေးခွန်းများ ကျွန်ုပ်သည် ၎င်းတို့လုပ်ဆောင်နိုင်သည့် အစွမ်းထက်သည့်အရာအချို့နှင့် အခြားနည်းလမ်းများအစား ၎င်းတို့ကို မည်သို့အသုံးပြုနိုင်ကြောင်း ပြသသည့် မတူညီသော XPath queries ၏ နမူနာအနည်းငယ်ကို ပြသလိုပါသည်။ ပထမဥပမာမှာ //li/text() ဖြစ်သည်။ ၎င်းသည် li ဒြပ်စင်အားလုံးကို မေးမြန်းပြီး ၎င်းတို့၏ စာသား node များကို ပြန်ပေးသည်။ ထို့ကြောင့် အောက်ပါ HTML ကို မေးမြန်းလိုလျှင်
- တစ်ခု
- နှစ်ခု
- သုံး
...ဒါက ပြန်ပေးတာပါ။
{"queryType":"xpathEvaluate","results":["one"," two","three"],resultType":"string"}
တစ်နည်းအားဖြင့်၊ ကျွန်ုပ်တို့သည် အောက်ပါ array ကိုရရှိသည်- ["one"," two","three"]။ သာမာန်အားဖြင့်၊ သင်သည် ၎င်းကိုရရှိရန် li ဒြပ်စင်များအတွက် စုံစမ်းမေးမြန်းသည်၊ ထိုမေးမြန်းမှု၏ရလဒ်ကို array တစ်ခုအဖြစ်သို့ပြောင်းရန်၊ array ကိုမြေပုံဆွဲပြီး element တစ်ခုစီ၏ text node ကိုပြန်ပေးလိမ့်မည်။ ဒါပေမယ့် XPath နဲ့ ပိုတိတိကျကျ လုပ်နိုင်ပါတယ်။ document.queryXPaths("//li/text()").ရလဒ်များ။
စာသား node တစ်ခုရရှိရန်နည်းလမ်းမှာ function signature နှင့်တူသော text() ကိုအသုံးပြုခြင်းဖြစ်သည် — နှင့်၎င်းသည်ဖြစ်သည်။ ၎င်းသည် element တစ်ခု၏ text node ကို ပြန်ပေးသည်။ ကျွန်ုပ်တို့၏နမူနာတွင်၊ တစ်ခုစီတွင် စာသား ("တစ်"၊ "နှစ်" နှင့် "သုံး") ပါ၀င်သော markup တွင် li element သုံးခုရှိသည်။
text() query ၏ နောက်ထပ် ဥပမာတစ်ခုကို ကြည့်ကြပါစို့။ ၎င်းသည် ကျွန်ုပ်တို့၏ အမှတ်အသားဖြစ်သည်ဟု ယူဆပါ။
href attribute တန်ဖိုးကို ပြန်ပေးသည့် query တစ်ခု ရေးကြပါစို့။ document.queryXPaths("//a[text() = 'ဝင်ရောက်ရန်']/@href").ရလဒ်များ။
၎င်းသည် နောက်ဆုံးနမူနာကဲ့သို့ပင် လက်ရှိစာရွက်စာတမ်းရှိ XPath စုံစမ်းမေးမြန်းချက်တစ်ခုဖြစ်သည်၊ သို့သော် ယခုတစ်ကြိမ်တွင် “Sign In” ဟူသောစာသားပါရှိသော လင့်ခ်တစ်ခု (အစိတ်အပိုင်းတစ်ခု) ၏ href attribute ကို ပြန်ပေးပါသည်။ အမှန်တကယ် ပြန်လာခဲ့သည်။ရလဒ်မှာ ["/login.html"] ဖြစ်သည်။ XPath လုပ်ဆောင်ချက်များ ခြုံငုံသုံးသပ်ချက် XPath လုပ်ဆောင်ချက်များစွာရှိပြီး ၎င်းတို့နှင့် သင်မရင်းနှီးနိုင်ပေ။ အောက်ဖော်ပြပါ အပါအဝင် သိသင့်သိထိုက်သော အကြောင်းအရာများစွာ ရှိသည်ဟု ကျွန်ုပ်ထင်ပါသည်။
starts-withIf စာသားသည် အခြားသော စာသားနမူနာတစ်ခုနှင့် စတင်ပါက၊ starts-with(@href၊ 'http:') သည် href attribute သည် http: ဖြင့် စတင်ပါက အမှန်အတိုင်း ပြန်ဖြစ်သွားသည်။ စာသားတစ်ခုတွင် အခြားစာသားဥပမာတစ်ခုပါရှိသည်ဆိုပါက စာသား Node တစ်ခုတွင် "Smashing Magazine" ဟူသော စကားလုံးများ ပါရှိနေပါက စာသား Node တွင် ပါဝင်သော (စာသား(), "Smashing Magazine") သည် အမှန်အတိုင်း ပြန်ဖြစ်သွားသည်။ CountReturn သည် Query တစ်ခုအတွက် ကိုက်ညီမှုမည်မျှရှိသည်ကို တွက်ချက်သည်။ ဥပမာအားဖြင့်၊ count(//*[starts-with(@href, 'http:']) သည် http: နှင့်အစရှိသည့် စာသားပါရှိသော href attribute ပါရှိသော context node တွင် လင့်ခ်မည်မျှရှိသည်ကို ရေတွက်ခြင်းကို ပြန်ပေးသည်။ substring သည် အငြင်းအခုံတစ်ခုအဖြစ် သင်စာကြောင်းကိုကျော်သွားမှလွဲ၍ JavaScript ခွဲစာတန်းကဲ့သို့အလုပ်လုပ်သည်။ ဥပမာအားဖြင့်၊ substring("my text", 2, 4) သည် "y t" ကို ပြန်ပေးသည်။ substring-before သည် အခြားစာကြောင်းတစ်ခုရှေ့တွင် string တစ်ခု၏အပိုင်းကို ပြန်ပေးသည်။ ဥပမာအားဖြင့်၊ substing-before("my text", "") သည် "my" ကို ပြန်ပေးသည်။ အလားတူ၊ substring-before("hi","bye") သည် ဗလာစာကြောင်းတစ်ခုကို ပြန်ပေးသည်။ substring-after သည် အခြား string တစ်ခုပြီးနောက် string တစ်ခု၏ အစိတ်အပိုင်းကို ပြန်ပေးသည်။ ဥပမာအားဖြင့်၊ substing-after("my text", "") သည် "text" ကို ပြန်ပေးသည်။ အလားတူ၊ substring-after("hi","bye")သည် ဗလာစာကြောင်းတစ်ခုကို ပြန်ပေးသည်။ normalize-space သည် ဦးဆောင်နေသော နေရာလွတ်များကို ဖယ်ထုတ်ပြီး နောက်မှလိုက်နေသော နေရာလွတ်များကို ဖယ်ထုတ်ကာ နေရာလွတ်တစ်ခုတည်းဖြင့် စာလုံးအစီအရီများကို အစားထိုးခြင်းဖြင့် အငြင်းအခုံစာကြောင်းကို ပြန်ပေးသည်။ အငြင်းအခုံသည် လွဲမှားနေလျှင် မဟုတ်ပါက boolean true မပြန်ပါ။ trueReturns boolean true။ falseReturns boolean false ။ concatJavaScript concat နဲ့အတူတူပါပဲ၊ သင်က string တစ်ခုပေါ်မှာ method တစ်ခုအနေနဲ့ run မလုပ်တာကလွဲရင်။ ယင်းအစား သင်ပေါင်းစပ်လိုသော ကြိုးများအားလုံးကို ထည့်သွင်းပါ။ string-length ဤသည်မှာ JavaScript string-length နှင့် မတူသော်လည်း၊ argument အဖြစ်ပေးထားသော string ၏ အရှည်ကို ပြန်ပေးသည်။ ဘာသာပြန်ရန် ၎င်းသည် စာကြောင်းတစ်ကြောင်းယူကာ ဒုတိယအငြင်းအခုံကို တတိယအငြင်းအခုံသို့ ပြောင်းသည်။ ဥပမာအားဖြင့်၊ ဘာသာပြန်ဆိုခြင်း("abcdef", "abc", "XYZ") သည် XYZdef ကို ထုတ်ပေးသည်။
ဤအထူးသဖြင့် XPath လုပ်ဆောင်ချက်များမှလွဲ၍ ၎င်းတို့သည် ၎င်းတို့၏ JavaScript အတွဲများ—သို့မဟုတ် အခြေခံအားဖြင့် မည်သည့်ပရိုဂရမ်းမင်းဘာသာစကားဖြင့်မဆို တူညီသောလုပ်ဆောင်နိုင်သည့် အခြားလုပ်ဆောင်ချက်များစွာရှိပါသည်—ထိုကဲ့သို့သော ကြမ်းပြင်၊ မျက်နှာကျက်၊ အဝိုင်း၊ ပေါင်းလဒ် အစရှိသည့် အသုံးဝင်မှုများကို သင်တွေ့နိုင်သည်။ အောက်ပါသရုပ်ပြသည် ဤလုပ်ဆောင်ချက်တစ်ခုစီကို သရုပ်ဖော်သည်- Bryan Rasmussen မှ Pen XPath ကိန်းဂဏာန်းလုပ်ဆောင်ချက်များကို ကြည့်ပါ။ string manipulation function အများစုကဲ့သို့၊ များစွာသော ဂဏန်းများသည် input တစ်ခုတည်းကို ယူသည်ကို သတိပြုပါ။ အဘယ်ကြောင့်ဆိုသော် ၎င်းတို့သည် နောက်ဆုံး XPath ဥပမာတွင်ကဲ့သို့ querying အတွက် အသုံးပြုရမည်ဖြစ်သောကြောင့်၊ //li[floor(text()) > 250]/@val
၎င်းတို့ကို သင်အသုံးပြုပါက၊ ဥပမာအများစုတွင်၊ ၎င်းကို path နှင့်ကိုက်ညီသော ပထမဆုံး node တွင် သင် run မည်ဖြစ်သည်။ JavaScript တွင်၎င်း၏ကိုယ်ပိုင်အမျိုးအစားပြောင်းလဲခြင်းပြဿနာများရှိနေပြီဖြစ်သောကြောင့်သင်ရှောင်ရှားသင့်သည့်အမျိုးအစားပြောင်းလဲခြင်းလုပ်ဆောင်ချက်အချို့လည်းရှိသည်။ သို့သော် အခြားနံပါတ်အချို့နှင့် နှိုင်းယှဉ်စစ်ဆေးရန်အတွက် ကြိုးတစ်ချောင်းကို နံပါတ်တစ်ခုသို့ ပြောင်းလိုသည့်အချိန်များရှိနိုင်သည်။ တစ်စုံတစ်ခု၏ အမျိုးအစားကို သတ်မှတ်ပေးသည့် လုပ်ဆောင်ချက်များမှာ ဘူလီယံ၊ နံပါတ်၊ စာကြောင်းနှင့် နံပါတ်များဖြစ်သည်။ ဤအရာများသည် အရေးကြီးသော XPath ဒေတာအမျိုးအစားများဖြစ်သည်။ သင်စိတ်ကူးထားသလိုပဲ၊ ဒီလုပ်ဆောင်ချက်အများစုကို DOM nodes မဟုတ်တဲ့ ဒေတာအမျိုးအစားတွေမှာ သုံးနိုင်ပါတယ်။ ဥပမာအားဖြင့်၊ substring-after သည် ကျွန်ုပ်တို့ လွှမ်းခြုံထားပြီးဖြစ်သည့်အတိုင်း string ကိုယူသည်၊ သို့သော် ၎င်းသည် href attribute မှ string ဖြစ်နိုင်သည်။ ၎င်းသည် ကြိုးတစ်ချောင်းလည်း ဖြစ်နိုင်သည်-
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
သိသာထင်ရှားသည်၊ ဤဥပမာသည် ကျွန်ုပ်တို့အား ["world"] အဖြစ် ရလဒ်များကို ခင်းကျင်းပေးမည်ဖြစ်သည်။ ၎င်းကို လုပ်ဆောင်ချက်တွင် ပြရန်၊ ကျွန်ုပ်သည် DOM nodes မဟုတ်သည့် အရာများကို ဆန့်ကျင်သည့် လုပ်ဆောင်ချက်များကို အသုံးပြုကာ သရုပ်ပြ စာမျက်နှာကို ပြုလုပ်ထားပါသည်။ Bryan Rasmussen မှ Pen queryXPath [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ ဒုတိယအငြင်းအခုံတွင် ဇာတ်ကောင်တစ်ခု (ဆိုလိုသည်မှာ သင်ဘာသာပြန်လိုသော ဇာတ်ကောင်များစာရင်း) နှင့် ဘာသာပြန်ရန် ကိုက်ညီသော ဇာတ်ကောင်မရှိပါက၊ ထိုစာလုံးကို အထွက်မှ ဖယ်ရှားလိုက်ခြင်းဖြစ်သည့် ဘာသာပြန်လုပ်ဆောင်ချက်၏ အံ့ဩစရာအချက်ကို သင်မှတ်သားထားသင့်သည်။ ထို့ကြောင့်၊
ဘာသာပြန်ဆိုခြင်း('မင်္ဂလာပါ ငါ့နာမည် Inigo Montoya ပါ၊ မင်းအဖေကိုသတ်လိုက်တာ၊ သေဖို့ပြင်ထားပြီ'၊'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…နေရာလွတ်များအပါအဝင် စာကြောင်း၏ရလဒ်များ- ["****"]
ဆိုလိုသည်မှာ အက္ခရာ “a” သည် ခရေပွင့် (*) သို့ ဘာသာပြန်ဆိုနေသော်လည်း ပစ်မှတ်စာတန်းကို ပေးထားသည့် ဘာသာပြန်မထားသော အခြားစာလုံးတိုင်းကို လုံးလုံးဖယ်ရှားထားသည်။ ကွက်လပ်က ငါတို့ကျန်နေသေးတာ။ဘာသာပြန် "a" အက္ခရာများအကြား။ ထို့နောက် ထပ်မံ၍ ဤမေးမြန်းချက်-
ဘာသာပြန်ဆိုခြင်း('မင်္ဂလာပါ ငါ့နာမည် Inigo Montoya ပါ၊ မင်းအဖေကိုသတ်လိုက်တာ၊ သေဖို့ပြင်ထားပြီ'၊'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,'*******************************************************)")
... ပြဿနာမရှိပါ ၊ ဤကဲ့သို့သော ရလဒ်ကို ထုတ်ပေးသည် ။
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
XPath ဘာသာပြန်သည့်လုပ်ဆောင်ချက်ကို အတိအကျလုပ်ဆောင်ရန် JavaScript တွင် လွယ်ကူသောနည်းလမ်းမရှိသော်လည်း အသုံးပြုမှုများစွာအတွက် အားလုံးကို ပုံမှန်အသုံးအနှုန်းများဖြင့် အစားထိုးနိုင်သော်လည်း ၎င်းသည် သင့်အား ထိခိုက်စေနိုင်ပါသည်။ ကျွန်ုပ်သရုပ်ပြထားသည့် တူညီသောချဉ်းကပ်နည်းကို သင်အသုံးပြုနိုင်သည်၊ သို့သော် သင်အလိုရှိသမျှသည် စာကြောင်းများကို ဘာသာပြန်ဆိုရန်မှာ အလွန်သင့်လျော်ပါသည်။ JavaScript ဗားရှင်းကို ပံ့ပိုးပေးရန်အတွက် အောက်ပါသရုပ်ပြသည် XPath ၏ ဘာသာပြန်လုပ်ဆောင်ချက်ကို ခြုံငုံမိသည်- Bryan Rasmussen မှ Pen ဘာသာပြန်ခြင်းလုပ်ဆောင်ချက်ကို ကြည့်ပါ။ ဒီလိုမျိုး ဘယ်မှာ သုံးလို့ရမလဲ။ Caesar Cipher ကုဒ်နံပါတ်သုံးနေရာမှ အော့ဖ်ဆက်ဖြင့် (ဥပမာ၊ 48 B.C. မှ ထိပ်တန်း ကုဒ်ဝှက်ခြင်း)
ဘာသာပြန်ဆိုခြင်း("Caesar သည် Rubicon ကိုဖြတ်ကျော်ရန်စီစဉ်နေသည်!"၊ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz" "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
ထည့်သွင်းစာသား "Caesar သည် Rubicon ကိုဖြတ်ကျော်ရန်စီစဉ်နေသည်!" “Zxbpxo fp mixkkfkd ql zolpp ၏ Oryfzlk!” တွင် ရလဒ်များ မတူညီသောဖြစ်နိုင်ခြေများ၏နောက်ထပ်ဥပမာတစ်ခုကိုပေးရန်အတွက်၊ umlauts ယူသောစာလုံးအားလုံးအပါအဝင် စာသားကိုပြန်ပို့ရန်အတွက် string input ကိုယူသောသတ္တုလုပ်ဆောင်ချက်တစ်ခုပြုလုပ်ခဲ့ပြီး umlauts များအပါအဝင် စာသားကိုပြန်ဆိုရန်အတွက်ဘာသာပြန်သည့်လုပ်ဆောင်ချက်ကိုအသုံးပြုခဲ့သည်။ Bryan Rasmussen မှ Pen metal လုပ်ဆောင်ချက်ကို ကြည့်ပါ။
const metal = (str) => { ဘာသာပြန်ရန်(str, "AOUaou","ÄÖÜäöü"); }
“Motley Crue rules, rock on dudes!” ဟူသော စာသားကို ပေးလျှင် “Mötley Crüe rüles, röck ön düdes!” ဟု ပြန်ပေးသည်။ သေချာသည်မှာ၊ လူတစ်ဦးတွင် ဤလုပ်ဆောင်ချက်ကို လှည့်စားအသုံးပြုမှုများ အမျိုးမျိုးရှိနိုင်သည်မှာ ထင်ရှားပါသည်။ သင်သာဖြစ်ပါက ဤ TVTropes ဆောင်းပါးသည် သင့်အား လှုံ့ဆော်မှုများစွာပေးသင့်သည်။ CSS ကို XPath ဖြင့်အသုံးပြုခြင်း။ XPath နှင့် အတူ CSS Selectors များကို အသုံးပြုရခြင်း၏ အဓိကအကြောင်းရင်းကို သတိရပါ- CSS သည် အတန်းတစ်ခုအား နားလည်သဘောပေါက်သော်လည်း XPath နှင့် သင်အကောင်းဆုံးလုပ်ဆောင်နိုင်သည်မှာ class attribute ၏ string comparisons ဖြစ်သည်။ အဲဒါက ကိစ္စတော်တော်များများမှာ အလုပ်ဖြစ်လိမ့်မယ်။ သို့သော် အကယ်၍ သင်သည် .primaryLinks နှင့် .primaryLinks2 ဟုခေါ်သော အတန်းများကို တစ်စုံတစ်ယောက်က ဖန်တီးခဲ့ပြီး .primaryLinks အတန်းကို ရယူရန် XPath ကို သင်အသုံးပြုနေပါက သင်သည် ပြဿနာများ ကြုံတွေ့ရဖွယ်ရှိသည်။ ထိုကဲ့သို့ မိုက်မဲနေသရွေ့ သင်သည် XPath ကို အသုံးပြုနေပေလိမ့်မည်။ ဒါပေမယ့် ဒီလို မိုက်မဲတဲ့ အကျင့်မျိုးတွေ လုပ်နေတဲ့ နေရာတွေမှာ ကျွန်တော် အလုပ်လုပ်ခဲ့တာကို ဝမ်းနည်းမိပါတယ်။ ဒါက CSS နဲ့ XPath အတူတူသုံးတဲ့ နောက်ထပ်သရုပ်ပြပါ။ စာရွက်စာတမ်း၏ node မဟုတ်သော context node တစ်ခုပေါ်တွင် XPath ကိုသုံးရန်ကုဒ်ကိုအသုံးပြုသောအခါ ၎င်းသည် ဘာဖြစ်သည်ကိုပြသသည်။ Bryan Rasmussen မှ Pen css နှင့် xpath ကို တွဲကြည့်ပါ။ CSS query သည် .relatedarticles a ဖြစ်ပြီး၊ div တစ်ခုတွင် .relatedarticles class တစ်ခုမှ သတ်မှတ်ပေးထားသော ဒြပ်စင်နှစ်ခုကို ရယူသည်။ ထို့နောက်တွင် “မကောင်းတဲ့” မေးခွန်းသုံးခု၊ ဆိုလိုသည်မှာ၊ ဤဒြပ်စင်များကို context node အဖြစ် လုပ်ဆောင်သည့်အခါ ၎င်းတို့လုပ်ချင်သည့်အရာကို မလုပ်သည့် queries များဖြစ်သည်။ သူတို့ဘာကြောင့် သင်ထင်ထားတာထက် ကွဲပြားစွာ ပြုမူနေကြသလဲဆိုတာကို ကျွန်တော်ရှင်းပြနိုင်ပါတယ်။ ဆိုးရွားသောမေးခွန်းသုံးခုမှာ-
//text(): စာရွက်စာတမ်းရှိ စာသားအားလုံးကို ပြန်ပေးသည်။ //a/text(): စာရွက်စာတမ်းရှိ လင့်ခ်များအတွင်းရှိ စာသားအားလုံးကို ပြန်ပေးသည်။ ./a/text(): ရလဒ်များ မပြန်ပါ။
ဤရလဒ်များအတွက် အကြောင်းပြချက်မှာ သင့်အကြောင်းအရာသည် CSS query မှ ပြန်လာသော အစိတ်အပိုင်းများဖြစ်သော်လည်း၊ // စာရွက်စာတမ်းတစ်ခုလုံးနှင့် ဆန့်ကျင်နေသောကြောင့်ဖြစ်သည်။ ဤသည်မှာ XPath ၏ ခွန်အားဖြစ်သည်။ CSS သည် node တစ်ခုမှ ဘိုးဘွားတစ်ဦးအထိ၊ ထို့နောက် ထိုဘိုးဘေး၏ မွေးချင်းတစ်ဦးထံသို့ သွားပြီး ထိုပေါက်ဖော်၏ သားစဉ်မြေးဆက်ဆီသို့ ဆင်းသွားနိုင်သည်။ ဒါပေမယ့် XPath လုပ်နိုင်တယ်။ ထိုအတောအတွင်း၊ ./ သည် အစက် (.) သည် လက်ရှိ node ကိုကိုယ်စားပြုသည့်နေရာတွင် ./ သည် လက်ရှိ node ၏ကလေးများကို queries လုပ်ပြီး forward slash (/) သည် အချို့သော node သို့သွားခြင်းကို ကိုယ်စားပြုသည် — ၎င်းသည် attribute၊ element သို့မဟုတ် text ကို path ၏နောက်အပိုင်းမှဆုံးဖြတ်သည်။ သို့သော် CSS query မှရွေးချယ်ထားသော element လေးသည် မရှိသောကြောင့်၊ ထို query သည် ဘာမှပြန်မလာပါ။ နောက်ဆုံးသရုပ်ပြတွင် မေးခွန်းကောင်း သုံးခုရှိသည်။
။//text(), ./text(), normalize-space (./text())။
normalize-space query သည် XPath လုပ်ဆောင်ချက်အသုံးပြုမှုကို သရုပ်ပြသော်လည်း အခြားသော queries များတွင် ပါဝင်သော ပြဿနာကို ဖြေရှင်းပေးပါသည်။ HTML ကို ဤကဲ့သို့ ဖွဲ့စည်းထားပါသည်။
Selenium WebDriver ဖြင့် သင်၏အင်္ဂါရပ်စမ်းသပ်မှုကို အလိုအလျောက်လုပ်ဆောင်ခြင်း။
query သည် text node ၏အစနှင့်အဆုံးတွင် စာကြောင်း feed ကို ပြန်ပေးသည်၊နှင့် normalize-space သည် ၎င်းကို ဖယ်ရှားသည်။ ထည့်သွင်းမှုတစ်ခုဖြင့် boolean မှလွဲ၍ အခြားတစ်ခုခုကို ပြန်ပေးသည့် XPath လုပ်ဆောင်ချက်ကို အသုံးပြုခြင်းသည် အခြားလုပ်ဆောင်ချက်များနှင့် သက်ဆိုင်သည်။ အောက်ပါသရုပ်ပြသည် ဥပမာများစွာကို ပြသည်- Bryan Rasmussen ၏ [လမ်းခွဲထားသော] Pen xpath လုပ်ဆောင်ချက်များကို ကြည့်ပါ။ ပထမဥပမာတွင် သင်သတိပြုသင့်သည့် ပြဿနာတစ်ခုကို ပြသည်။ အတိအကျအားဖြင့်၊ အောက်ပါကုဒ်။
document.queryXPaths("substring-after(//a/@href,'https://')");
… စာကြောင်းတစ်ကြောင်း ပြန်ပေးသည်-
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
အဓိပ္ပာယ်ရှိတယ်၊ ဤလုပ်ဆောင်ချက်များသည် array များကိုမပြန်ဘဲ၊ တစ်ခုတည်းသောစာကြောင်းများ သို့မဟုတ် နံပါတ်များသာဖြစ်သည်။ ရလဒ်များစွာဖြင့် မည်သည့်နေရာတွင်မဆို လုပ်ဆောင်သည့်လုပ်ဆောင်ချက်ကို လုပ်ဆောင်ခြင်းသည် ပထမရလဒ်ကိုသာ ပေးသည်။ ဒုတိယရလဒ်သည် ကျွန်ုပ်တို့ အမှန်တကယ် လိုချင်သောအရာကို ပြသသည်-
document.queryCSSSelectors("a").queryXPaths("substring-after./@href,'https://')");
၎င်းသည် string နှစ်ခု၏ array တစ်ခုကို ပြန်ပေးသည်-
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
XPath လုပ်ဆောင်ချက်များကို JavaScript ရှိလုပ်ဆောင်ချက်များကဲ့သို့ nested လုပ်နိုင်ပါသည်။ ထို့ကြောင့်၊ ကျွန်ုပ်တို့သည် Smashing Magazine URL တည်ဆောက်ပုံကို သိရှိပါက၊ အောက်ပါတို့ကို လုပ်ဆောင်နိုင်သည် (ပုံစံပလိတ်စာလုံးများကို အသုံးပြုရန် အကြံပြုထားသည်)။ `ဘာသာပြန်သည်( စာကြောင်းခွဲ( substring-after./@href၊ 'www.smashingmagazine.com/') ၊၉)၊ '/'၊')`
၎င်းလုပ်ဆောင်သည့်အရာကို ဖော်ပြသည့် မှတ်ချက်များ လိုအပ်သည့်အတိုင်းအတာအထိ ၎င်းသည် အနည်းငယ် ရှုပ်ထွေးနေပါသည်။ www.smashingmagazine.com/ ပြီးနောက် URL အားလုံးကို href attribute မှယူပါ၊ ပထမစာလုံးကိုးလုံးကို ဖယ်ရှားပြီးနောက် ရှေ့သို့မျဉ်းစောင်း (/) စာလုံးကို ဘာမှမဖြစ်စေရန်အတွက် ဘာသာပြန်ပါ။ ရလဒ် array-
["feature-testing-selenium-webdriver","automated-test-results-improve-accessibility"]
နောက်ထပ် XPath အသုံးပြုမှုကိစ္စများ XPath သည် စမ်းသပ်မှုတွင် အမှန်တကယ်တောက်ပနိုင်သည်။ အကြောင်းရင်းကို မြင်ရန်မခဲယဉ်းပါ၊ အဘယ်ကြောင့်ဆိုသော် XPath သည် DOM ရှိဒြပ်စင်တိုင်းကို DOM တွင် မည်သည့်ရာထူးမှ ရယူရန်အသုံးပြုနိုင်သော်လည်း CSS မရနိုင်ပါ။ ခေတ်မီတည်ဆောက်မှုစနစ်များစွာတွင် တသမတ်တည်းကျန်ရှိနေသော CSS အတန်းများကို သင်မတွက်နိုင်သော်လည်း XPath ဖြင့်၊ ကျွန်ုပ်တို့သည် ပြောင်းလဲနေသော DOM ဖွဲ့စည်းတည်ဆောက်ပုံနှင့် မသက်ဆိုင်ဘဲ ဒြပ်စင်တစ်ခု၏ စာသားအကြောင်းအရာသည် အဘယ်အရာဖြစ်သည်ကို ကျွန်ုပ်တို့ ပိုမိုခိုင်မာသောကိုက်ညီမှုများ ပြုလုပ်နိုင်မည်ဖြစ်သည်။ ခံနိုင်ရည်ရှိသော XPath စမ်းသပ်မှုများကို ပြုလုပ်နိုင်စေမည့် နည်းစနစ်များကို သုတေသနပြုထားပါသည်။ CSS ရွေးချယ်မှုတစ်ခုသည် တစ်စုံတစ်ခုအား အမည်ပြောင်းခြင်း သို့မဟုတ် ဖယ်ရှားခြင်းကြောင့် အလုပ်မလုပ်တော့ခြင်းကြောင့် စမ်းသပ်မှုများ ပျက်ပြယ်သွားပြီး ကျရှုံးခြင်းထက် ပိုဆိုးသည်မှာ မရှိပါ။ XPath သည် များစွာသော တည်နေရာကို ထုတ်ယူရာတွင်လည်း အလွန်ကောင်းမွန်ပါသည်။ ဒြပ်စင်တစ်ခုနှင့်ကိုက်ညီရန် XPath queries ကိုအသုံးပြုရန် နည်းလမ်းတစ်ခုထက်ပိုပါသည်။ CSS မှာလည်း အလားတူပါပဲ။ သို့သော် XPath queries သည် ပြန်လာမည့်အရာကို ကန့်သတ်ထားသည့် ပိုမိုပစ်မှတ်ထားသည့်နည်းလမ်းဖြင့် အရာများကို တူးနိုင်စေပြီး ဖြစ်နိုင်သည့်ကိုက်ညီမှုများစွာရှိနိုင်သည့် တိကျသောကိုက်ညီမှုတစ်ခုကို ရှာဖွေနိုင်စေမည်ဖြစ်သည်။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့သည် div တစ်ခုအတွင်းရှိ div တစ်ခုအတွင်းပါရှိသော တိကျသော h2 ဒြပ်စင်တစ်ခုကို ပြန်ပေးရန်အတွက်၊ တစ်ဖန်၊ ၎င်းတွင် data-testID="leader" ရည်ညွှန်းချက်ပါရှိသော ကလေးရုပ်ပုံဒြပ်စင်ပါရှိသည်-
ဤခေါင်းစဉ်ကို မယူပါနှင့်
ဤခေါင်းစဉ်ကို မယူပါနှင့်
ခေါင်းဆောင်ပုံအတွက် ခေါင်းစီး
ဤသည်မှာ မေးမြန်းမှုဖြစ်သည်- document.queryXPaths(` //div[ အောက်ပါ-မောင်နှမ-:div[1] /img[@data-testID='ခေါင်းဆောင်'] ] /h2/ စာသား() `);
အဲဒါတွေအားလုံးကို ဘယ်လိုပေါင်းစပ်ထားလဲဆိုတာ ကြည့်ရအောင် ဒီမိုတစ်ခုထဲကို ဝင်ကြည့်လိုက်ရအောင်။ Bryan Rasmussen မှ Pen Complex H2 Query ကိုကြည့်ပါ။ ဒါဆို ဟုတ်တယ် XPath ကို အသုံးပြု၍ စမ်းသပ်မှုတစ်ခုတွင် မည်သည့်ဒြပ်စင်သို့မဆို ဖြစ်နိုင်သောလမ်းကြောင်းများစွာရှိသည်။ XSLT 1.0 လျှော့စျေး Chrome အဖွဲ့သည် ဘရောက်ဆာမှ XSLT 1.0 ပံ့ပိုးမှုကို ဖယ်ရှားရန် စီစဉ်နေကြောင်း အစောပိုင်းတွင် ကျွန်ုပ်ပြောခဲ့သည်။ XSLT 1.0 သည် စာရွက်စာတမ်းအသွင်ပြောင်းရန်အတွက် XML-focused ပရိုဂရမ်ကို အသုံးပြုသောကြောင့် ၎င်းသည် အရေးကြီးသောကြောင့် ၎င်းမှာ XPath 1.0 ပေါ်တွင် မှီခိုနေရသောကြောင့်ဖြစ်ပြီး၊ ၎င်းမှာ browser အများစုတွင် တွေ့ရသည့်အရာဖြစ်သည်။ ထိုသို့ဖြစ်လာသောအခါ၊ ကျွန်ုပ်တို့သည် XPath ၏ အဓိကအစိတ်အပိုင်းတစ်ခု ဆုံးရှုံးသွားပါမည်။ ဒါပေမယ့် XPath က စာရေးခြင်းအတွက် တကယ်ကောင်းတာကြောင့် XPath တစ်ခုလုံး မကြာခင် အချိန်မရွေး ပျောက်ကွယ်သွားတော့မယ်လို့ ကျွန်တော်ထင်ပါတယ်။ ဆိုလိုသည်မှာ၊ ၎င်းကိုဖယ်ရှားလိုက်သောအခါတွင် လူအများက စိတ်ဝင်စားလာကြသည်ကို သတိပြုမိပါသည်။ XSLT 1.0 ကို ငြင်းပယ်ခြင်းခံရသည့်ကိစ္စတွင် ၎င်းသည် အမှန်ပင်ဖြစ်သည်။ ငြင်းဆိုမှုကို ဆန့်ကျင်သည့် ငြင်းခုံမှုများ ပြည့်နှက်နေသည့် Hacker News တွင် ဆွေးနွေးမှု တစ်ခုလုံး ဖြစ်ပေါ်နေသည်။ ပို့စ်ကိုယ်တိုင်က XSLT ဖြင့် ဘလော့ဂ်ရေးဘောင်တစ်ခု ဖန်တီးခြင်း၏ ကောင်းမွန်သော ဥပမာတစ်ခုဖြစ်သည်။ မင်းဆွေးနွေးချက်ကို သင်ကိုယ်တိုင် ဖတ်ရှုနိုင်သော်လည်း ၎င်းသည် အဆိုပါကိစ္စများကိုကိုင်တွယ်ရန် XLST အတွက် JavaScript ကို အတုအယောင်အဖြစ် မည်သို့အသုံးပြုရမည်ကို သိရှိပါသည်။ JavaScript ၏ Saxon XSLT၊ XQUERY နှင့် XPath အင်ဂျင်များသို့ ပို့တ်ဖြစ်သည့် SaxonJS ကို အသုံးပြုသင့်ကြောင်း အကြံပြုချက်များကိုလည်း ကျွန်ုပ်တွေ့ခဲ့ရသည်။ အထူးသဖြင့် Saxon-JS သည် ဤသတ်မှတ်ချက်များ၏ လက်ရှိဗားရှင်းကို အကောင်အထည်ဖော်နေသောကြောင့် ၎င်းသည် စိတ်ဝင်စားဖွယ်ကောင်းသော အိုင်ဒီယာတစ်ခုဖြစ်ပြီး၊ XPath သို့မဟုတ် XSLT ဗားရှင်း 1.0 ထက်ကျော်လွန်သည့် မည်သည့်ဘရောက်ဆာမှ အကောင်အထည်ဖော်ခြင်းမရှိသည့်အပြင် XQuery ကို အကောင်အထည်မဖော်သည့်အရာလည်း မရှိပါ။ SaxonJS နှင့် Saxon အင်ဂျင်၏အခြားဗားရှင်းများနောက်ကွယ်ရှိ Saxonica ကုမ္ပဏီမှ Norm Tovey-Walsh ထံသို့ ကျွန်ုပ်ဆက်သွယ်ခဲ့သည်။ သူကပြောပါတယ် "မည်သည့်ဘရောက်ဆာရောင်းချသူမဆို SaxonJS ကိုဘရောက်ဆာတွင်ခေတ်မီ XML နည်းပညာများပေါင်းစပ်ခြင်းအတွက်အစမှတ်အဖြစ်အသုံးပြုရန်စိတ်ပါဝင်စားပါက၎င်းတို့နှင့်ဆွေးနွေးရန်ကျွန်ုပ်တို့စိတ်လှုပ်ရှားမိပါသည်။"—Norm Tovey-Walsh
ဒါပေမယ့်လည်း ထပ်ဖြည့်ထားပါတယ်- "SaxonJS ကို ၎င်း၏လက်ရှိပုံစံဖြင့် အသုံးပြု၍ မပြောင်းလဲသော browser build ထဲသို့ ချထည့်ခြင်းသည် စံပြချဉ်းကပ်မှုဖြစ်မည်ဟု တစ်စုံတစ်ယောက်မှ တွေးတောမိပါက ကျွန်ုပ် အလွန်အံ့အားသင့်မိပါသည်။ ဘရောက်ဆာရောင်းချသူတစ်ဦးသည် ၎င်းတို့ဘရောက်ဆာကို တည်ဆောက်ထားသောကြောင့် သဘာဝအားဖြင့် ကျွန်ုပ်တို့ 'ပြင်ပမှ' ပေါင်းစည်းမှုကို ပိုမိုနက်ရှိုင်းသောအဆင့်တွင် ချဉ်းကပ်နိုင်မည်ဖြစ်သည်။"— Norm Tovey-Walsh
Tovey-Walsh ၏မှတ်ချက်များသည် XSLT လျှော့စျေးကြေငြာခြင်းမပြုမီ တစ်ပတ်ခန့်အလိုတွင် ထွက်ပေါ်လာသည်ကို သတိပြုသင့်ပါသည်။ နိဂုံး ငါ ဆက်သွားနိုင်တယ်။ ဒါပေမယ့် ဒါက XPath ရဲ့ စွမ်းအားကို ပြသခဲ့ပြီး ကြီးကျယ်တဲ့ အရာတွေကို အောင်မြင်ဖို့အတွက် အဲဒါကို ဘယ်လိုအသုံးပြုရမလဲဆိုတာ သရုပ်ပြတဲ့ ဥပမာများစွာပေးထားတယ်လို့ မျှော်လင့်ပါတယ်။ ၎င်းသည် ယနေ့ခေတ်တွင် အသုံးဝင်မှုများစွာရှိနေဆဲဖြစ်သော ဘရောက်ဆာအစုအတွင်းရှိ နည်းပညာအဟောင်းများ၏ ပြီးပြည့်စုံသော ဥပမာတစ်ခုဖြစ်သည်၊ ၎င်းသည် တည်ရှိနေကြောင်း သင်ဘယ်တုန်းကမှ မသိခဲ့ပါက သို့မဟုတ် ၎င်းကိုရောက်ရှိရန် မစဉ်းစားခဲ့လျှင်ပင်။ နောက်ထပ်စာဖတ်ခြင်း။
Maroun Ayli၊ Youssef Bakouny၊ Nader Jalloul နှင့် Rima Kilany တို့၏ "အလိုအလျောက်ဝက်ဘ်စမ်းသပ်မှုများကို သဘာဝဘာသာစကားဖြင့် ခံနိုင်ရည်အားကို မြှင့်တင်ခြင်း" (ACM Digital Library) သည် ခံနိုင်ရည်အားရှိသော စမ်းသပ်မှုများကို ရေးသားရန်အတွက် XPath နမူနာများကို ပေးပါသည်။ XPath (MDN) XPath အလုပ်လုပ်ပုံ အသေးစိတ်ကို နည်းပညာဆိုင်ရာ ရှင်းလင်းချက်တစ်ခု လိုချင်ပါက ဤသည်မှာ စတင်ရန် အကောင်းဆုံးနေရာတစ်ခုဖြစ်သည်။ XPath Tutorial (ZVON) နမူနာများစွာနှင့် ရှင်းလင်းသောရှင်းပြချက်များကြောင့် ကျွန်ုပ်၏ကိုယ်ပိုင်သင်ယူမှုတွင် အထောက်အကူအရှိဆုံးဖြစ်ရန် ဤသင်ခန်းစာကို ကျွန်ုပ်တွေ့ရှိခဲ့ပါသည်။ XPather ဤအပြန်အလှန်အကျိုးသက်ရောက်သောကိရိယာသည် သင့်အား ကုဒ်ဖြင့် တိုက်ရိုက်အလုပ်လုပ်နိုင်စေပါသည်။
