Ua lōʻihi wau i ka hoʻomohala ʻana i mua e ʻike i kahi ʻano i nā makahiki: hana nā mea hoʻomohala ʻōpio me kahi paradigm hou o ka hoʻolālā ʻana me ka ʻike ʻole i ka pōʻaiapili mōʻaukala. ʻOiaʻiʻo, maopopo loa ka ʻike ʻole i kekahi mea. He wahi nui loa ka pūnaewele me nā ʻano loea like ʻole a me nā mea kūikawā, a ʻaʻole maopopo mākou i ka mea a mākou i ʻike ʻole ai. ʻO ke aʻo ʻana ma kēia kahua kahi huakaʻi hoʻomau ma mua o kahi mea i hana hoʻokahi a pau. ʻO ka hihia: Nīnau kekahi o kaʻu hui inā hiki ke haʻi inā e hoʻokele ana nā mea hoʻohana mai kahi ʻaoʻao ma ka UI. Ua kuhikuhi au i ka hanana JavaScript ma mua o ka wehe ʻana. Akā ʻo ka poʻe i hoʻoponopono i kēia ma mua e ʻike hiki i kēia no ka mea ua paʻi ʻia lākou me nā mākaʻikaʻi e pili ana i ka ʻikepili i mālama ʻole ʻia ma nā pūnaewele ʻē aʻe, kahi maʻamau ma mua o ka unload. Ua kuhikuhi aku au i ka pageHide and visibilityChange hanana i koʻu hoa hana no ke ana maikai. Pehea wau i ʻike ai e pili ana i kēlā? No ka mea, ua puka mai ia ma kekahi papahana ʻē aʻe, ʻaʻole no kaʻu aʻo ʻana iā ia i ka wā e aʻo mua ai i ka JavaScript. ʻO ka ʻoiaʻiʻo ke kū nei nā papa hana mua o kēia manawa ma luna o nā poʻohiwi o nā ʻenehana loea i mua o lākou. Hoʻopau lākou i nā hana hoʻomohala, pinepine no ka ʻike hoʻomohala ʻoi aku ka maikaʻi e hōʻemi, a i ʻole e hoʻopau i ka pono e ʻike a hoʻopā paha i nā manaʻo koʻikoʻi mua e pono ai nā kānaka a pau e ʻike. E noʻonoʻo i ka CSS Object Model (CSSOM). Hiki paha iā ʻoe ke manaʻo e loaʻa i kekahi mea e hana ana ma CSS a me JavaScript he pūʻulu o ka ʻike CSSOM lima, akā ʻaʻole ia ka hihia. Aia kahi papahana React no kahi pūnaewele e-commerce aʻu i hana ai ma kahi e pono ai mākou e hoʻouka i kahi stylesheet no ka mea hāʻawi uku i koho ʻia i kēia manawa. ʻO ka pilikia, ʻo ka hoʻouka ʻana o ka stylesheet ma kēlā me kēia ʻaoʻao i ka wā i makemake maoli ʻia ma kahi ʻaoʻao kikoʻī. ʻAʻole i hoʻouka ka mea hoʻomohala i kahi stylesheet me ka ikaika. Eia hou, maopopo loa kēia i ka wā e wehe ai ʻo React i ke ala kuʻuna āu i hiki ai. ʻAʻole paha ʻo CSSOM kahi mea āu e pono ai i kāu hana o kēlā me kēia lā. Akā, pono paha ʻoe e launa pū me ia i kekahi manawa, ʻoiai i kahi manawa hoʻokahi. Ua hoʻoikaika kēia mau ʻike iaʻu e kākau i kēia ʻatikala. Nui nā hiʻohiʻona pūnaewele a me nā ʻenehana i ka nahele i hiki ʻole iā ʻoe ke hoʻopā pololei i kāu hana i kēlā me kēia lā. He mea hou paha ʻoe i ka hoʻomohala pūnaewele a ʻaʻole ʻoe i ʻike iā lākou no ka mea ua paʻa ʻoe i ka abstraction o kahi kikoʻī kikoʻī ʻaʻole pono ʻoe e ʻike hohonu, a i ʻole. Ke kamaʻilio nei au e pili ana i ka XML, ka mea a mākou i ʻike ai he ʻōlelo kahiko ʻaʻole like loa me HTML. Ke hāpai nei au i kēia ma muli o nā kūkākūkā WHATWG hou e hōʻike ana e hoʻoneʻe ʻia kahi puʻupuʻu koʻikoʻi o ka waihona XML i kapa ʻia ʻo XSLT programming mai nā polokalamu kele pūnaewele. ʻO kēia ke ʻano o ka ʻenehana kahiko i loaʻa iā mākou no nā makahiki i hiki ke hoʻohana ʻia no kahi mea e like me ke kūlana CSSOM i loko o kaʻu hui. Ua hana ʻoe me XSLT ma mua? E ʻike inā hilinaʻi nui mākou i kēia ʻenehana kahiko a hoʻohana i kāna mau hiʻohiʻona ma waho o ka pōʻaiapili o XML e hoʻoponopono i nā pilikia o ka honua i kēia mau lā. XPath: Ke kikowaena API ʻO ka ʻenehana XML koʻikoʻi i ʻoi aku ka maikaʻi ma waho o kahi hiʻohiʻona XML pololei ʻo XPath, he ʻōlelo nīnau e hiki ai iā ʻoe ke ʻimi i kekahi node a i ʻole nā hiʻohiʻona i loko o kahi kumulāʻau markup me hoʻokahi kumu kumu. Loaʻa iaʻu kahi aloha pilikino no XSLT, akā hilinaʻi hoʻi ia ma XPath, a pono e waiho ʻia ke aloha pilikino ma ke kūlana koʻikoʻi. ʻO ka hoʻopaʻapaʻa no ka wehe ʻana iā XSLT ʻaʻole ia e haʻi i ka XPath, no laila manaʻo wau ua ʻae ʻia. Maikaʻi kēlā no ka mea ʻo XPath ke kikowaena a koʻikoʻi loa API i kēia hui o nā ʻenehana, ʻoiai ke hoʻāʻo nei e ʻimi i kahi mea e hoʻohana ai ma waho o ka hoʻohana maʻamau XML. He mea nui ia no ka mea, ʻoiai hiki ke hoʻohana ʻia nā mea koho CSS e ʻimi i ka hapa nui o nā mea i kāu ʻaoʻao, ʻaʻole hiki iā lākou ke loaʻa iā lākou āpau. Eia kekahi, ʻaʻole hiki ke hoʻohana ʻia nā mea koho CSS e ʻimi i kahi mea e pili ana i kona kūlana i kēia manawa i ka DOM. Hiki iā XPath. I kēia manawa, ʻike paha kekahi o ʻoukou e heluhelu nei iā XPath, a ʻaʻole paha kekahi. He wahi maikaʻi loa ʻo XPath o ka ʻenehana, a ʻaʻole hiki iaʻu ke aʻo maoli i nā kumu āpau a hōʻike pū iā ʻoe i nā mea maikaʻi e hana ai me ia i loko o kahi ʻatikala e like me kēia. Ua ho'āʻo maoli wau e kākau i kēlā ʻatikala, akā ʻaʻole i hele ka awelika o ka Smashing Magazine ma mua o 5,000 mau huaʻōlelo. Ua ʻoi aku au ma mua o2,000 mau huaʻōlelo aʻo ka hapalua wale nō o nā kumu. No laila, e hoʻomaka wau e hana i nā mea ʻoluʻolu me XPath a hāʻawi iā ʻoe i kekahi mau loulou i hiki iā ʻoe ke hoʻohana no nā kumu kumu inā ʻike ʻoe i kēia mea hoihoi. Hoʻohui i ka XPath a me CSS Hiki i ka XPath ke hana i nā mea he nui ʻaʻole hiki i nā mea koho CSS ke nīnau i nā mea. Akā hiki i nā mea koho CSS ke hana i kekahi mau mea i hiki ʻole iā XPath, ʻo ia hoʻi, nā nīnau nīnau ma ka inoa papa.
CSS XPath .myClass /*[loaʻa(@class, "myClass")]
Ma kēia laʻana, nīnau ʻo CSS i nā mea i loaʻa kahi inoa papa .myClass. I kēia manawa, nīnau ka hiʻohiʻona XPath i nā mea i loaʻa i kahi papa ʻano me ke kaula "myClass". Ma nā huaʻōlelo ʻē aʻe, koho ʻo ia i nā mea me ka myClass i kekahi ʻano, me nā mea me ka .myClass classname - a me nā mea me "myClass" i ke kaula, e like me .myClass2. ʻOi aku ka laulā o XPath ma ia ʻano. No laila, ʻaʻole. ʻAʻole wau e manaʻo e hoʻolei mākou i ka CSS a hoʻomaka e koho i nā mea āpau ma o XPath. ʻAʻole kēlā ke kumu. ʻO ka manaʻo, hiki iā XPath ke hana i nā mea hiki ʻole iā CSS a hiki ke hoʻohana nui ʻia, ʻoiai he ʻenehana kahiko ia i loko o ka waihona pūnaewele a ʻike ʻole paha i ka ʻike mua. E hoʻohana pū i nā ʻenehana ʻelua ʻaʻole wale no ka mea hiki iā mākou, akā no ka mea e aʻo mākou i kekahi mea e pili ana iā XPath i ke kaʻina hana, e hana i kahi mea hana ʻē aʻe i kāu waihona - kahi āu i ʻike ʻole ai aia ma laila a pau! ʻO ka pilikia, ʻaʻole kūpono ke ʻano document.evaluate a JavaScript a me nā ʻano koho hulina like ʻole a mākou e hoʻohana ai me nā CSS API no JavaScript. Ua hana au i ka API noiʻi kūpono e hoʻomaka ai mākou, ʻoiai he ʻoiaʻiʻo, ʻaʻole wau i hoʻokomo nui i ka noʻonoʻo ʻana no ka mea he haʻalele ia i kā mākou e hana nei. Eia kahi hiʻohiʻona hana maʻalahi o kahi mea hana noiʻi hiki ke hoʻohana hou ʻia: E ʻike i ka Pen queryXPath [kua ʻia] e Bryan Rasmussen. Ua hoʻohui au i ʻelua ala ma ka mea palapala: queryCSSSelectors (ʻo ia ka querySelectorAll) a me queryXPaths. Hoʻihoʻi kēia mau mea ʻelua i kahi mea queryResults:
{ ʻAno hulina: nā nodes | kaula | helu | boolean, Nā hualoaʻa: kekahi [] // mau mea html, xml mau mea, kaula, helu, booleans, queryCSSSelectors: (query: string, hoʻololi: boolean) => queryResults, queryXpaths: (query: string, hoʻololi: boolean) => queryResults }
Ke holo nei nā hana queryCSSSelectors a me queryXpaths i ka nīnau āu e hāʻawi ai iā lākou ma luna o nā mea i loko o ka pae hopena, ʻoiai ke ʻano o nā ʻano nodes ka hopena. Inā ʻaʻole, e hoʻihoʻi ia i kahi queryResult me kahi ʻāpana ʻole a me kahi ʻano o nā nodes. Inā hoʻonohonoho ʻia ka waiwai hoʻololi i ka ʻoiaʻiʻo, e hoʻololi nā hana i kā lākou queryResults. ʻAʻole pono e hoʻohana ʻia kēia ma kahi ʻano hana. Ke hana nei au i kēia ala maʻemaʻe e hōʻike i nā hopena like ʻole o ka hoʻohana pū ʻana i nā API nīnau ʻelua. Nā nīnau hoʻohālike Makemake wau e hōʻike i kekahi mau hiʻohiʻona o nā nīnau XPath like ʻole e hōʻike ana i kekahi o nā mea ikaika e hiki ai iā lākou ke hana a pehea e hiki ai ke hoʻohana ʻia ma kahi o nā ala ʻē aʻe. ʻO ka laʻana mua he //li/text(). Huli kēia i nā mea li a hoʻihoʻi i kā lākou mau node kikokikona. No laila, inā mākou e nīnau i kēia HTML:
- kahi
- ʻelua
- ʻekolu
…eia ka mea i hoihoiia:
{"queryType":"xpathEvaluate","results":["one","ʻelua","ʻekolu"],"resultType":"string"}
I nā huaʻōlelo ʻē aʻe, loaʻa iā mākou kēia ʻano: ["hoʻokahi","ʻelua","ʻekolu"]. ʻO ka mea maʻamau, e nīnau ʻoe i nā mea liʻi e loaʻa i kēlā, e hoʻohuli i ka hopena o kēlā nīnau i kahi laha, palapala i ka array, a hoʻihoʻi i ka node kikokikona o kēlā me kēia mea. Akā hiki iā mākou ke hana maʻalahi me XPath: document.queryXPaths("//li/text()").nā hopena.
E hoʻomaopopo i ke ala e loaʻa ai kahi node kikokikona e hoʻohana i ka kikokikona (), e like me ka pūlima hana - a ʻo ia. Hoʻihoʻi ia i ka node kikokikona o kahi mea. I kā mākou laʻana, aia ʻekolu mau mea li i ka markup, aia kēlā me kēia me nā kikokikona ("hoʻokahi", "ʻelua", a me "ʻekolu").
E nānā i kekahi laʻana hou o kahi nīnau kikokikona (). E noʻonoʻo ʻo kēia kā mākou markup:
E kākau i kahi nīnau e hoʻihoʻi i ka waiwai waiwai href: document.queryXPaths("//a[text() = 'E ʻeʻe']/@href").nā hopena.
He nīnau XPath kēia ma ka palapala o kēia manawa, e like me ka laʻana hope loa, akā i kēia manawa ke hoʻihoʻi nei mākou i ke ʻano href o kahi loulou (kahi mea) i loaʻa ka kikokikona "Sign In". Ua hoʻi maoliʻO ka hopena ["/login.html"]. Hōʻike manaʻo o nā hana XPath Aia kekahi mau hana XPath, a ʻaʻole paha ʻoe i kamaʻāina iā lākou. Nui koʻu manaʻo, pono e ʻike e pili ana, me kēia mau mea:
hoʻomaka-meInā hoʻomaka kahi kikokikona me kekahi laʻana kikokikona ʻē aʻe, hoʻomaka-me(@href, 'http:') e hoʻi i ka ʻoiaʻiʻo inā hoʻomaka kahi ʻano href me http:. Aia i loko o kahi kikokikona kekahi laʻana kikokikona ʻē aʻe, loaʻa (text(), "Smashing Magazine") e hoʻi ʻoiaʻiʻo inā loaʻa i kahi node kikokikona nā huaʻōlelo "Smashing Magazine" i loko o ia wahi. countHoʻihoʻi i ka helu o ka nui o nā pāʻani i kahi nīnau. No ka laʻana, helu (//*[starts-with(@href, 'http:']) e hoʻihoʻi i ka helu o ka nui o nā loulou i loko o ka node pōʻaiapili i loaʻa nā mea me kahi ʻano href i loaʻa ka kikokikona e hoʻomaka ana me ka http:. substringWorks like JavaScript substring, koe wale nō ʻoe e hāʻawi i ke kaula i mea hoʻopaʻapaʻa. No ka laʻana, substring("my text", 2, 4) returns "y t". substring-beforeHoʻihoʻi i ka ʻāpana o kahi kaula ma mua o kekahi kaula. No ka laʻana, hoʻihoʻi ʻo substing-before("my text", " ") "my". Pēlā nō, hoʻihoʻi ka substring-before("hi", "bye") i kahi kaula ʻole. substring-afterHoʻihoʻi i ka ʻāpana o kahi kaula ma hope o kekahi kaula. No ka laʻana, hoʻihoʻi ka substing-after("my text", " ") "text". Pēlā nō, hoʻihoʻi ka substring-after("hi", "bye") i kahi kaula ʻole. normalize-spaceHoʻihoʻi i ke kaula hoʻopaʻapaʻa me ke keʻokeʻo i hoʻomaʻamaʻa ʻia e ka wehe ʻana i ke alakaʻi a me ke kuapo keʻokeʻo a hoʻololi i nā kaʻina o nā huaʻōlelo keʻokeʻo i hoʻokahi hakahaka. notReturns a boolean ʻoiaʻiʻo inā he wahaheʻe ka hoʻopaʻapaʻa, a i ʻole he wahaheʻe. ʻoiaʻiʻoHoʻi i ka boolean ʻoiaʻiʻo. falseReturns boolean false. concatKa mea like me JavaScript concat, koe naʻe ʻaʻole ʻoe e holo ma ke ʻano he ala ma kahi kaula. Akā, hoʻokomo ʻoe i nā kaula a pau āu e makemake ai e hoʻohui. string-longth ʻAʻole like kēia me JavaScript string-longth, akā e hoʻihoʻi i ka lōʻihi o ke kaula i hāʻawi ʻia ma ke ʻano he hoʻopaʻapaʻa. Lawe ʻo translateThis i kahi kaula a hoʻololi i ka hoʻopaʻapaʻa ʻelua i ka manaʻo kolu. No ka laʻana, unuhi ("abcdef", "abc", "XYZ") nā hoʻopuka XYZdef.
Ma waho aʻe o kēia mau hana XPath ponoʻī, aia kekahi mau hana ʻē aʻe e hana like me kā lākou mau hoa JavaScript - a i ʻole nā mea like ʻole i kekahi ʻōlelo papahana - e ʻike paha ʻoe i ka pono, e like me ka papahele, ke kaupaku, ka pōʻai, ka huina, a pēlā aku. Hōʻike kēia demo i kēlā me kēia o kēia mau hana: E ʻike i nā hana helu Pen XPath na Bryan Rasmussen. E hoʻomanaʻo, e like me ka hapa nui o nā hana hoʻopunipuni string, lawe ka nui o nā mea helu i hoʻokahi hoʻokomo. ʻO kēia, ʻoiaʻiʻo, no ka mea e hoʻohana ʻia lākou no ka nīnau ʻana, e like me ka hiʻohiʻona XPath hope loa: //li[palapala(text()) > 250]/@val
Inā ʻoe e hoʻohana iā lākou, e like me ka hapa nui o nā hiʻohiʻona, e hoʻopau ʻoe i ka holo ʻana ma ka node mua e pili ana i ke ala. Aia kekahi mau hana hoʻololi ʻano pono e pale aku ʻoe no ka mea ua loaʻa iā JavaScript kāna mau pilikia hoʻololi ʻano ponoʻī. Akā, hiki i kekahi manawa ke makemake ʻoe e hoʻololi i kahi kaula i kahi helu i mea e nānā ai i kahi helu ʻē aʻe. ʻO nā hana e hoʻonohonoho i ke ʻano o kekahi mea he boolean, helu, string, a me ka node. ʻO kēia nā mea koʻikoʻi XPath datatypes. A e like me kāu e noʻonoʻo ai, hiki ke hoʻohana ʻia ka hapa nui o kēia mau hana ma nā datatypes ʻaʻole DOM nodes. No ka laʻana, lawe ka substring-after i kahi kaula e like me kā mākou i uhi mua ai, akā hiki paha ke kaula mai kahi ʻano href. He kaula wale nō paha ia:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
ʻIke loa, e hoʻihoʻi mai kēia hiʻohiʻona iā mākou i ka pae hopena e like me ["honua"]. No ka hōʻike ʻana i kēia ma ka hana, ua hana wau i kahi ʻaoʻao demo me ka hoʻohana ʻana i nā hana e kūʻē i nā mea ʻaʻole nodes DOM: E ʻike i ka Pen queryXPath [kua ʻia] e Bryan Rasmussen. Pono ʻoe e hoʻomaopopo i ka hiʻohiʻona kamahaʻo o ka hana unuhi, ʻo ia hoʻi inā loaʻa iā ʻoe kahi ʻano ma ka hoʻopaʻapaʻa ʻelua (ʻo ia hoʻi, ka papa inoa o nā huaʻōlelo āu e makemake ai e unuhi) a ʻaʻohe ʻano like ʻole e unuhi ai, e wehe ʻia kēlā ʻano mai ka hoʻopuka. No laila, ʻo kēia:
unuhi('Aloha, ʻo Inigo Montoya koʻu inoa, pepehi ʻoe i koʻu makuakāne, hoʻomākaukau e make','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…ka hopena i ke kaula, me nā hakahaka: [" * * ** "]
ʻO ia ke ʻano o ka unuhi ʻana o ka huaʻōlelo “a” i kahi asterisk (*), akā ʻo kēlā me kēia ʻano ʻē aʻe i loaʻa ʻole kahi unuhi i hāʻawi ʻia i ke kaula i hoʻopaʻa ʻia ua wehe loa ʻia. ʻO ke keʻokeʻo wale nō kā mākou i koema waena o nā huaʻōlelo “a” i unuhi ʻia. Eia hou, keia ninau:
unuhi('Aloha, ʻo Inigo Montoya koʻu inoa, pepehi ʻoe i koʻu makuakāne, hoʻomākaukau e make','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
… ʻaʻohe pilikia a hoʻopuka i kahi hopena e like me kēia:
"***** ** **** ** ***** ******* *** ****** ** ****** ****** ** ***"
Hiki iā ʻoe ke ʻike ʻaʻohe ala maʻalahi ma JavaScript e hana pololei i ka hana unuhi XPath, ʻoiai no nā hihia hoʻohana he nui, hiki ke hoʻololi iāAll me nā ʻōlelo maʻamau. Hiki iā ʻoe ke hoʻohana i ke ala like aʻu i hōʻike ai, akā ʻo ia ka suboptimal inā makemake ʻoe e unuhi i nā kaula. Hoʻopili kēia demo i ka hana unuhi a XPath e hāʻawi i kahi mana JavaScript: E ʻike i ka hana unuhi ʻo Pen na Bryan Rasmussen. Ma hea ʻoe e hoʻohana ai i kēia mea? E noʻonoʻo i ka hoʻopili ʻana iā Caesar Cipher me kahi offset ʻekolu wahi (e laʻa.
unuhi ("Ke hoʻolālā nei ʻo Kaisara e hele i ka Rubicon!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
ʻO ka kikokikona hoʻokomo "Ke hoʻolālā nei ʻo Kaisara e hele i ka Rubicon!" nā hualoaʻa ma “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” No ka hāʻawi ʻana i kahi hiʻohiʻona wikiwiki o nā mea like ʻole, ua hana wau i kahi hana metala e lawe i kahi hoʻokomo kaula a hoʻohana i kahi hana unuhi e hoʻihoʻi i ka kikokikona, me nā huaʻōlelo āpau e lawe i nā umlauts. E ʻike i ka hana metala Pen na Bryan Rasmussen.
const metala = (str) => { huli unuhi(str, "AOUaou","ÄÖÜäöü"); }
A inā hāʻawi ʻia ka huaʻōlelo "Motley Crue rules, rock on dudes!", e hoʻihoʻi mai "Mötley Crüe rüles, röck ön düdes!" ʻO ka ʻoiaʻiʻo, loaʻa paha nā ʻano parody āpau o kēia hana. Inā ʻo ʻoe kēlā, a laila pono kēia ʻatikala TVTropes e hāʻawi iā ʻoe i ka hoʻoikaika nui. Ke hoʻohana nei i CSS me XPath E hoʻomanaʻo i kā mākou kumu nui no ka hoʻohana ʻana i nā mea koho CSS me XPath: maopopo loa ʻo CSS i ke ʻano o ka papa, akā ʻo ka mea maikaʻi loa hiki iā ʻoe ke hana me XPath ʻo ia ka hoʻohālikelike ʻana i ke ʻano o ka papa. E hana ia i ka nui o nā hihia. Akā, inā e holo ana ʻoe i kahi kūlana, e ʻōlelo, ua hana kekahi i nā papa i kapa ʻia ʻo .primaryLinks a me .primaryLinks2 a ke hoʻohana nei ʻoe iā XPath e kiʻi i ka papa .primaryLinks, a laila e loaʻa paha ʻoe i nā pilikia. ʻOiai ʻaʻohe mea lapuwale e like me ia, e hoʻohana paha ʻoe iā XPath. Akā, ke kaumaha nei au i ka hōʻike ʻana ua hana au ma nā wahi i hana ai nā kānaka i kēlā ʻano hana lapuwale. Eia kekahi demo e hoʻohana pū ana me CSS a me XPath. Hōʻike ia i ka mea e hana ai ke hoʻohana mākou i ke code e holo i kahi XPath ma kahi node pōʻaiapili ʻaʻole ia ka node o ka palapala. E ʻike i ka Pen css a me ka xpath i hui pū ʻia e Bryan Rasmussen. ʻO ka nīnau CSS ʻo .relatedarticles a, e kiʻi ana i nā mea ʻelua a i loko o kahi div i hāʻawi ʻia i kahi papa .relatedarticles. Ma hope o kēlā, ʻekolu mau nīnau "ʻino", ʻo ia hoʻi, nā nīnau i hana ʻole i ka mea a mākou e makemake ai e hana i ka wā e holo ai me kēia mau mea e like me ka node pōʻaiapili. Hiki iaʻu ke wehewehe i ke kumu o ko lākou ʻano ʻokoʻa ma mua o kou manaʻo. ʻO nā nīnau maikaʻi ʻole ʻekolu i nīnau ʻia:
//text(): Hoʻihoʻi i nā kikokikona a pau i loko o ka palapala. //a/text(): Hoʻihoʻi i nā kikokikona a pau i loko o nā loulou i ka palapala. ./a/text(): ʻAʻohe hopena.
ʻO ke kumu o kēia mau hopena ʻoiai ʻo kāu pōʻaiapili he mau mea i hoʻihoʻi ʻia mai ka nīnau CSS, // e kūʻē i ka palapala holoʻokoʻa. ʻO kēia ka ikaika o XPath; ʻAʻole hiki iā CSS ke hele mai kahi node a hiki i kahi kupuna a i kahi kaikaina o kēlā kupuna, a hele i lalo i kahi mamo a kēlā kaikaina. Akā hiki iā XPath. I kēia manawa, nīnau ʻo ./ i nā keiki o ka node o kēia manawa, kahi e hōʻike ai ke kiko (.) i ka node o kēia manawa, a ʻo ka slash mua (/) e hōʻike ana i ka hele ʻana i kekahi node keiki - inā he ʻano, element, a i ʻole kikokikona e hoʻoholo ʻia e ka ʻaoʻao aʻe o ke ala. Akā, ʻaʻohe keiki i koho ʻia e ka nīnau CSS, no laila ʻaʻole e hoʻihoʻi mai kēlā nīnau. ʻEkolu mau nīnau maikaʻi i kēlā demo hope loa:
.//text(), ./text(), normalize-space(./text()).
Hōʻike ka hulina normalize-space i ka hoʻohana ʻana i ka hana XPath, akā hoʻoponopono pū kekahi pilikia i loko o nā nīnau ʻē aʻe. Hoʻonohonoho ʻia ka HTML penei:
Ke ho'āʻo ʻana i kāu hiʻohiʻona me ka Selenium WebDriver
Hoʻihoʻi ka nīnau i kahi hānai laina ma ka hoʻomaka a me ka hopena o ka node kikokikona,a hoʻopau ka normalize-space i kēia. Ke hoʻohana nei i kekahi hana XPath e hoʻihoʻi i kahi mea ʻē aʻe ma mua o ka boolean me kahi komo XPath pili i nā hana ʻē aʻe. Hōʻike kēia demo i kekahi mau laʻana: E ʻike i nā hiʻohiʻona hana ʻo Pen xpath na Bryan Rasmussen. Hōʻike ka laʻana mua i kahi pilikia āu e makaʻala ai. ʻOiaʻiʻo, ʻo kēia code:
document.queryXPaths("substring-after(//a/@href,'https://')");
…hoʻihoʻi i hoʻokahi kaula:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
He kūpono ia, ʻeā? ʻAʻole hoʻihoʻi kēia mau hana i nā arrays akā i nā kaula hoʻokahi a i ʻole nā helu hoʻokahi. ʻO ka holo ʻana i ka hana ma nā wahi a pau me nā hopena he nui wale nō ka hopena mua. Hōʻike ka hopena ʻelua i kā mākou makemake maoli:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
ʻO ia ka mea e hoʻihoʻi i kahi ʻano o nā kaula ʻelua:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
Hiki ke hoʻopili ʻia nā hana XPath e like me nā hana ma JavaScript. No laila, inā ʻike mākou i ka hoʻolālā URL Smashing Magazine, hiki iā mākou ke hana i kēia aʻe (e ʻōlelo ʻia me ka hoʻohana ʻana i nā literals template): `unuhi( pūnāwai ( substring-after(./@href, ‘www.smashingmagazine.com/') ,9), '/','')`
Ke lilo nei kēia i mea paʻakikī a hiki i ka mea e pono ai nā manaʻo e wehewehe ana i kāna hana: e lawe i ka URL a pau mai ka waiwai href ma hope o www.smashingmagazine.com/, e wehe i nā huaʻōlelo ʻeiwa mua, a laila e unuhi i ka slash mua (/) i mea ʻole i mea e hoʻopau ʻia ai ka slash hope hope. ʻO ka pae i hopena:
["feature-testing-selenium-webdriver","automated-test-results-improve-accessibility"]
Nā hihia hoʻohana XPath hou aʻe Hiki i ka XPath ke alohilohi i ka hoʻāʻo. ʻAʻole paʻakikī ke kumu e ʻike ai, no ka mea hiki ke hoʻohana ʻia ʻo XPath e kiʻi i kēlā me kēia mea i ka DOM, mai kēlā me kēia kūlana i ka DOM, akā ʻaʻole hiki iā CSS. ʻAʻole hiki iā ʻoe ke helu i nā papa CSS e kūpaʻa mau ana i nā ʻōnaehana kūkulu hou, akā me XPath, hiki iā mākou ke hana i nā pāʻani ʻoi aku ka ikaika e pili ana i ke ʻano o ka kikokikona o kahi mea, me ka nānā ʻole i ka hoʻololi ʻana o ka hoʻolālā DOM. Aia nā noiʻi e pili ana i nā ʻenehana e ʻae iā ʻoe e hana i nā hoʻokolohua XPath resilient. ʻAʻohe mea i ʻoi aku ka maikaʻi ma mua o ka pau ʻana o nā hoʻāʻo a hāʻule ʻole no ka mea ʻaʻole hana hou kahi mea koho CSS no ka mea ua kapa hou ʻia a wehe ʻia paha kekahi mea. He mea maikaʻi loa ʻo XPath i ka ʻohi ʻana i nā mea huli. Aia ma mua o hoʻokahi ala e hoʻohana ai i nā nīnau XPath e hoʻohālikelike i kahi mea. Pēlā nō me CSS. Akā, hiki i nā nīnau XPath ke ʻimi i nā mea ma ke ala ʻoi aku ka manaʻo e kaupalena ʻia ka mea e hoʻihoʻi ʻia, e ʻae iā ʻoe e ʻimi i kahi pāʻani kikoʻī kahi i hiki ai ke hoʻohālikelike ʻia. No ka laʻana, hiki iā mākou ke hoʻohana iā XPath e hoʻihoʻi i kahi mea h2 kikoʻī i loaʻa i loko o kahi div e hahai koke ana i kahi div kaikunāne i loaʻa i kahi mea kiʻi keiki me kahi ʻano data-testID = "leader" ma luna:
ʻaʻole loaʻa kēia poʻomanaʻo
Mai loaʻa kēia poʻomanaʻo
Ke poʻo no ke kiʻi alakaʻi
ʻO kēia ka nīnau: document.queryXPaths(` //div[ hahai-kaikunāne::div[1] /img[@data-testID='alakaʻi'] ] /h2/ kikokikona() ʻ);
E hāʻule i kahi demo e ʻike pehea e hui pū ai nā mea a pau: E ʻike i ka Pen Complex H2 Query [forked] na Bryan Rasmussen. No laila, ʻae. Nui nā ala hiki i kekahi mea i ka hoʻāʻo me XPath. XSLT 1.0 Hoʻopau Ua ʻōlelo mua wau i ka hoʻolālā ʻana o ka hui Chrome i ka wehe ʻana i ke kākoʻo XSLT 1.0 mai ka polokalamu kele pūnaewele. He mea koʻikoʻi ia no ka mea, hoʻohana ʻo XSLT 1.0 i ka hoʻolālā e pili ana i ka XML no ka hoʻololi ʻana i ka palapala, ʻo ia hoʻi, hilinaʻi iā XPath 1.0, ʻo ia ka mea i loaʻa i ka hapa nui o nā polokalamu kele pūnaewele. Ke hana ʻia kēlā, e nalowale mākou i kahi mea nui o XPath. Akā, hāʻawi ʻia i ka maikaʻi o XPath no ka kākau ʻana i nā hoʻokolohua, ʻike wau ʻaʻole paha e nalowale ʻo XPath holoʻokoʻa i kekahi manawa koke. ʻO kēlā ʻōlelo, ua ʻike au i ka makemake o ka poʻe i kahi hiʻohiʻona ke lawe ʻia. A he ʻoiaʻiʻo nō ia i ka hihia o XSLT 1.0 i hoʻopau ʻia. Aia kahi kūkākūkā holoʻokoʻa e hana nei ma Hacker News i piha i nā hoʻopaʻapaʻa kūʻē i ka deprecation. ʻO ka pou iho he kumu hoʻohālike maikaʻi loa ia o ka hoʻokumu ʻana i kahi hoʻolālā blogging me XSLT. ʻO ʻoeHiki iā ʻoe ke heluhelu i ke kūkākūkā no ʻoe iho, akā e komo i ka pehea e hoʻohana ʻia ai ʻo JavaScript ma ke ʻano he shim no XLST e mālama i kēlā mau hihia. Ua ʻike nō hoʻi au i nā manaʻo e hoʻohana nā mākaʻikaʻi iā SaxonJS, he awa ia i nā ʻenekini Saxon XSLT, XQUERY, a me XPath o JavaScript. He manaʻo hoihoi kēlā, ʻoiai ʻo Saxon-JS e hoʻokō nei i ka mana o kēia mau kikoʻī, ʻoiai ʻaʻohe polokalamu kele e hoʻokō i kekahi mana o XPath a i ʻole XSLT ma mua o 1.0, a ʻaʻohe mea nāna e hoʻokō XQuery. Ua hele au iā Norm Tovey-Walsh ma Saxonica, ka hui ma hope o SaxonJS a me nā mana ʻē aʻe o ka mīkini Saxon. Ua ʻōlelo ʻo ia: "Inā makemake kekahi mea kūʻai pūnaewele e lawe iā SaxonJS i wahi hoʻomaka no ka hoʻohui ʻana i nā ʻenehana XML hou i loko o ka polokalamu kele pūnaewele, hauʻoli mākou e kūkākūkā me lākou." - Norm Tovey-Walsh
Akā ua hoʻohui pū ʻia: "E kāhāhā nui wau inā manaʻo kekahi ʻo ka lawe ʻana iā SaxonJS i kona ʻano o kēia manawa a hoʻokuʻu iā ia i loko o ka polokalamu kele pūnaewele e hoʻololi ʻole ʻia ʻo ia ke ala kūpono. ʻO ka mea kūʻai pūnaewele pūnaewele, ma ke ʻano o ka hana ʻana i ka polokalamu kele pūnaewele, hiki ke hoʻokokoke i ka hoʻohui ʻana i kahi pae hohonu loa ma mua o ka hiki iā mākou 'mai waho'. " - Norm Tovey-Walsh
He mea pono e hoʻomaopopo i ka hiki ʻana o nā ʻōlelo a Tovey-Walsh ma kahi o hoʻokahi pule ma mua o ka hoʻolaha ʻana o ka XSLT. Ka hopena Hiki iaʻu ke hele mau. Akā ke manaʻolana nei au ua hōʻike kēia i ka mana o XPath a hāʻawi iā ʻoe i nā hiʻohiʻona he nui e hōʻike ana pehea e hoʻohana ai no ka hoʻokō ʻana i nā mea nui. He hiʻohiʻona maikaʻi loa ia o ka ʻenehana kahiko i loko o ka waihona polokalamu kele pūnaewele e loaʻa mau ana ka pono i kēia mau lā, ʻoiai inā ʻaʻole ʻoe i ʻike i ke ola ʻana a ʻaʻole paha i noʻonoʻo e loaʻa iā ia. Heluhelu hou
"E hoʻonui i ka Resiliency of Automated Web Tests with Natural Language" (ACM Digital Library) na Maroun Ayli, Youssef Bakouny, Nader Jalloul, a me Rima Kilany Hāʻawi kēia ʻatikala i nā hiʻohiʻona XPath he nui no ke kākau ʻana i nā hoʻokolohua kūpaʻa. XPath (MDN) He wahi maikaʻi kēia e hoʻomaka ai inā makemake ʻoe i ka wehewehe ʻenehana e wehewehe ana i ka hana ʻana o XPath. XPath Tutorial (ZVON) Ua loaʻa iaʻu he mea kōkua nui kēia kumu aʻo i kaʻu aʻo ʻana, mahalo i ka nui o nā laʻana a me nā wehewehe wehewehe. XPather ʻAe kēia mea hana pili iā ʻoe e hana pololei me ke code.
