איך האָבן שוין אין פראָנט-ענד אַנטוויקלונג לאַנג גענוג צו זען אַ גאַנג איבער די יאָרן: יינגער דעוועלאָפּערס ארבעטן מיט אַ נייַע פּאַראַדיגם פון פּראָגראַממינג אָן פארשטאנד דעם היסטארישן קאָנטעקסט פון עס. עס איז, פון קורס, גאנץ פאַרשטיייק צו נישט וויסן עפּעס. דער וועב איז אַ זייער גרויס אָרט מיט אַ פאַרשיידנקייַט פון סקילז און ספּעשאַלטיז, און מיר טאָן ניט שטענדיק וויסן וואָס מיר טאָן ניט וויסן. לערנען אין דעם פעלד איז אַ אָנגאָינג נסיעה אלא ווי עפּעס וואָס כאַפּאַנז אַמאָל און ענדס. פאַל אין פונט: עמעצער אין מיין מאַנשאַפֿט געפרעגט אויב עס איז מעגלעך צו זאָגן אויב יוזערז נאַוויגירן אַוועק פון אַ באַזונדער קוויטל אין די וי. איך האָב אָנגעוויזן די פריערדיקן אַנלאָוד געשעעניש פון JavaScript. אבער די וואס האָבן טאַקאַלד דעם פריער וויסן אַז דאָס איז מעגלעך ווייַל זיי האָבן שוין שלאָגן מיט אַלערץ וועגן אַנסאַווייטיד דאַטן אויף אנדערע זייטלעך, פֿאַר וואָס איידער אַנלאָוד איז אַ טיפּיש נוצן פאַל. איך אויך אנגעוויזן די PageHide און וויסיביליטי טוישן געשעענישן צו מיין קאָלעגע פֿאַר גוט מאָס. פון וואנעט האב איך געוואוסט דערפון? ווייַל עס געקומען אַרויף אין אן אנדער פּרויעקט, נישט ווייַל איך געלערנט זיך אויף עס ווען טכילעס לערנען דזשאַוואַסקריפּט. דער פאַקט איז אַז מאָדערן פראָנט-ענד פראַמעוואָרקס זענען שטייענדיק אויף די פּלייצעס פון די טעכנאָלאָגיע דזשייאַנץ וואָס פּריסידאַד זיי. זיי אַבסטראַקט אַנטוויקלונג פּראַקטיסיז, אָפט פֿאַר אַ בעסער דעוועלאָפּער דערפאַרונג וואָס ראַדוסאַז, אָדער אפילו ילימאַנייץ, די נויט צו וויסן אָדער אָנרירן וואָס טראַדישאַנאַלי געווען יקערדיק פראָנט-סוף קאַנסעפּס וואָס אַלעמען מיסטאָמע זאָל וויסן. באַטראַכטן די CSS Object Model (CSSOM). איר קען דערוואַרטן אַז ווער עס יז וואָס אַרבעט אין CSS און דזשאַוואַסקריפּט האט אַ פּלאַץ פון פּראַקטיש CSSOM דערפאַרונג, אָבער דאָס וועט נישט שטענדיק זיין דער פאַל. עס איז געווען אַ רעאַקט פּרויעקט פֿאַר אַן E- האַנדל פּלאַץ איך געארבעט אויף ווו מיר דארף צו לאָדן אַ סטילעשעעט פֿאַר די דערווייַל אויסגעקליבן צאָלונג שפּייַזער. דער פּראָבלעם איז געווען אַז די סטילעשעעט איז לאָודיד אויף יעדער בלאַט ווען עס איז נאָר טאַקע דארף אויף אַ ספּעציפיש בלאַט. דער דעוועלאָפּער טאַסקט צו מאַכן דעם פּאַסירן האט קיינמאָל לאָודיד אַ סטילעשעעט דינאַמיקאַללי. ווידער, דאָס איז גאָר פאַרשטיייק ווען רעאַקט אַבסטראַקץ אַוועק די טראדיציאנעלן צוגאַנג איר קען האָבן ריטשט פֿאַר. די CSSOM איז מסתּמא נישט עפּעס איר דאַרפֿן אין דיין וואָכעדיק אַרבעט. אָבער עס איז מסתּמא איר וועט דאַרפֿן צו ינטעראַקט מיט עס אין עטלעכע פונט, אפילו אין אַ איין-אַוועק בייַשפּיל. די יקספּיריאַנסיז ינספּייערד מיר צו שרייַבן דעם אַרטיקל. עס זענען פילע יגזיסטינג וועב פֿעיִקייטן און טעקנאַלאַדזשיז אין די ווילד וואָס איר קען קיינמאָל פאַרבינדן גלייך אין דיין טאָג-צו-טאָג אַרבעט. טאָמער איר ניטאָ פערלי נייַ אין וועב אַנטוויקלונג און זענען פשוט ניט וויסנד פון זיי ווייַל איר זענט סטיפּט אין די אַבסטראַקציע פון אַ ספּעציפיש פריימווערק וואָס טוט נישט דאַרפן איר צו וויסן עס דיפּלי אָדער אפילו. איך רעדן ספּאַסיפיקלי וועגן XML, וואָס פילע פון אונדז וויסן איז אַן אלטע שפּראַך וואָס איז נישט גאָר אַנדערש פון HTML. איך ברענגען דעם אַרויף ווייַל פון די לעצטע WHATWG דיסקוסיעס סאַגדזשעסטיד אַז אַ באַטייטיק פּייַדע פון די קסמל אָנלייגן באַוווסט ווי XSLT פּראָגראַממינג זאָל זיין אַוועקגענומען פון בראַוזערז. דאָס איז פּונקט די סאָרט פון עלטערע, יגזיסטינג טעכנאָלאָגיע מיר האָבן געהאט פֿאַר יאָרן וואָס קען זיין געוויינט פֿאַר עפּעס ווי פּראַקטיש ווי די CSSOM סיטואַציע אין מיין מאַנשאַפֿט. האָבן איר געארבעט מיט XSLT פריער? לאָמיר זען אויב מיר זענען שווער אין דעם עלטער טעכנאָלאָגיע און ליווערידזש די פֿעיִקייטן אַרויס דעם קאָנטעקסט פון קסמל צו מאַכנ פאַקטיש-וועלט פּראָבלעמס הייַנט. XPath: די הויפט אַפּי די מערסט וויכטיק קסמל טעכנאָלאָגיע וואָס איז טאָמער די מערסט נוציק אַרויס פון אַ גלייך קסמל פּערספּעקטיוו איז XPath, אַ אָנפֿרעג שפּראַך וואָס אַלאַוז איר צו געפֿינען קיין נאָדע אָדער אַטריביוט אין אַ מאַרקאַפּ בוים מיט איין וואָרצל עלעמענט. איך האָבן אַ פערזענלעכע ליבשאַפט פֿאַר XSLT, אָבער דאָס אויך רילייז אויף XPath, און פערזענלעכע ליבשאַפט מוזן זיין שטעלן באַזונדער אין די וויכטיקייט פון די ראַנג. דער אַרגומענט פֿאַר רימוווינג XSLT איז נישט דערמאָנען פון XPath, אַזוי איך רעכן אַז עס איז נאָך ערלויבט. דאָס איז גוט ווייַל XPath איז די הויפט און מערסט וויכטיק אַפּי אין דעם סוויט פון טעקנאַלאַדזשיז, ספּעציעל ווען איר פּרובירן צו געפֿינען עפּעס צו נוצן אַרויס נאָרמאַל XML באַניץ. עס איז וויכטיק ווייַל כאָטש CSS סעלעקטאָרס קענען זיין געוויינט צו געפֿינען רובֿ פון די עלעמענטן אין דיין בלאַט, זיי קענען נישט געפֿינען זיי אַלע. דערצו, CSS סעלעקטאָרס קענען ניט זיין געוויינט צו געפֿינען אַן עלעמענט באזירט אויף זיין קראַנט שטעלע אין די DOM. XPath קענען. איצט, עטלעכע פון איר לייענען דעם קען וויסן XPath, און עטלעכע קען נישט. XPath איז אַ שיין גרויס שטח פון טעכנאָלאָגיע, און איך קען נישט טאַקע לערנען אַלע די באַסיקס און אויך ווייַזן איר קיל טינגז מיט אים אין אַ איין אַרטיקל ווי דאָס. איך אַקטשאַוואַלי געפרוווט צו שרייַבן דעם אַרטיקל, אָבער די דורכשניטלעך ויסגאַבע פון סמאַשינג מאַגאַזין גייט נישט איבער 5,000 ווערטער. איך בין שוין געווען ביי מער ווי2,000 ווערטער בשעת בלויז האַלב וועג דורך די באַסיקס. אַזוי, איך וועל אָנהייבן צו טאָן קיל שטאָפּן מיט XPath און געבן איר עטלעכע לינקס וואָס איר קענען נוצן פֿאַר די באַסיקס אויב איר געפֿינען דעם שטאָפּן טשיקאַווע. קאַמביינינג XPath און CSS XPath קענען טאָן פילע טינגז וואָס CSS סעלעקטאָרס קענען נישט ווען איר פרעגן עלעמענטן. אָבער CSS סעלעקטאָרס קענען אויך טאָן אַ ביסל טינגז וואָס XPath קענען נישט, ניימלי, אָנפֿרעג עלעמענטן דורך קלאַס נאָמען.
CSS XPath .myClass /*[ כּולל (@ קלאַס, "מיין קלאַס")]
אין דעם בייַשפּיל, CSS קוויריז עלעמענטן וואָס אַנטהאַלטן אַ .myClass קלאַסנאַמע. דערווייַל, די XPath ביישפּיל פרעגן עלעמענטן וואָס אַנטהאַלטן אַן אַטריביוט קלאַס מיט די שטריקל "myClass". אין אנדערע ווערטער, עס סאַלעקץ עלעמענטן מיט myClass אין קיין אַטריביוט, אַרייַנגערעכנט עלעמענטן מיט די .myClass קלאַסנאַמע - ווי געזונט ווי עלעמענטן מיט "myClass" אין די שטריקל, אַזאַ ווי .myClass2. XPath איז ברייטער אין דעם זינען. אַזוי, ניט. איך בין נישט סאַגדזשעסטינג אַז מיר זאָל וואָרף אויס CSS און אָנהייבן סאַלעקטינג אַלע עלעמענטן דורך XPath. דאָס איז נישט די פונט. די פונט איז אַז XPath קענען טאָן טינגז וואָס CSS קען נישט און קען נאָך זיין זייער נוציק, כאָטש עס איז אַן עלטערע טעכנאָלאָגיע אין דעם בלעטערער אָנלייגן און קען נישט ויסקומען קלאָר ווי דער טאָג אין ערשטער בליק. לאָמיר נוצן די צוויי טעקנאַלאַדזשיז צוזאַמען ניט בלויז ווייַל מיר קענען, אָבער ווייַל מיר וועלן לערנען עפּעס וועגן XPath אין דעם פּראָצעס, מאכן עס אן אנדער געצייַג אין דיין אָנלייגן - איינער וואָס איר קען נישט וויסן איז געווען דאָרט אַלע צוזאמען! די פּראָבלעם איז אַז די document.evaluate אופֿן פון JavaScript און די פאַרשידן אָנפֿרעג סעלעקטאָר מעטהאָדס וואָס מיר נוצן מיט די CSS APIs פֿאַר דזשאַוואַסקריפּט זענען ינקאַמפּאַטאַבאַל. איך האָבן געמאכט אַ קאַמפּאַטאַבאַל אָנפרעג אַפּי צו באַקומען אונדז סטאַרטעד, כאָטש אַדמיטאַד, איך האָבן נישט שטעלן אַ פּלאַץ פון געדאַנק אין עס זינט עס איז אַ אָפּפאָר פון וואָס מיר טאָן דאָ. דאָ איז אַ גאַנץ פּשוט ארבעטן בייַשפּיל פון אַ ריוזאַבאַל אָנפֿרעג קאַנסטראַקטער: זען די Pen queryXPath [פאָרקעד] דורך Bryan Rasmussen. איך האָבן צוגעלייגט צוויי מעטהאָדס אויף דעם דאָקומענט כייפעץ: queryCSSSelectors (וואָס איז בייסיקלי querySelectorAll) און queryXPaths. ביידע פון די צוריקקומען אַ queryResults כייפעץ:
{ queryType: נאָודז | שטריקל | נומער | בולעאַן, רעזולטאַטן: קיין [] // HTML עלעמענטן, קסמל עלעמענטן, סטרינגס, נומערן, באָאָלעאַנס, queryCSSSelectors: (אָנפֿרעג: שטריקל, ענדערן: בוליאַן) => queryResults, queryXpaths: (אָנפֿרעג: שטריקל, ענדערן: בוליאַן) => queryResults }
די queryCSSSelectors און queryXpaths פאַנגקשאַנז לויפן די אָנפֿרעג איר געבן זיי איבער די עלעמענטן אין די רעזולטאַטן מענגע, אַזוי לאַנג ווי די רעזולטאַטן מענגע איז פון טיפּ נאָודז, פון קורס. אַנדערש, עס וועט צוריקקומען אַ queryResult מיט אַ ליידיק מענגע און אַ טיפּ פון נאָודז. אויב די ענדערן פאַרמאָג איז באַשטימט צו אמת, די פאַנגקשאַנז וועט טוישן זייער אייגענע queryResults. אונטער קיין צושטאנדן זאָל דאָס זיין געוויינט אין אַ פּראָדוקציע סוויווע. איך טאָן דאָס בלויז צו באַווייַזן די פאַרשידן יפעקץ פון ניצן די צוויי אָנפֿרעג אַפּיס צוזאַמען. בייַשפּיל פֿראגן איך ווילן צו ווייַזן עטלעכע ביישפילן פון פאַרשידענע XPath קוויריז וואָס באַווייַזן עטלעכע פון די שטאַרק טינגז וואָס זיי קענען טאָן און ווי זיי קענען זיין געוויינט אין פּלאַץ פון אנדערע אַפּראָוטשיז. דער ערשטער בייַשפּיל איז //לי/טעקסט(). דעם קוויריז אַלע לי עלעמענטן און קערט זייער טעקסט נאָודז. אַזוי, אויב מיר זענען צו פרעגן די פאלגענדע HTML:
- איין
- צוויי
- דרייַ
... דאָס איז וואָס איז אומגעקערט:
{"queryType":"xpathEvaluate","results":["איינער","צוויי","דריי"],"resultType":"שטריקל"}
אין אנדערע ווערטער, מיר באַקומען די פאלגענדע מענגע: ["איינער", "צוויי", "דרייַ"]. נאָרמאַללי, איר וואָלט אָנפֿרעג פֿאַר די לי עלעמענטן צו באַקומען דאָס, קער די רעזולטאַט פון די אָנפֿרעג אין אַ מענגע, מאַפּע די מענגע און צוריקקומען די טעקסט נאָדע פון יעדער עלעמענט. אָבער מיר קענען טאָן דאָס מער קאַנסייסלי מיט XPath: document.queryXPaths("//li/text()").רעזולטאטן.
באַמערקונג אַז דער וועג צו באַקומען אַ טעקסט נאָדע איז צו נוצן טעקסט (), וואָס קוקט ווי אַ פונקציע כסימע - און דאָס איז. עס קערט די טעקסט נאָדע פון אַן עלעמענט. אין אונדזער בייַשפּיל, עס זענען דריי לי עלעמענטן אין די מאַרקאַפּ, יעדער מיט טעקסט ("איינער", "צוויי" און "דרייַ").
לאָמיר קוקן אין אַ ביישפּיל פון אַ טעקסט () אָנפֿרעג. יבערנעמען אַז דאָס איז אונדזער מאַרקאַפּ:
לאָמיר שרייַבן אַ אָנפֿרעג וואָס קערט די href אַטריביוט ווערט: document.queryXPaths("//a[text() = 'צייכן אין']/@href").רעזולטאטן.
דאָס איז אַן XPath אָנפֿרעג אויף דעם קראַנט דאָקומענט, פּונקט ווי די לעצטע בייַשפּיל, אָבער דאָס מאָל מיר צוריקקומען די הרף אַטריביוט פון אַ לינק (אַ עלעמענט) וואָס כּולל די טעקסט "צייכן אין". די פאַקטיש אומגעקערטדער רעזולטאַט איז ["/login.html"]. XPath פאַנגקשאַנז איבערבליק עס זענען אַ נומער פון XPath פאַנגקשאַנז, און איר מיסטאָמע נישט באַקאַנט מיט זיי. עס זענען עטלעכע, איך טראַכטן, וואָס איז ווערט צו וויסן וועגן, אַרייַנגערעכנט די פאלגענדע:
סטאַרץ-מיט אויב אַ טעקסט סטאַרץ מיט אַ באַזונדער אנדערע טעקסט בייַשפּיל, סטאַרץ-מיט (@הרעף, 'הטטפּ:') קערט אמת אויב אַ href אַטריביוט סטאַרץ מיט http:. כּולל אויב אַ טעקסט כּולל אַ באַזונדער אנדערע טעקסט בייַשפּיל, כּולל (טעקסט (), "סמאַשינג מאַגאַזין") קערט אמת אויב אַ טעקסט נאָדע כּולל די ווערטער "סמאַשינג מאַגאַזין" אין עס ערגעץ. count רעטורנס אַ ציילן פון ווי פילע שוועבעלעך עס זענען צו אַ אָנפֿרעג. למשל, ציילן (//*[סטאַרטז-מיט (@הרעף, 'הטטפּ:']) קערט אַ ציילן פון ווי פילע פֿאַרבינדונגען אין די קאָנטעקסט נאָדע האָבן עלעמענטן מיט אַ href אַטריביוט וואָס כּולל די טעקסט אָנהייב מיט די הטטפּ:. סובסטרינג וואָרקס ווי דזשאַוואַסקריפּט סובסטרינג, אַחוץ איר פאָרן די שטריקל ווי אַן אַרגומענט. פֿאַר בייַשפּיל, סובסטרינג ("מיין טעקסט", 2, 4) קערט "י ה". substring-before רעטורנס דער טייל פון אַ שטריקל איידער אן אנדער שטריקל. פֿאַר בייַשפּיל, substing-before ("מיין טעקסט", "") קערט "מיין". סימילאַרלי, substring-before ("הי", "ביי") קערט אַ ליידיק שטריקל. substring-after רעטורנס דער טייל פון אַ שטריקל נאָך אן אנדער שטריקל. פֿאַר בייַשפּיל, substing-after ("מיין טעקסט", "") קערט "טעקסט". סימילאַרלי, סובסטרינג-נאָך ("הי", "ביי") קערט אַ ליידיק שטריקל. normalize-space רעטורנס די אַרגומענט שטריקל מיט ווייטספּאַסע נאָרמאַלייזד דורך סטריפּינג לידינג און טריילינג ווייטספּייס און ריפּלייסינג סיקוואַנסיז פון ווייטספּייס אותיות דורך אַ איין פּלאַץ. ניט קערט אַ בוליאַן אמת אויב דער אַרגומענט איז פאַלש, אַנדערש פאַלש. אמת קערט בוליאַן אמת. false רעטורנס בוליאַן פאַלש. קאָנקאַט די זעלבע זאַך ווי דזשאַוואַסקריפּט קאָנקאַט, אַחוץ איר טאָן ניט לויפן עס ווי אַ אופֿן אויף אַ שטריקל. אַנשטאָט, איר שטעלן אין אַלע די סטרינגס איר ווילן צו קאַנקאַטאַנייט. string-length דאס איז נישט די זעלבע ווי דזשאַוואַסקריפּט שטריקל-לענג, אָבער גאַנץ קערט די לענג פון די שטריקל עס איז געגעבן ווי אַן אַרגומענט. translateThis נעמט אַ שטריקל און ענדערונגען די רגע אַרגומענט צו די דריט אַרגומענט. פֿאַר בייַשפּיל, איבערזעצן ("אַבקדעפ", "אַבק", "קסיז") אַוטפּוץ XYZdef.
חוץ די באַזונדער XPath פאַנגקשאַנז, עס זענען אַ נומער פון אנדערע פאַנגקשאַנז וואָס אַרבעט פּונקט די זעלבע ווי זייער דזשאַוואַסקריפּט קאַונערפּאַרץ - אָדער קאַונערפּאַרץ אין בייסיקלי קיין פּראָגראַממינג שפּראַך - וואָס איר וואָלט מיסטאָמע אויך געפֿינען נוציק, אַזאַ ווי שטאָק, סופיט, קייַלעכיק, סאַכאַקל, און אַזוי אויף. די פאלגענדע דעמאָ ילאַסטרייץ יעדער פון די פאַנגקשאַנז: זען די Pen XPath נומעריקאַל פאַנגקשאַנז [פאָרקעד] דורך Bryan Rasmussen. באַמערקונג אַז, ווי רובֿ פון די שטריקל מאַניפּיאַליישאַן פאַנגקשאַנז, פילע נומעריקאַל אָנעס נעמען אַ איין אַרייַנשרייַב. דאָס איז, פון קורס, ווייַל זיי זענען געמיינט צו זיין געוויינט פֿאַר קווערינג, ווי אין די לעצטע XPath בייַשפּיל: // לי [שטאָק (טעקסט ()) > 250]/@וואַל
אויב איר נוצן זיי, ווי רובֿ פון די ביישפילן טאָן, איר וועט לויפן עס אויף דער ערשטער נאָדע וואָס גלייַכן דעם דרך. עס זענען אויך עטלעכע טיפּ קאַנווערזשאַן פאַנגקשאַנז איר זאָל מיסטאָמע ויסמיידן ווייַל דזשאַוואַסקריפּט שוין האט זייַן אייגענע טיפּ קאַנווערזשאַן פּראָבלעמס. אבער עס קען זיין מאל ווען איר ווילן צו גער אַ שטריקל צו אַ נומער צו קאָנטראָלירן עס קעגן עטלעכע אנדערע נומער. פאַנגקשאַנז וואָס שטעלן די טיפּ פון עפּעס זענען בוליאַן, נומער, שטריקל און נאָדע. דאָס זענען די וויכטיק XPath דאַטאַטיפּעס. און ווי איר קען ימאַדזשאַן, רובֿ פון די פאַנגקשאַנז קענען זיין געוויינט אויף דאַטן טייפּס וואָס זענען נישט DOM נאָודז. פֿאַר בייַשפּיל, סובסטרינג-נאָך נעמט אַ שטריקל ווי מיר האָבן שוין באדעקט, אָבער עס קען זיין די שטריקל פֿון אַ href אַטריביוט. עס קען אויך זיין אַ שטריקל:
const testSubstringAfter = document.queryXPaths ("substring-after ('העלא וועלט',' ')");
דאָך, דעם בייַשפּיל וועט געבן אונדז צוריק די רעזולטאַטן מענגע ווי ["וועלט"]. צו ווייַזן דעם אין קאַמף, איך האָבן געמאכט אַ דעמאָ בלאַט ניצן פאַנגקשאַנז קעגן טינגז וואָס זענען נישט DOM נאָודז: זען די Pen queryXPath [פאָרקעד] דורך Bryan Rasmussen. איר זאָל טאָן די כידעשדיק אַספּעקט פון די איבערזעצן פֿונקציע, וואָס איז אַז אויב איר האָבן אַ כאַראַקטער אין די רגע אַרגומענט (ד"ה, די רשימה פון אותיות איר ווילן איבערגעזעצט) און קיין וואָס ריכטן כאַראַקטער צו איבערזעצן, דער כאַראַקטער איז אַוועקגענומען פון די רעזולטאַט. אַזוי, דאָס:
זעץ ('העלא, מיין נאָמען איז Inigo Montoya, איר האָט געהרגעט מיין פאטער, גרייטן זיך צו שטאַרבן','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
... רעזולטאַטן אין די שטריקל, אַרייַנגערעכנט ספּייסאַז: [" * * ** "]
דאָס מיינט אַז דער בריוו "אַ" איז איבערגעזעצט צו אַן אַסטעריסק (*), אָבער יעדער אנדערע כאַראַקטער וואָס האט נישט אַ איבערזעצונג געגעבן די ציל שטריקל איז גאָר אַוועקגענומען. די ווייסע פּלאַץ איז אַלע וואָס מיר האָבן לינקסצווישן די איבערגעזעצטע "א" אותיות. דערנאָך ווידער, די אָנפֿרעג:
זעץ ('העלא, מיין נאָמען איז יניגאָ מאָנטויאַ, איר האָט געהרגעט מיין פאטער, גרייטן זיך צו שטאַרבן','אַבקדעפגהיקלמנאָפּקרסטוווקסיזאַבקדעפגהיקלמנאָפּקרסטוווווקסיז,','*******************************************************')")
... טוט נישט האָבן די פּראָבלעם און אַוטפּוץ אַ רעזולטאַט וואָס קוקט ווי דאָס:
"***** *** **** *** ***** ******* *** *** *** *** ******* ***
עס קען שלאָגן איר אַז עס איז קיין גרינג וועג אין דזשאַוואַסקריפּט צו טאָן פּונקט וואָס די XPath איבערזעצן פֿונקציע טוט, כאָטש פֿאַר פילע נוצן קאַסעס, ריפּלייסט אַלע מיט רעגולער אויסדרוקן קענען שעפּן עס. איר קען נוצן די זעלבע צוגאַנג איך האָבן דעמאַנסטרייטיד, אָבער דאָס איז סובאָפּטימאַל אויב אַלע איר ווילן איז צו איבערזעצן די סטרינגס. די פאלגענדע דעמאָ ראַפּס XPath ס איבערזעצן פונקציע צו צושטעלן אַ דזשאַוואַסקריפּט ווערסיע: זען די פּען איבערזעצן פונקציע [פאָרקעד] דורך Bryan Rasmussen. ווו קען איר נוצן עפּעס ווי דעם? באַטראַכטן קיסר סיפער ענקריפּשאַן מיט אַ דריי-פּלאַץ פאָטאָ (למשל, שפּיץ-פון-די-שורה ענקריפּשאַן פון 48 בק):
זעץ ("קיסר פּלאַנירט אַריבער די רוביקאָן!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
דער אַרייַנשרייַב טעקסט "קיסר פּלאַנירן צו קרייַז די רוביקאָן!" רעזולטאטן אין "זקסבפּקסאָ פפּ מיקסקקפקד ql zolpp qeb oryfzlk!" צו געבן אן אנדער שנעל ביישפּיל פון פאַרשידענע פּאַסאַבילאַטיז, איך געמאכט אַ מעטאַל פֿונקציע וואָס נעמט אַ שטריקל אַרייַנשרייַב און ניצט אַ איבערזעצן פֿונקציע צו צוריקקומען דעם טעקסט, אַרייַנגערעכנט אַלע אותיות וואָס נעמען ומלאַוץ. זען די פּען מעטאַל פונקציע [פאָרקעד] דורך Bryan Rasmussen.
קאָנסט מעטאַל = (סטר) => { צוריקקומען איבערזעצן (סטר, "אַאָואַו", "ÄÖÜäöü"); }
און אויב די טעקסט "מאָטליי קרו כּללים, שטיין אויף דודעס!", קערט "Mötley Crüe rüles, röck ön düdes!" דאָך, איינער קען האָבן אַלע סאָרץ פון פּאַראָדיע ניצט פון דעם פֿונקציע. אויב דאָס איז איר, דעם TVTropes אַרטיקל זאָל צושטעלן אַ פּלאַץ פון ינספּיראַציע. ניצן CSS מיט XPath געדענקט אונדזער הויפּט סיבה פֿאַר ניצן CSS סעלעקטאָרס צוזאַמען מיט XPath: CSS פארשטייט כּמעט וואָס אַ קלאַס איז, כאָטש דער בעסטער איר קענען טאָן מיט XPath איז קאַמפּעראַסאַנז פון די קלאַס אַטריביוט. דאָס וועט אַרבעטן אין רובֿ קאַסעס. אבער אויב איר וואָלט אלץ לויפן אין אַ סיטואַציע ווו, זאָגן, עמעצער באשאפן קלאסן מיטן נאָמען .primaryLinks און .primaryLinks2 און איר געוויינט XPath צו באַקומען די .primaryLinks קלאַס, איר וואָלט מסתּמא האָבן פּראָבלעמס. ווי לאַנג ווי עס איז גאָרנישט נאַריש ווי דאָס, איר וואָלט מיסטאָמע נוצן XPath. אבער איך בין טרויעריק צו באַריכט אַז איך האָבן געארבעט אין ערטער ווו מענטשן טאָן די טייפּס פון נאַריש טינגז. דאָ איז אן אנדער דעמאָ ניצן CSS און XPath צוזאַמען. עס ווייזט וואָס כאַפּאַנז ווען מיר נוצן דעם קאָד צו לויפן אַ XPath אויף אַ קאָנטעקסט נאָדע וואָס איז נישט די דאָקומענט ס נאָדע. זען די Pen css און xpath צוזאַמען [פאָרקעד] דורך Bryan Rasmussen. די CSS אָנפֿרעג איז .relatedarticles אַ, וואָס נעמט די צוויי אַ עלעמענטן אין אַ דייוו אַסיינד אַ .relatedarticles קלאַס. דערנאָך זענען דריי "שלעכט" פֿראגן, דאָס איז, פֿראגן וואָס טאָן ניט טאָן וואָס מיר וועלן צו טאָן ווען זיי לויפן מיט די עלעמענטן ווי די קאָנטעקסט נאָדע. איך קענען דערקלערן וואָס זיי זענען ביכייווז אַנדערש ווי איר קען דערוואַרטן. די דריי שלעכט פֿראגן אין קשיא זענען:
// טעקסט (): קערט אַלע די טעקסט אין דעם דאָקומענט. //אַ/טעקסט(): קערט אַלע טעקסט ין לינקס אין דעם דאָקומענט. ./a/text(): קערט קיין רעזולטאַטן.
די סיבה פֿאַר די רעזולטאַטן איז אַז כאָטש דיין קאָנטעקסט איז אַ עלעמענטן אומגעקערט פֿון די CSS אָנפֿרעג, // גייט קעגן די גאנצע דאָקומענט. דאָס איז די שטאַרקייט פון XPath; CSS קען נישט גיין פון אַ נאָדע אַרויף צו אַן אָוועס און דערנאָך צו אַ שוועסטער פון דעם אָוועס, און גיין אַראָפּ צו אַ אָפּשטאַמלינג פון דעם סיבלינג. אָבער XPath קענען. דערווייַל, ./ פרעגט די קינדער פון דעם קראַנט נאָדע, ווו די פּונקט (.) רעפּראַזענץ די קראַנט נאָדע, און די פאָרויס צעהאַקן (/) רעפּראַזענץ גיין צו עטלעכע קינד נאָדע - צי עס איז אַן אַטריביוט, עלעמענט אָדער טעקסט איז באשלאסן דורך דער ווייַטער טייל פון דעם דרך. אָבער עס איז קיין קינד אַ עלעמענט אויסגעקליבן דורך די CSS אָנפֿרעג, אַזוי אַז אָנפֿרעג אויך קערט גאָרנישט. עס זענען דריי גוטע פֿראגן אין די לעצטע דעמאָ:
.// טעקסט(), ./טעקסט(), נאָרמאַלייז-פּלאַץ (./טעקסט ()).
די נאָרמאַלייז-פּלאַץ אָנפֿרעג דעמאַנסטרייץ XPath פונקציע באַניץ, אָבער אויך פיקסיז אַ פּראָבלעם אַרייַנגערעכנט אין די אנדערע קוויריז. די HTML איז סטראַקטשערד ווי דאָס:
אָטאַמייטינג דיין שטריך טעסטינג מיט סעלעניום וועבדרייווער
די אָנפֿרעג קערט אַ שורה קאָרמען אין די אָנהייב און סוף פון די טעקסט נאָדע,און נאָרמאַלייז-פּלאַץ רימוווז דעם. ניצן קיין XPath פונקציע וואָס קערט עפּעס אַנדערש ווי אַ בוליאַן מיט אַן אַרייַנשרייַב XPath אַפּלייז צו אנדערע פאַנגקשאַנז. די פאלגענדע דעמאָ ווייזט אַ נומער פון ביישפילן: זען די ביישפילן פון Pen xpath פאַנגקשאַנז [פאָרקעד] דורך Bryan Rasmussen. דער ערשטער בייַשפּיל ווייזט אַ פּראָבלעם איר זאָל היטן זיך פֿאַר. ספּעציעל, די פאלגענדע קאָד:
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), '/','')'
דאָס ווערט אַ ביסל צו קאָמפּליצירט אין די מאָס אַז עס דאַרף באַמערקונגען וואָס דיסקרייבינג וואָס עס טוט: נעמען אַלע די URL פון די href אַטריביוט נאָך www.smashingmagazine.com/, אַראָפּנעמען די ערשטער נייַן אותיות, און איבערזעצן די פאָרויס צעהאַקן (/) כאַראַקטער צו גאָרנישט צו באַקומען באַפרייַען פון די סאָף פאָרויס צעהאַקן. דער רעזולטאַט מענגע:
["פונקציע-טעסטינג-סעלעניום-וועבדריווער", "אָטאַמייטיד-טעסט-רעזולטאטן-פֿאַרבעסערן-אַקסעסאַביליטי"]
מער XPath נוצן קאַסעס XPath קענען טאַקע שייַנען אין טעסטינג. די סיבה איז נישט שווער צו זען, ווייַל XPath קענען זיין געוויינט צו באַקומען יעדער עלעמענט אין די DOM פֿון קיין שטעלע אין די DOM, כאָטש CSS קען נישט. איר קענט נישט רעכענען אויף CSS קלאסן וואָס בלייבן קאָנסיסטענט אין פילע מאָדערן בויען סיסטעמען, אָבער מיט XPath, מיר זענען ביכולת צו מאַכן מער געזונט שוועבעלעך וועגן וואָס די טעקסט אינהאַלט פון אַן עלעמענט איז, ראַגאַרדלאַס פון אַ טשאַנגינג DOM סטרוקטור. עס איז געווען פאָרשונג אויף טעקניקס וואָס לאָזן איר צו מאַכן ריזיליאַנט XPath טעסץ. גאָרנישט איז ערגער ווי אַז טעסץ פלייק אויס און דורכפאַל נאָר ווייַל אַ CSS סעלעקטאָר ניט מער אַרבעט ווייַל עפּעס איז ריניימד אָדער אַוועקגענומען. XPath איז אויך טאַקע גרויס אין יקסטראַקשאַן פון קייפל לאָקאַטאָר. עס איז מער ווי איין וועג צו נוצן XPath קוויריז צו גלייַכן אַן עלעמענט. דער זעלביקער איז אמת מיט CSS. אָבער XPath קוויריז קענען בערן אין די טינגז אין אַ מער טאַרגעטעד וועג וואָס לימאַץ וואָס איז אומגעקערט, אַלאַוינג איר צו געפֿינען אַ ספּעציפיש גלייַכן ווו עס קען זיין עטלעכע מעגלעך שוועבעלעך. פֿאַר בייַשפּיל, מיר קענען נוצן XPath צו צוריקקומען אַ ספּעציפיש h2 עלעמענט וואָס איז קאַנטיינד אין אַ דייוו וואָס גלייך גייט אַ סיבלינג דייוו וואָס, אין קער, כּולל אַ קינד בילד עלעמענט מיט אַ דאַטן-טעסטיד = "לידער" אַטריביוט אויף עס: <דיוו> <דיוו>
