ವರ್ಷಗಳಲ್ಲಿ ಪ್ರವೃತ್ತಿಯನ್ನು ನೋಡಲು ನಾನು ಮುಂಭಾಗದ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ದೀರ್ಘಕಾಲ ಇದ್ದೇನೆ: ಕಿರಿಯ ಡೆವಲಪರ್ಗಳು ಅದರ ಐತಿಹಾಸಿಕ ಸಂದರ್ಭವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳದೆ ಪ್ರೋಗ್ರಾಮಿಂಗ್ನ ಹೊಸ ಮಾದರಿಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತಾರೆ. ಸಹಜವಾಗಿ, ಏನನ್ನಾದರೂ ತಿಳಿದಿಲ್ಲದಿರುವುದು ಸಂಪೂರ್ಣವಾಗಿ ಅರ್ಥವಾಗುವಂತಹದ್ದಾಗಿದೆ. ವೆಬ್ ವೈವಿಧ್ಯಮಯ ಕೌಶಲ್ಯಗಳು ಮತ್ತು ವಿಶೇಷತೆಗಳೊಂದಿಗೆ ಬಹಳ ದೊಡ್ಡ ಸ್ಥಳವಾಗಿದೆ ಮತ್ತು ನಮಗೆ ತಿಳಿದಿಲ್ಲದಿರುವುದು ನಮಗೆ ಯಾವಾಗಲೂ ತಿಳಿದಿರುವುದಿಲ್ಲ. ಈ ಕ್ಷೇತ್ರದಲ್ಲಿ ಕಲಿಕೆಯು ಒಮ್ಮೆ ಸಂಭವಿಸಿ ಕೊನೆಗೊಳ್ಳುವ ಸಂಗತಿಗಿಂತ ನಿರಂತರ ಪ್ರಯಾಣವಾಗಿದೆ. ನಿದರ್ಶನ: UI ನಲ್ಲಿನ ನಿರ್ದಿಷ್ಟ ಟ್ಯಾಬ್ನಿಂದ ಬಳಕೆದಾರರು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುತ್ತಾರೆಯೇ ಎಂದು ಹೇಳಲು ಸಾಧ್ಯವೇ ಎಂದು ನನ್ನ ತಂಡದ ಯಾರೋ ಕೇಳಿದರು. ನಾನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಮೊದಲು ಅನ್ಲೋಡ್ ಈವೆಂಟ್ ಅನ್ನು ಸೂಚಿಸಿದ್ದೇನೆ. ಆದರೆ ಇದನ್ನು ಮೊದಲು ನಿಭಾಯಿಸಿದವರಿಗೆ ಇದು ಸಾಧ್ಯ ಎಂದು ತಿಳಿದಿದೆ ಏಕೆಂದರೆ ಅವರು ಇತರ ಸೈಟ್ಗಳಲ್ಲಿ ಉಳಿಸದ ಡೇಟಾದ ಕುರಿತು ಎಚ್ಚರಿಕೆಗಳನ್ನು ಹೊಡೆದಿದ್ದಾರೆ, ಇದಕ್ಕಾಗಿ ಮೊದಲು ಅನ್ಲೋಡ್ ಮಾಡುವುದು ಒಂದು ವಿಶಿಷ್ಟವಾದ ಬಳಕೆಯ ಸಂದರ್ಭವಾಗಿದೆ. ನಾನು ಉತ್ತಮ ಅಳತೆಗಾಗಿ ನನ್ನ ಸಹೋದ್ಯೋಗಿಗೆ ಈವೆಂಟ್ಗಳನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ಪುಟ ಮರೆಮಾಡಿ ಮತ್ತು ಗೋಚರತೆಯನ್ನು ಸಹ ಸೂಚಿಸಿದ್ದೇನೆ. ಅದರ ಬಗ್ಗೆ ನನಗೆ ಹೇಗೆ ಗೊತ್ತಾಯಿತು? ಇದು ಇನ್ನೊಂದು ಯೋಜನೆಯಲ್ಲಿ ಬಂದ ಕಾರಣ, ಆರಂಭದಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಲಿಯುವಾಗ ನಾನು ಅದರ ಬಗ್ಗೆ ಅಧ್ಯಯನ ಮಾಡಿದ್ದರಿಂದ ಅಲ್ಲ. ವಾಸ್ತವವೆಂದರೆ ಆಧುನಿಕ ಮುಂಭಾಗದ ಚೌಕಟ್ಟುಗಳು ಅವುಗಳ ಹಿಂದಿನ ತಂತ್ರಜ್ಞಾನದ ದೈತ್ಯರ ಹೆಗಲ ಮೇಲೆ ನಿಂತಿವೆ. ಅವರು ಅಭಿವೃದ್ಧಿ ಅಭ್ಯಾಸಗಳನ್ನು ಅಮೂರ್ತಗೊಳಿಸುತ್ತಾರೆ, ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮ ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಅಥವಾ ತೆಗೆದುಹಾಕುತ್ತದೆ, ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಅತ್ಯಗತ್ಯವಾದ ಫ್ರಂಟ್-ಎಂಡ್ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಪ್ರತಿಯೊಬ್ಬರೂ ಬಹುಶಃ ತಿಳಿದಿರಬೇಕಾದದ್ದನ್ನು ತಿಳಿದುಕೊಳ್ಳುವ ಅಥವಾ ಸ್ಪರ್ಶಿಸುವ ಅಗತ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. CSS ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್ (CSSOM) ಅನ್ನು ಪರಿಗಣಿಸಿ. CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವ ಯಾರಾದರೂ CSSOM ಅನುಭವವನ್ನು ಹೊಂದಿರುತ್ತಾರೆ ಎಂದು ನೀವು ನಿರೀಕ್ಷಿಸಬಹುದು, ಆದರೆ ಅದು ಯಾವಾಗಲೂ ಆಗುವುದಿಲ್ಲ. ನಾನು ಕೆಲಸ ಮಾಡಿದ ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ಗಾಗಿ ರಿಯಾಕ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ ಇತ್ತು, ಅಲ್ಲಿ ನಾವು ಪ್ರಸ್ತುತ ಆಯ್ಕೆಮಾಡಿದ ಪಾವತಿ ಪೂರೈಕೆದಾರರಿಗೆ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಬೇಕಾಗಿದೆ. ಸಮಸ್ಯೆಯೆಂದರೆ ಸ್ಟೈಲ್ಶೀಟ್ ಪ್ರತಿ ಪುಟದಲ್ಲಿ ಲೋಡ್ ಆಗುತ್ತಿರುವುದು ನಿರ್ದಿಷ್ಟ ಪುಟದಲ್ಲಿ ಮಾತ್ರ ಅಗತ್ಯವಿದ್ದಾಗ. ಇದನ್ನು ಮಾಡಲು ಕೆಲಸ ಮಾಡುವ ಡೆವಲಪರ್ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡಿಲ್ಲ. ಮತ್ತೊಮ್ಮೆ, ಪ್ರತಿಕ್ರಿಯೆಯು ನೀವು ತಲುಪಿರಬಹುದಾದ ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನವನ್ನು ದೂರವಿಟ್ಟಾಗ ಇದು ಸಂಪೂರ್ಣವಾಗಿ ಅರ್ಥವಾಗುವಂತಹದ್ದಾಗಿದೆ. ನಿಮ್ಮ ದಿನನಿತ್ಯದ ಕೆಲಸದಲ್ಲಿ CSSOM ನಿಮಗೆ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ. ಆದರೆ ನೀವು ಕೆಲವು ಹಂತದಲ್ಲಿ ಅದರೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಬೇಕಾಗಬಹುದು, ಒಂದೇ ಒಂದು ಸಂದರ್ಭದಲ್ಲಿ ಸಹ. ಈ ಅನುಭವಗಳು ಈ ಲೇಖನವನ್ನು ಬರೆಯಲು ನನ್ನನ್ನು ಪ್ರೇರೇಪಿಸಿವೆ. ನಿಮ್ಮ ದಿನನಿತ್ಯದ ಕೆಲಸದಲ್ಲಿ ನೀವು ಎಂದಿಗೂ ನೇರವಾಗಿ ಸ್ಪರ್ಶಿಸದಿರುವ ಅನೇಕ ವೆಬ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ತಂತ್ರಜ್ಞಾನಗಳು ಕಾಡಿನಲ್ಲಿವೆ. ಬಹುಶಃ ನೀವು ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ತಕ್ಕಮಟ್ಟಿಗೆ ಹೊಸಬರಾಗಿದ್ದೀರಿ ಮತ್ತು ಅವುಗಳ ಬಗ್ಗೆ ಸರಳವಾಗಿ ತಿಳಿದಿರುವುದಿಲ್ಲ ಏಕೆಂದರೆ ನೀವು ನಿರ್ದಿಷ್ಟ ಚೌಕಟ್ಟಿನ ಅಮೂರ್ತತೆಯಲ್ಲಿ ಮುಳುಗಿದ್ದೀರಿ, ಅದು ನಿಮಗೆ ಆಳವಾಗಿ ಅಥವಾ ಎಲ್ಲವನ್ನೂ ತಿಳಿದುಕೊಳ್ಳುವ ಅಗತ್ಯವಿಲ್ಲ. ನಾನು XML ಬಗ್ಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿ ಮಾತನಾಡುತ್ತಿದ್ದೇನೆ, ಇದು ನಮ್ಮಲ್ಲಿ ಅನೇಕರಿಗೆ ತಿಳಿದಿರುವ ಪ್ರಾಚೀನ ಭಾಷೆ HTML ನಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಭಿನ್ನವಾಗಿಲ್ಲ. XSLT ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಎಂದು ಕರೆಯಲ್ಪಡುವ XML ಸ್ಟಾಕ್ನ ಗಮನಾರ್ಹ ಭಾಗವನ್ನು ಬ್ರೌಸರ್ಗಳಿಂದ ತೆಗೆದುಹಾಕಬೇಕೆಂದು ಇತ್ತೀಚಿನ WHATWG ಚರ್ಚೆಗಳ ಕಾರಣದಿಂದ ನಾನು ಇದನ್ನು ತರುತ್ತಿದ್ದೇನೆ. ಇದು ನಮ್ಮ ತಂಡವು ಇದ್ದ CSSOM ಪರಿಸ್ಥಿತಿಯಂತೆ ಪ್ರಾಯೋಗಿಕವಾಗಿ ಬಳಸಬಹುದಾದ ಹಳೆಯದಾದ, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ತಂತ್ರಜ್ಞಾನದ ಪ್ರಕಾರವಾಗಿದೆ. ನೀವು ಮೊದಲು XSLT ಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಿದ್ದೀರಾ? ನಾವು ಈ ಹಳೆಯ ತಂತ್ರಜ್ಞಾನಕ್ಕೆ ಹೆಚ್ಚು ಒಲವು ತೋರುತ್ತೇವೆ ಮತ್ತು ಇಂದಿನ ನೈಜ-ಪ್ರಪಂಚದ ಸಮಸ್ಯೆಗಳನ್ನು ನಿಭಾಯಿಸಲು XML ಸಂದರ್ಭದ ಹೊರಗೆ ಅದರ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಹತೋಟಿಗೆ ತರುತ್ತೇವೆಯೇ ಎಂದು ನೋಡೋಣ. XPath: ಕೇಂದ್ರ API ನೇರವಾದ XML ದೃಷ್ಟಿಕೋನದ ಹೊರಗೆ ಬಹುಶಃ ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾದ XML ತಂತ್ರಜ್ಞಾನವು XPath ಆಗಿದೆ, ಇದು ಒಂದು ಮೂಲ ಅಂಶದೊಂದಿಗೆ ಮಾರ್ಕ್ಅಪ್ ಟ್ರೀನಲ್ಲಿ ಯಾವುದೇ ನೋಡ್ ಅಥವಾ ಗುಣಲಕ್ಷಣವನ್ನು ಕಂಡುಹಿಡಿಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಪ್ರಶ್ನೆ ಭಾಷೆಯಾಗಿದೆ. ನಾನು XSLT ಗಾಗಿ ವೈಯಕ್ತಿಕ ಪ್ರೀತಿಯನ್ನು ಹೊಂದಿದ್ದೇನೆ, ಆದರೆ ಅದು XPath ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ ಮತ್ತು ಶ್ರೇಯಾಂಕದ ಪ್ರಾಮುಖ್ಯತೆಯಲ್ಲಿ ವೈಯಕ್ತಿಕ ಪ್ರೀತಿಯನ್ನು ಬದಿಗಿಡಬೇಕು. XSLT ಅನ್ನು ತೆಗೆದುಹಾಕುವ ವಾದವು XPath ಬಗ್ಗೆ ಯಾವುದೇ ಉಲ್ಲೇಖವನ್ನು ಮಾಡುವುದಿಲ್ಲ, ಹಾಗಾಗಿ ಅದನ್ನು ಇನ್ನೂ ಅನುಮತಿಸಲಾಗಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ. ಇದು ಒಳ್ಳೆಯದು ಏಕೆಂದರೆ XPath ಈ ತಂತ್ರಜ್ಞಾನಗಳ ಸೂಟ್ನಲ್ಲಿ ಕೇಂದ್ರ ಮತ್ತು ಪ್ರಮುಖ API ಆಗಿದೆ, ವಿಶೇಷವಾಗಿ ಸಾಮಾನ್ಯ XML ಬಳಕೆಯ ಹೊರಗೆ ಬಳಸಲು ಏನನ್ನಾದರೂ ಹುಡುಕಲು ಪ್ರಯತ್ನಿಸುವಾಗ. ಇದು ಮುಖ್ಯವಾದುದು ಏಕೆಂದರೆ, ನಿಮ್ಮ ಪುಟದಲ್ಲಿನ ಹೆಚ್ಚಿನ ಅಂಶಗಳನ್ನು ಹುಡುಕಲು CSS ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಬಳಸಬಹುದಾದರೂ, ಅವುಗಳು ಎಲ್ಲವನ್ನೂ ಹುಡುಕಲು ಸಾಧ್ಯವಿಲ್ಲ. ಇದಲ್ಲದೆ, DOM ನಲ್ಲಿ ಅದರ ಪ್ರಸ್ತುತ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಅಂಶವನ್ನು ಹುಡುಕಲು CSS ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ. XPath ಮಾಡಬಹುದು. ಈಗ, ಇದನ್ನು ಓದುತ್ತಿರುವ ನಿಮ್ಮಲ್ಲಿ ಕೆಲವರಿಗೆ XPath ತಿಳಿದಿರಬಹುದು, ಮತ್ತು ಕೆಲವರಿಗೆ ತಿಳಿದಿಲ್ಲದಿರಬಹುದು. XPath ತಂತ್ರಜ್ಞಾನದ ಒಂದು ದೊಡ್ಡ ಕ್ಷೇತ್ರವಾಗಿದೆ, ಮತ್ತು ನಾನು ನಿಜವಾಗಿಯೂ ಎಲ್ಲಾ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಕಲಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ ಮತ್ತು ಈ ರೀತಿಯ ಒಂದೇ ಲೇಖನದಲ್ಲಿ ಅದರೊಂದಿಗೆ ಮಾಡಲು ಉತ್ತಮವಾದ ವಿಷಯಗಳನ್ನು ಸಹ ತೋರಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ನಾನು ಆ ಲೇಖನವನ್ನು ಬರೆಯಲು ಪ್ರಯತ್ನಿಸಿದೆ, ಆದರೆ ಸರಾಸರಿ ಸ್ಮಾಶಿಂಗ್ ಮ್ಯಾಗಜೀನ್ ಪ್ರಕಟಣೆಯು 5,000 ಪದಗಳನ್ನು ಮೀರುವುದಿಲ್ಲ. ನಾನು ಈಗಾಗಲೇ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿಗೆ ಇದ್ದೆ2,000 ಪದಗಳು ಬೇಸಿಕ್ಸ್ನಲ್ಲಿ ಅರ್ಧದಷ್ಟು ಮಾತ್ರ. ಆದ್ದರಿಂದ, ನಾನು XPath ನೊಂದಿಗೆ ತಂಪಾದ ವಿಷಯವನ್ನು ಮಾಡಲು ಪ್ರಾರಂಭಿಸಲಿದ್ದೇನೆ ಮತ್ತು ನೀವು ಈ ವಿಷಯವನ್ನು ಆಸಕ್ತಿದಾಯಕವೆಂದು ಕಂಡುಕೊಂಡರೆ ಮೂಲಭೂತ ವಿಷಯಗಳಿಗಾಗಿ ನೀವು ಬಳಸಬಹುದಾದ ಕೆಲವು ಲಿಂಕ್ಗಳನ್ನು ನೀಡುತ್ತೇನೆ. XPath ಮತ್ತು CSS ಅನ್ನು ಸಂಯೋಜಿಸುವುದು ಅಂಶಗಳನ್ನು ಪ್ರಶ್ನಿಸುವಾಗ CSS ಸೆಲೆಕ್ಟರ್ಗಳು ಮಾಡಲಾಗದ ಬಹಳಷ್ಟು ಕೆಲಸಗಳನ್ನು XPath ಮಾಡಬಹುದು. ಆದರೆ CSS ಸೆಲೆಕ್ಟರ್ಗಳು XPath ಗೆ ಸಾಧ್ಯವಾಗದ ಕೆಲವು ಕೆಲಸಗಳನ್ನು ಮಾಡಬಹುದು, ಅವುಗಳೆಂದರೆ, ವರ್ಗದ ಹೆಸರಿನ ಮೂಲಕ ಅಂಶಗಳನ್ನು ಪ್ರಶ್ನಿಸಬಹುದು.
CSS XPath .myClass /*[ಒಳಗೊಂಡಿದೆ(@ಕ್ಲಾಸ್, "ಮೈಕ್ಲಾಸ್")]
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .myClass ವರ್ಗನಾಮವನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳನ್ನು CSS ಪ್ರಶ್ನಿಸುತ್ತದೆ. ಏತನ್ಮಧ್ಯೆ, XPath ಉದಾಹರಣೆಯು "myClass" ಸ್ಟ್ರಿಂಗ್ನೊಂದಿಗೆ ಗುಣಲಕ್ಷಣ ವರ್ಗವನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳನ್ನು ಪ್ರಶ್ನಿಸುತ್ತದೆ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ಇದು .myClass ಕ್ಲಾಸ್ನೇಮ್ನೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಯಾವುದೇ ಗುಣಲಕ್ಷಣದಲ್ಲಿ myClass ನೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ - ಹಾಗೆಯೇ .myClass2 ನಂತಹ ಸ್ಟ್ರಿಂಗ್ನಲ್ಲಿ "myClass" ನೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. XPath ಆ ಅರ್ಥದಲ್ಲಿ ವಿಶಾಲವಾಗಿದೆ. ಆದ್ದರಿಂದ, ಇಲ್ಲ. ನಾವು CSS ಅನ್ನು ಹೊರಹಾಕಬೇಕು ಮತ್ತು XPath ಮೂಲಕ ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಬೇಕು ಎಂದು ನಾನು ಸೂಚಿಸುತ್ತಿಲ್ಲ. ಅದು ವಿಷಯವಲ್ಲ. ಮುಖ್ಯ ವಿಷಯವೆಂದರೆ XPath ಸಿಎಸ್ಎಸ್ ಮಾಡಲಾಗದ ಮತ್ತು ಇನ್ನೂ ಹೆಚ್ಚು ಉಪಯುಕ್ತವಾದ ಕೆಲಸಗಳನ್ನು ಮಾಡಬಹುದು, ಇದು ಬ್ರೌಸರ್ ಸ್ಟಾಕ್ನಲ್ಲಿ ಹಳೆಯ ತಂತ್ರಜ್ಞಾನವಾಗಿದ್ದರೂ ಮತ್ತು ಮೊದಲ ನೋಟದಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಕಾಣಿಸದಿದ್ದರೂ ಸಹ. ನಾವು ಎರಡು ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಒಟ್ಟಿಗೆ ಬಳಸೋಣ ಏಕೆಂದರೆ ನಾವು ಮಾತ್ರ ಬಳಸುತ್ತೇವೆ, ಆದರೆ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ನಾವು XPath ಬಗ್ಗೆ ಏನನ್ನಾದರೂ ಕಲಿಯುತ್ತೇವೆ, ಅದನ್ನು ನಿಮ್ಮ ಸ್ಟಾಕ್ನಲ್ಲಿ ಮತ್ತೊಂದು ಸಾಧನವಾಗಿ ಮಾಡುತ್ತೇವೆ - ನಿಮಗೆ ತಿಳಿದಿಲ್ಲದಿರಬಹುದು! ಸಮಸ್ಯೆಯೆಂದರೆ JavaScript ನ document.evaluate ವಿಧಾನ ಮತ್ತು JavaScript ಗಾಗಿ CSS API ಗಳೊಂದಿಗೆ ನಾವು ಬಳಸುವ ವಿವಿಧ ಪ್ರಶ್ನೆ ಆಯ್ಕೆ ವಿಧಾನಗಳು ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ. ನಮ್ಮನ್ನು ಪ್ರಾರಂಭಿಸಲು ನಾನು ಹೊಂದಾಣಿಕೆಯ ಕ್ವೆಯಿಂಗ್ API ಅನ್ನು ಮಾಡಿದ್ದೇನೆ, ಆದರೂ ಒಪ್ಪಿಕೊಂಡರೂ, ನಾವು ಇಲ್ಲಿ ಏನು ಮಾಡುತ್ತಿದ್ದೇವೆ ಎಂಬುದರ ನಿರ್ಗಮನವಾಗಿರುವುದರಿಂದ ನಾನು ಅದರ ಬಗ್ಗೆ ಹೆಚ್ಚು ಯೋಚಿಸಿಲ್ಲ. ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಪ್ರಶ್ನೆ ಕನ್ಸ್ಟ್ರಕ್ಟರ್ನ ಸರಳವಾದ ಕೆಲಸದ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ: ಬ್ರಿಯಾನ್ ರಾಸ್ಮುಸ್ಸೆನ್ ಅವರ ಪೆನ್ ಕ್ವೆರಿ ಎಕ್ಸ್ಪಾತ್ [ಫೋರ್ಕ್ಡ್] ಅನ್ನು ನೋಡಿ. ನಾನು ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ನಲ್ಲಿ ಎರಡು ವಿಧಾನಗಳನ್ನು ಸೇರಿಸಿದ್ದೇನೆ: queryCSSSelectors (ಇದು ಮೂಲಭೂತವಾಗಿ querySelectorAll) ಮತ್ತು queryXPaths. ಇವೆರಡೂ queryResults ವಸ್ತುವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತವೆ:
{ ಪ್ರಶ್ನೆ ಪ್ರಕಾರ: ನೋಡ್ಗಳು | ದಾರ | ಸಂಖ್ಯೆ | ಬೂಲಿಯನ್, ಫಲಿತಾಂಶಗಳು: ಯಾವುದೇ[] // html ಅಂಶಗಳು, xml ಅಂಶಗಳು, ತಂತಿಗಳು, ಸಂಖ್ಯೆಗಳು, ಬೂಲಿಯನ್ಗಳು, queryCSSSelectors: (ಪ್ರಶ್ನೆ: ಸ್ಟ್ರಿಂಗ್, ತಿದ್ದುಪಡಿ: ಬೂಲಿಯನ್) => queryResults, queryXpaths: (ಪ್ರಶ್ನೆ: ಸ್ಟ್ರಿಂಗ್, ತಿದ್ದುಪಡಿ: ಬೂಲಿಯನ್) => ಪ್ರಶ್ನೆ ಫಲಿತಾಂಶಗಳು }
queryCSSSelectors ಮತ್ತು queryXpaths ಫಂಕ್ಷನ್ಗಳು ಫಲಿತಾಂಶಗಳ ರಚನೆಯಲ್ಲಿನ ಅಂಶಗಳ ಮೇಲೆ ನೀವು ನೀಡುವ ಪ್ರಶ್ನೆಯನ್ನು ರನ್ ಮಾಡುತ್ತದೆ, ಫಲಿತಾಂಶಗಳ ಅರೇಯು ಟೈಪ್ ನೋಡ್ಗಳನ್ನು ಹೊಂದಿರುವವರೆಗೆ. ಇಲ್ಲದಿದ್ದರೆ, ಇದು ಖಾಲಿ ಅರೇ ಮತ್ತು ನೋಡ್ಗಳ ಪ್ರಕಾರದೊಂದಿಗೆ queryResult ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ತಿದ್ದುಪಡಿ ಆಸ್ತಿಯನ್ನು ಸರಿ ಎಂದು ಹೊಂದಿಸಿದರೆ, ಕಾರ್ಯಗಳು ತಮ್ಮದೇ ಆದ ಪ್ರಶ್ನೆ ಫಲಿತಾಂಶಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ. ಯಾವುದೇ ಸಂದರ್ಭಗಳಲ್ಲಿ ಇದನ್ನು ಉತ್ಪಾದನಾ ಪರಿಸರದಲ್ಲಿ ಬಳಸಬಾರದು. ಎರಡು ಪ್ರಶ್ನೆ API ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಬಳಸುವ ವಿವಿಧ ಪರಿಣಾಮಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ನಾನು ಈ ರೀತಿ ಮಾಡುತ್ತಿದ್ದೇನೆ. ಉದಾಹರಣೆ ಪ್ರಶ್ನೆಗಳು ವಿಭಿನ್ನ XPath ಪ್ರಶ್ನೆಗಳ ಕೆಲವು ಉದಾಹರಣೆಗಳನ್ನು ತೋರಿಸಲು ನಾನು ಬಯಸುತ್ತೇನೆ, ಅದು ಅವರು ಮಾಡಬಹುದಾದ ಕೆಲವು ಶಕ್ತಿಯುತ ವಿಷಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಮತ್ತು ಇತರ ವಿಧಾನಗಳ ಬದಲಿಗೆ ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು. ಮೊದಲ ಉದಾಹರಣೆ //li/text(). ಇದು ಎಲ್ಲಾ ಲಿ ಅಂಶಗಳನ್ನು ಪ್ರಶ್ನಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳ ಪಠ್ಯ ನೋಡ್ಗಳನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ, ನಾವು ಈ ಕೆಳಗಿನ HTML ಅನ್ನು ಪ್ರಶ್ನಿಸಿದರೆ:
- ಒಂದು
- ಎರಡು
- ಮೂರು
…ಇದನ್ನು ಹಿಂತಿರುಗಿಸಲಾಗಿದೆ:
{"queryType":"xpathEvaluate","ಫಲಿತಾಂಶಗಳು":["ಒಂದು","ಎರಡು","ಮೂರು"],"ಫಲಿತಾಂಶ ಪ್ರಕಾರ":"string"}
ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ನಾವು ಈ ಕೆಳಗಿನ ಶ್ರೇಣಿಯನ್ನು ಪಡೆಯುತ್ತೇವೆ: ["ಒಂದು", "ಎರಡು", "ಮೂರು"]. ಸಾಮಾನ್ಯವಾಗಿ, ನೀವು ಅದನ್ನು ಪಡೆಯಲು li ಅಂಶಗಳಿಗಾಗಿ ಪ್ರಶ್ನಿಸುತ್ತೀರಿ, ಆ ಪ್ರಶ್ನೆಯ ಫಲಿತಾಂಶವನ್ನು ಒಂದು ಶ್ರೇಣಿಯಾಗಿ ಪರಿವರ್ತಿಸಿ, ರಚನೆಯನ್ನು ನಕ್ಷೆ ಮಾಡಿ ಮತ್ತು ಪ್ರತಿ ಅಂಶದ ಪಠ್ಯ ನೋಡ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಿ. ಆದರೆ ನಾವು XPath ನೊಂದಿಗೆ ಹೆಚ್ಚು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಮಾಡಬಹುದು: document.queryXPaths("//li/text()").ಫಲಿತಾಂಶಗಳು.
ಪಠ್ಯ ನೋಡ್ ಅನ್ನು ಪಡೆಯುವ ಮಾರ್ಗವೆಂದರೆ ಪಠ್ಯ() ಅನ್ನು ಬಳಸುವುದು, ಇದು ಫಂಕ್ಷನ್ ಸಿಗ್ನೇಚರ್ನಂತೆ ಕಾಣುತ್ತದೆ - ಮತ್ತು ಅದು. ಇದು ಅಂಶದ ಪಠ್ಯ ನೋಡ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ನಮ್ಮ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ಮೂರು ಲಿ ಅಂಶಗಳಿವೆ, ಪ್ರತಿಯೊಂದೂ ಪಠ್ಯವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ ("ಒಂದು", "ಎರಡು" ಮತ್ತು "ಮೂರು").
ಪಠ್ಯ() ಪ್ರಶ್ನೆಯ ಇನ್ನೊಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ. ಇದು ನಮ್ಮ ಮಾರ್ಕ್ಅಪ್ ಎಂದು ಊಹಿಸಿ:
href ಗುಣಲಕ್ಷಣ ಮೌಲ್ಯವನ್ನು ಹಿಂದಿರುಗಿಸುವ ಪ್ರಶ್ನೆಯನ್ನು ಬರೆಯೋಣ: document.queryXPaths("//a[text() = 'ಸೈನ್ ಇನ್']/@href").ಫಲಿತಾಂಶಗಳು.
ಇದು ಪ್ರಸ್ತುತ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ XPath ಪ್ರಶ್ನೆಯಾಗಿದೆ, ಕೊನೆಯ ಉದಾಹರಣೆಯಂತೆ, ಆದರೆ ಈ ಬಾರಿ ನಾವು "ಸೈನ್ ಇನ್" ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ಲಿಂಕ್ನ (ಒಂದು ಅಂಶ) href ಗುಣಲಕ್ಷಣವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತೇವೆ. ನಿಜವಾದ ಮರಳಿದೆಫಲಿತಾಂಶವು ["/login.html"] ಆಗಿದೆ. XPath ಕಾರ್ಯಗಳ ಅವಲೋಕನ ಹಲವಾರು XPath ಫಂಕ್ಷನ್ಗಳಿವೆ, ಮತ್ತು ನೀವು ಬಹುಶಃ ಅವರೊಂದಿಗೆ ಪರಿಚಯವಿಲ್ಲದಿರಬಹುದು. ಕೆಳಗಿನವುಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ತಿಳಿದುಕೊಳ್ಳಲು ಯೋಗ್ಯವಾದ ಹಲವಾರು ಇವೆ:
ಒಂದು ಪಠ್ಯವು ನಿರ್ದಿಷ್ಟ ಇತರ ಪಠ್ಯದ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಪ್ರಾರಂಭವಾದರೆ, href ಗುಣಲಕ್ಷಣವು http: ನೊಂದಿಗೆ ಪ್ರಾರಂಭವಾದರೆ, starts-with(@href, 'http:') ನಿಜವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಒಳಗೊಂಡಿರುವ ಪಠ್ಯವು ನಿರ್ದಿಷ್ಟ ಇತರ ಪಠ್ಯ ಉದಾಹರಣೆಯನ್ನು ಹೊಂದಿದ್ದರೆ, ಪಠ್ಯ ನೋಡ್ನಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ "ಸ್ಮಾಶಿಂಗ್ ಮ್ಯಾಗಜೀನ್" ಪದಗಳು ಇದ್ದಲ್ಲಿ (ಪಠ್ಯ(), "ಸ್ಮಾಶಿಂಗ್ ಮ್ಯಾಗಜೀನ್") ನಿಜವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಕೌಂಟ್ ರಿಟರ್ನ್ ಒಂದು ಪ್ರಶ್ನೆಗೆ ಎಷ್ಟು ಹೊಂದಾಣಿಕೆಗಳಿವೆ ಎಂಬುದರ ಎಣಿಕೆಯನ್ನು ನೀಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಎಣಿಕೆ(//*[starts-with(@href, 'http:']) ಸಂಧರ್ಭ ನೋಡ್ನಲ್ಲಿ ಎಷ್ಟು ಲಿಂಕ್ಗಳು href ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಹೊಂದಿವೆ ಎಂಬುದರ ಎಣಿಕೆಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಅದು http: ನೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುವ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ. substringನೀವು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ರವಾನಿಸುವುದನ್ನು ಹೊರತುಪಡಿಸಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಬ್ಸ್ಟ್ರಿಂಗ್ನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಸಬ್ಸ್ಟ್ರಿಂಗ್ ("ನನ್ನ ಪಠ್ಯ", 2, 4) "y t" ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. substring-before ಇನ್ನೊಂದು ಸ್ಟ್ರಿಂಗ್ನ ಮೊದಲು ಸ್ಟ್ರಿಂಗ್ನ ಭಾಗವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, substing-before("my text", " ") "my" ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಅಂತೆಯೇ, substring-before("hi","bye") ಖಾಲಿ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. substring-after ಮತ್ತೊಂದು ಸ್ಟ್ರಿಂಗ್ ನಂತರ ಸ್ಟ್ರಿಂಗ್ನ ಭಾಗವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, substing-after("my text", " ") "text" ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಅಂತೆಯೇ, ಸಬ್ಸ್ಟ್ರಿಂಗ್-ಆಫ್ಟರ್("ಹಾಯ್","ಬೈ") ಖಾಲಿ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. normalize-space ಲೀಡಿಂಗ್ ಮತ್ತು ಟ್ರೇಲಿಂಗ್ ವೈಟ್ಸ್ಪೇಸ್ ಅನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ಮತ್ತು ವೈಟ್ಸ್ಪೇಸ್ ಅಕ್ಷರಗಳ ಅನುಕ್ರಮವನ್ನು ಒಂದೇ ಜಾಗದಿಂದ ಬದಲಾಯಿಸುವ ಮೂಲಕ ವೈಟ್ಸ್ಪೇಸ್ನೊಂದಿಗೆ ಆರ್ಗ್ಯುಮೆಂಟ್ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. notReturns a boolean true ವಾದವು ತಪ್ಪಾಗಿದ್ದರೆ, ಇಲ್ಲದಿದ್ದರೆ ತಪ್ಪು. trueReturns boolean true. ಸುಳ್ಳು ಬೂಲಿಯನ್ ತಪ್ಪನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. concatಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾನ್ಕಾಟ್ನಂತೆಯೇ, ನೀವು ಅದನ್ನು ಸ್ಟ್ರಿಂಗ್ನಲ್ಲಿ ವಿಧಾನವಾಗಿ ರನ್ ಮಾಡದ ಹೊರತು. ಬದಲಾಗಿ, ನೀವು ಜೋಡಿಸಲು ಬಯಸುವ ಎಲ್ಲಾ ತಂತಿಗಳನ್ನು ಹಾಕುತ್ತೀರಿ. string-lengthಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸ್ಟ್ರಿಂಗ್-ಉದ್ದದಂತೆಯೇ ಅಲ್ಲ, ಬದಲಿಗೆ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ನೀಡಲಾದ ಸ್ಟ್ರಿಂಗ್ನ ಉದ್ದವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಅನುವಾದ ಇದು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಮೂರನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ಗೆ ಬದಲಾಯಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಅನುವಾದಿಸಿ("abcdef", "abc", "XYZ") ಔಟ್ಪುಟ್ಗಳು XYZdef.
ಈ ನಿರ್ದಿಷ್ಟ XPath ಕಾರ್ಯಗಳ ಹೊರತಾಗಿ, ಅವುಗಳ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೌಂಟರ್ಪಾರ್ಟ್ಗಳಂತೆಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಹಲವಾರು ಇತರ ಕಾರ್ಯಗಳಿವೆ - ಅಥವಾ ಮೂಲಭೂತವಾಗಿ ಯಾವುದೇ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಯಲ್ಲಿ ಕೌಂಟರ್ಪಾರ್ಟ್ಗಳು - ನೀವು ಬಹುಶಃ ಮಹಡಿ, ಸೀಲಿಂಗ್, ಸುತ್ತಿನಲ್ಲಿ, ಮೊತ್ತ ಮತ್ತು ಮುಂತಾದವುಗಳಂತಹ ಉಪಯುಕ್ತತೆಯನ್ನು ಕಾಣಬಹುದು. ಕೆಳಗಿನ ಡೆಮೊ ಈ ಪ್ರತಿಯೊಂದು ಕಾರ್ಯಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ: ಬ್ರಿಯಾನ್ ರಾಸ್ಮುಸ್ಸೆನ್ ಅವರ ಪೆನ್ ಎಕ್ಸ್ಪಾತ್ ಸಂಖ್ಯಾತ್ಮಕ ಕಾರ್ಯಗಳನ್ನು [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. ಹೆಚ್ಚಿನ ಸ್ಟ್ರಿಂಗ್ ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಫಂಕ್ಷನ್ಗಳಂತೆ, ಹಲವಾರು ಸಂಖ್ಯಾತ್ಮಕವಾದವುಗಳು ಒಂದೇ ಇನ್ಪುಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಸಹಜವಾಗಿ, ಏಕೆಂದರೆ ಕೊನೆಯ XPath ಉದಾಹರಣೆಯಲ್ಲಿರುವಂತೆ ಅವುಗಳನ್ನು ಪ್ರಶ್ನಿಸಲು ಬಳಸಬೇಕು: //li[floor(text()) > 250]/@val
ನೀವು ಅವುಗಳನ್ನು ಬಳಸಿದರೆ, ಹೆಚ್ಚಿನ ಉದಾಹರಣೆಗಳಂತೆ, ನೀವು ಮಾರ್ಗಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವ ಮೊದಲ ನೋಡ್ನಲ್ಲಿ ಅದನ್ನು ರನ್ ಮಾಡುತ್ತೀರಿ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಈಗಾಗಲೇ ತನ್ನದೇ ಆದ ರೀತಿಯ ಪರಿವರ್ತನೆ ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿರುವ ಕಾರಣ ನೀವು ಬಹುಶಃ ತಪ್ಪಿಸಬೇಕಾದ ಕೆಲವು ರೀತಿಯ ಪರಿವರ್ತನೆ ಕಾರ್ಯಗಳು ಸಹ ಇವೆ. ಆದರೆ ಇತರ ಸಂಖ್ಯೆಗಳ ವಿರುದ್ಧ ಅದನ್ನು ಪರಿಶೀಲಿಸಲು ನೀವು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಸಂಖ್ಯೆಗೆ ಪರಿವರ್ತಿಸಲು ಬಯಸುವ ಸಂದರ್ಭಗಳು ಇರಬಹುದು. ಯಾವುದೋ ಪ್ರಕಾರವನ್ನು ಹೊಂದಿಸುವ ಕಾರ್ಯಗಳು ಬೂಲಿಯನ್, ಸಂಖ್ಯೆ, ಸ್ಟ್ರಿಂಗ್ ಮತ್ತು ನೋಡ್. ಇವು ಪ್ರಮುಖ XPath ಡೇಟಾಟೈಪ್ಗಳಾಗಿವೆ. ಮತ್ತು ನೀವು ಊಹಿಸುವಂತೆ, ಈ ಹೆಚ್ಚಿನ ಕಾರ್ಯಗಳನ್ನು DOM ನೋಡ್ಗಳಲ್ಲದ ಡೇಟಾಟೈಪ್ಗಳಲ್ಲಿ ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಸಬ್ಸ್ಟ್ರಿಂಗ್-ಆಫ್ಟರ್ ನಾವು ಈಗಾಗಲೇ ಆವರಿಸಿರುವಂತೆ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಆದರೆ ಇದು href ಗುಣಲಕ್ಷಣದಿಂದ ಸ್ಟ್ರಿಂಗ್ ಆಗಿರಬಹುದು. ಇದು ಕೇವಲ ಸ್ಟ್ರಿಂಗ್ ಆಗಿರಬಹುದು:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
ನಿಸ್ಸಂಶಯವಾಗಿ, ಈ ಉದಾಹರಣೆಯು ನಮಗೆ ಫಲಿತಾಂಶಗಳ ಶ್ರೇಣಿಯನ್ನು ["ಜಗತ್ತು"] ಎಂದು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ತೋರಿಸಲು, ನಾನು DOM ನೋಡ್ಗಳಲ್ಲದ ವಿಷಯಗಳ ವಿರುದ್ಧ ಕಾರ್ಯಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಡೆಮೊ ಪುಟವನ್ನು ಮಾಡಿದ್ದೇನೆ: ಬ್ರಿಯಾನ್ ರಾಸ್ಮುಸ್ಸೆನ್ ಅವರ ಪೆನ್ ಕ್ವೆರಿ ಎಕ್ಸ್ಪಾತ್ [ಫೋರ್ಕ್ಡ್] ಅನ್ನು ನೋಡಿ. ಅನುವಾದ ಕಾರ್ಯದ ಆಶ್ಚರ್ಯಕರ ಅಂಶವನ್ನು ನೀವು ಗಮನಿಸಬೇಕು, ಅಂದರೆ ನೀವು ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಅಕ್ಷರವನ್ನು ಹೊಂದಿದ್ದರೆ (ಅಂದರೆ, ನೀವು ಅನುವಾದಿಸಲು ಬಯಸುವ ಅಕ್ಷರಗಳ ಪಟ್ಟಿ) ಮತ್ತು ಅನುವಾದಿಸಲು ಯಾವುದೇ ಹೊಂದಾಣಿಕೆಯ ಅಕ್ಷರವಿಲ್ಲದಿದ್ದರೆ, ಆ ಅಕ್ಷರವನ್ನು ಔಟ್ಪುಟ್ನಿಂದ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ಹೀಗಾಗಿ, ಇದು:
ಅನುವಾದಿಸಿ ('ಹಲೋ, ನನ್ನ ಹೆಸರು ಇನಿಗೊ ಮೊಂಟೊಯಾ, ನೀವು ನನ್ನ ತಂದೆಯನ್ನು ಕೊಂದಿದ್ದೀರಿ, ಸಾಯಲು ತಯಾರಿ','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…ಸ್ಪೇಸ್ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಸ್ಟ್ರಿಂಗ್ನಲ್ಲಿ ಫಲಿತಾಂಶಗಳು: [" * * ** "]
ಇದರರ್ಥ "a" ಅಕ್ಷರವನ್ನು ನಕ್ಷತ್ರ ಚಿಹ್ನೆ (*) ಗೆ ಅನುವಾದಿಸಲಾಗುತ್ತಿದೆ, ಆದರೆ ಟಾರ್ಗೆಟ್ ಸ್ಟ್ರಿಂಗ್ ನೀಡಿದ ಅನುವಾದವನ್ನು ಹೊಂದಿರದ ಪ್ರತಿಯೊಂದು ಅಕ್ಷರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ನಮಗೆ ಉಳಿದಿರುವುದು ವೈಟ್ಸ್ಪೇಸ್ ಮಾತ್ರಅನುವಾದಿಸಿದ "a" ಅಕ್ಷರಗಳ ನಡುವೆ. ನಂತರ ಮತ್ತೊಮ್ಮೆ, ಈ ಪ್ರಶ್ನೆ:
ಅನುವಾದಿಸಿ ('ಹಲೋ, ನನ್ನ ಹೆಸರು ಇನಿಗೊ ಮೊಂಟೊಯಾ, ನೀವು ನನ್ನ ತಂದೆಯನ್ನು ಕೊಂದಿದ್ದೀರಿ, ಸಾಯಲು ಸಿದ್ಧರಾಗಿ','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','****************************************************************************************************************************************************************
…ಸಮಸ್ಯೆಯನ್ನು ಹೊಂದಿಲ್ಲ ಮತ್ತು ಈ ರೀತಿ ಕಾಣುವ ಫಲಿತಾಂಶವನ್ನು ನೀಡುತ್ತದೆ:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** **"
XPath ಭಾಷಾಂತರ ಕಾರ್ಯವನ್ನು ನಿಖರವಾಗಿ ಮಾಡಲು JavaScript ನಲ್ಲಿ ಯಾವುದೇ ಸುಲಭವಾದ ಮಾರ್ಗವಿಲ್ಲ ಎಂದು ನಿಮಗೆ ಅನಿಸಬಹುದು, ಆದಾಗ್ಯೂ ಅನೇಕ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿಗಳೊಂದಿಗೆ ಎಲ್ಲವನ್ನೂ ಬದಲಾಯಿಸಬಹುದು. ನಾನು ಪ್ರದರ್ಶಿಸಿದ ಅದೇ ವಿಧಾನವನ್ನು ನೀವು ಬಳಸಬಹುದು, ಆದರೆ ನೀವು ಸ್ಟ್ರಿಂಗ್ಗಳನ್ನು ಭಾಷಾಂತರಿಸಲು ಬಯಸಿದರೆ ಅದು ಅತ್ಯುತ್ತಮವಾಗಿರುತ್ತದೆ. ಕೆಳಗಿನ ಡೆಮೊ JavaScript ಆವೃತ್ತಿಯನ್ನು ಒದಗಿಸಲು XPath ನ ಅನುವಾದ ಕಾರ್ಯವನ್ನು ಸುತ್ತುತ್ತದೆ: ಬ್ರಿಯಾನ್ ರಾಸ್ಮುಸ್ಸೆನ್ ಅವರ ಪೆನ್ ಅನುವಾದ ಕಾರ್ಯವನ್ನು [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. ಅಂತಹದನ್ನು ನೀವು ಎಲ್ಲಿ ಬಳಸಬಹುದು? ಮೂರು-ಸ್ಥಳದ ಆಫ್ಸೆಟ್ನೊಂದಿಗೆ ಸೀಸರ್ ಸೈಫರ್ ಎನ್ಕ್ರಿಪ್ಶನ್ ಅನ್ನು ಪರಿಗಣಿಸಿ (ಉದಾ., 48 B.C. ಯಿಂದ ಟಾಪ್-ಆಫ್-ಲೈನ್ ಎನ್ಕ್ರಿಪ್ಶನ್):
ಅನುವಾದಿಸಿ ("ಸೀಸರ್ ರೂಬಿಕಾನ್ ಅನ್ನು ದಾಟಲು ಯೋಜಿಸುತ್ತಿದ್ದಾನೆ!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
ಇನ್ಪುಟ್ ಪಠ್ಯ “ಸೀಸರ್ ರೂಬಿಕಾನ್ ದಾಟಲು ಯೋಜಿಸುತ್ತಿದ್ದಾನೆ!” ಫಲಿತಾಂಶಗಳು "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" ವಿಭಿನ್ನ ಸಾಧ್ಯತೆಗಳ ಮತ್ತೊಂದು ತ್ವರಿತ ಉದಾಹರಣೆಯನ್ನು ನೀಡಲು, ನಾನು ಲೋಹದ ಕಾರ್ಯವನ್ನು ಮಾಡಿದ್ದೇನೆ ಅದು ಸ್ಟ್ರಿಂಗ್ ಇನ್ಪುಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು umlauts ತೆಗೆದುಕೊಳ್ಳುವ ಎಲ್ಲಾ ಅಕ್ಷರಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಪಠ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಲು ಅನುವಾದ ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತದೆ. ಬ್ರಿಯಾನ್ ರಾಸ್ಮುಸ್ಸೆನ್ ಅವರ ಪೆನ್ ಮೆಟಲ್ ಕಾರ್ಯವನ್ನು [ಫೋರ್ಕ್ಡ್] ನೋಡಿ.
const metal = (str) => { ಅನುವಾದವನ್ನು ಹಿಂತಿರುಗಿಸಿ(str, "AOUaou","ÄÖÜäöü"); }
ಮತ್ತು, "ಮಾಟ್ಲಿ ಕ್ರೂ ರೂಲ್ಸ್, ರಾಕ್ ಆನ್ ಡ್ಯೂಡ್ಸ್!" ಎಂಬ ಪಠ್ಯವನ್ನು ನೀಡಿದರೆ, "ಮಾಟ್ಲಿ ಕ್ರೂ ರೂಲ್ಸ್, ರಾಕ್ ಓನ್ ಡ್ಯೂಡ್ಸ್!" ನಿಸ್ಸಂಶಯವಾಗಿ, ಒಬ್ಬರು ಈ ಕಾರ್ಯದ ಎಲ್ಲಾ ರೀತಿಯ ವಿಡಂಬನೆ ಬಳಕೆಗಳನ್ನು ಹೊಂದಿರಬಹುದು. ಅದು ನೀವೇ ಆಗಿದ್ದರೆ, ಈ TVTropes ಲೇಖನವು ನಿಮಗೆ ಸಾಕಷ್ಟು ಸ್ಫೂರ್ತಿಯನ್ನು ಒದಗಿಸಬೇಕು. XPath ಜೊತೆಗೆ CSS ಅನ್ನು ಬಳಸುವುದು XPath ಜೊತೆಗೆ CSS ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಬಳಸುವುದಕ್ಕೆ ನಮ್ಮ ಮುಖ್ಯ ಕಾರಣವನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಿ: CSS ಬಹುಮಟ್ಟಿಗೆ ಕ್ಲಾಸ್ ಏನೆಂದು ಅರ್ಥಮಾಡಿಕೊಂಡಿದೆ, ಆದರೆ XPath ನೊಂದಿಗೆ ನೀವು ಮಾಡಬಹುದಾದ ಅತ್ಯುತ್ತಮವಾದದ್ದು ವರ್ಗ ಗುಣಲಕ್ಷಣದ ಸ್ಟ್ರಿಂಗ್ ಹೋಲಿಕೆಗಳು. ಇದು ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಆದರೆ ನೀವು ಎಂದಾದರೂ .primaryLinks ಮತ್ತು .primaryLinks2 ಎಂಬ ಹೆಸರಿನ ತರಗತಿಗಳನ್ನು ರಚಿಸಿದ ಮತ್ತು ನೀವು .primaryLinks ವರ್ಗವನ್ನು ಪಡೆಯಲು XPath ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಹೇಳುವುದಾದರೆ, ನೀವು ಸಮಸ್ಯೆಗಳಿಗೆ ಸಿಲುಕುವ ಸಾಧ್ಯತೆಯಿದೆ. ಅಂತಹ ಸಿಲ್ಲಿ ಏನೂ ಇಲ್ಲದಿರುವವರೆಗೆ, ನೀವು ಬಹುಶಃ XPath ಅನ್ನು ಬಳಸುತ್ತೀರಿ. ಆದರೆ ಜನರು ಅಂತಹ ಸಿಲ್ಲಿ ಕೆಲಸಗಳನ್ನು ಮಾಡುವ ಸ್ಥಳಗಳಲ್ಲಿ ನಾನು ಕೆಲಸ ಮಾಡಿದ್ದೇನೆ ಎಂದು ವರದಿ ಮಾಡಲು ನನಗೆ ಬೇಸರವಾಗಿದೆ. CSS ಮತ್ತು XPath ಅನ್ನು ಒಟ್ಟಿಗೆ ಬಳಸುವ ಮತ್ತೊಂದು ಡೆಮೊ ಇಲ್ಲಿದೆ. ಡಾಕ್ಯುಮೆಂಟ್ನ ನೋಡ್ ಅಲ್ಲದ ಕಾಂಟೆಕ್ಸ್ಟ್ ನೋಡ್ನಲ್ಲಿ ನಾವು XPath ಅನ್ನು ಚಲಾಯಿಸಲು ಕೋಡ್ ಅನ್ನು ಬಳಸಿದಾಗ ಏನಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಇದು ತೋರಿಸುತ್ತದೆ. ಬ್ರಿಯಾನ್ ರಾಸ್ಮುಸ್ಸೆನ್ರಿಂದ ಪೆನ್ css ಮತ್ತು xpath ಒಟ್ಟಿಗೆ [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. CSS ಪ್ರಶ್ನೆಯು .relatedarticles a ಆಗಿದೆ, ಇದು .relatedarticles ವರ್ಗವನ್ನು ನಿಯೋಜಿಸಲಾದ div ನಲ್ಲಿ ಎರಡು ಅಂಶಗಳನ್ನು ಪಡೆಯುತ್ತದೆ. ಅದರ ನಂತರ ಮೂರು "ಕೆಟ್ಟ" ಪ್ರಶ್ನೆಗಳು, ಅಂದರೆ, ಈ ಅಂಶಗಳನ್ನು ಸಂದರ್ಭ ನೋಡ್ನಂತೆ ಚಲಾಯಿಸುವಾಗ ನಾವು ಏನು ಮಾಡಬೇಕೆಂದು ನಾವು ಬಯಸುವುದಿಲ್ಲವೋ ಅದನ್ನು ಮಾಡದ ಪ್ರಶ್ನೆಗಳು. ಅವರು ನೀವು ನಿರೀಕ್ಷಿಸುವುದಕ್ಕಿಂತ ವಿಭಿನ್ನವಾಗಿ ಏಕೆ ವರ್ತಿಸುತ್ತಿದ್ದಾರೆಂದು ನಾನು ವಿವರಿಸಬಲ್ಲೆ. ಪ್ರಶ್ನೆಯಲ್ಲಿರುವ ಮೂರು ಕೆಟ್ಟ ಪ್ರಶ್ನೆಗಳು:
//text(): ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಪಠ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. //a/text(): ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿರುವ ಲಿಂಕ್ಗಳ ಒಳಗಿನ ಎಲ್ಲಾ ಪಠ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ./a/text(): ಯಾವುದೇ ಫಲಿತಾಂಶಗಳನ್ನು ಹಿಂತಿರುಗಿಸುವುದಿಲ್ಲ.
ಈ ಫಲಿತಾಂಶಗಳಿಗೆ ಕಾರಣವೆಂದರೆ ನಿಮ್ಮ ಸಂದರ್ಭವು CSS ಪ್ರಶ್ನೆಯಿಂದ ಹಿಂತಿರುಗಿಸಲಾದ ಅಂಶವಾಗಿದ್ದರೂ, // ಇಡೀ ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ವಿರುದ್ಧವಾಗಿದೆ. ಇದು XPath ನ ಶಕ್ತಿಯಾಗಿದೆ; CSS ಒಂದು ನೋಡ್ನಿಂದ ಪೂರ್ವಜರವರೆಗೂ ಮತ್ತು ನಂತರ ಆ ಪೂರ್ವಜರ ಒಡಹುಟ್ಟಿದವರ ಬಳಿಗೆ ಹೋಗಲು ಸಾಧ್ಯವಿಲ್ಲ ಮತ್ತು ಆ ಒಡಹುಟ್ಟಿದವರ ವಂಶಸ್ಥರಿಗೆ ಕೆಳಗೆ ನಡೆಯಲು ಸಾಧ್ಯವಿಲ್ಲ. ಆದರೆ XPath ಮಾಡಬಹುದು. ಏತನ್ಮಧ್ಯೆ, ./ ಪ್ರಸ್ತುತ ನೋಡ್ನ ಮಕ್ಕಳನ್ನು ಪ್ರಶ್ನಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಡಾಟ್ (.) ಪ್ರಸ್ತುತ ನೋಡ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ ಮತ್ತು ಫಾರ್ವರ್ಡ್ ಸ್ಲ್ಯಾಷ್ (/) ಕೆಲವು ಚೈಲ್ಡ್ ನೋಡ್ಗೆ ಹೋಗುವುದನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ - ಇದು ಗುಣಲಕ್ಷಣ, ಅಂಶ ಅಥವಾ ಪಠ್ಯವೇ ಎಂಬುದನ್ನು ಮಾರ್ಗದ ಮುಂದಿನ ಭಾಗದಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ. ಆದರೆ CSS ಪ್ರಶ್ನೆಯಿಂದ ಆಯ್ಕೆಮಾಡಿದ ಯಾವುದೇ ಮಗು ಅಂಶವಿಲ್ಲ, ಹೀಗಾಗಿ ಆ ಪ್ರಶ್ನೆಯು ಏನನ್ನೂ ಹಿಂತಿರುಗಿಸುವುದಿಲ್ಲ. ಆ ಕೊನೆಯ ಡೆಮೊದಲ್ಲಿ ಮೂರು ಉತ್ತಮ ಪ್ರಶ್ನೆಗಳಿವೆ:
.//ಪಠ್ಯ(), ./ಪಠ್ಯ(), ಸಾಮಾನ್ಯೀಕರಣ-ಸ್ಪೇಸ್(./ಪಠ್ಯ()).
ಸಾಮಾನ್ಯೀಕರಣ-ಸ್ಪೇಸ್ ಪ್ರಶ್ನೆಯು XPath ಕಾರ್ಯದ ಬಳಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಆದರೆ ಇತರ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ. HTML ಅನ್ನು ಈ ರೀತಿ ರಚಿಸಲಾಗಿದೆ:
ಸೆಲೆನಿಯಮ್ ವೆಬ್ಡ್ರೈವರ್ನೊಂದಿಗೆ ನಿಮ್ಮ ವೈಶಿಷ್ಟ್ಯ ಪರೀಕ್ಷೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲಾಗುತ್ತಿದೆ
ಪ್ರಶ್ನೆಯು ಪಠ್ಯ ನೋಡ್ನ ಪ್ರಾರಂಭ ಮತ್ತು ಕೊನೆಯಲ್ಲಿ ಒಂದು ಸಾಲಿನ ಫೀಡ್ ಅನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ,ಮತ್ತು ಸಾಮಾನ್ಯೀಕರಣ-ಸ್ಪೇಸ್ ಇದನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಇನ್ಪುಟ್ XPath ಜೊತೆಗೆ ಬೂಲಿಯನ್ ಅನ್ನು ಹೊರತುಪಡಿಸಿ ಯಾವುದನ್ನಾದರೂ ಹಿಂತಿರುಗಿಸುವ ಯಾವುದೇ XPath ಕಾರ್ಯವನ್ನು ಬಳಸುವುದು ಇತರ ಕಾರ್ಯಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ಕೆಳಗಿನ ಡೆಮೊ ಹಲವಾರು ಉದಾಹರಣೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ: ಬ್ರಿಯಾನ್ ರಾಸ್ಮುಸ್ಸೆನ್ ಅವರ ಪೆನ್ xpath ಕಾರ್ಯಗಳ ಉದಾಹರಣೆಗಳನ್ನು [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. ಮೊದಲ ಉದಾಹರಣೆಯು ನೀವು ಗಮನಹರಿಸಬೇಕಾದ ಸಮಸ್ಯೆಯನ್ನು ತೋರಿಸುತ್ತದೆ. ನಿರ್ದಿಷ್ಟವಾಗಿ, ಈ ಕೆಳಗಿನ ಕೋಡ್:
document.queryXPaths("substring-after(//a/@href,'https://')");
…ಒಂದು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
ಇದು ಅರ್ಥಪೂರ್ಣವಾಗಿದೆ, ಸರಿ? ಈ ಕಾರ್ಯಗಳು ಅರೇಗಳನ್ನು ಹಿಂತಿರುಗಿಸುವುದಿಲ್ಲ ಆದರೆ ಒಂದೇ ತಂತಿಗಳು ಅಥವಾ ಏಕ ಸಂಖ್ಯೆಗಳನ್ನು ಹಿಂತಿರುಗಿಸುವುದಿಲ್ಲ. ಬಹು ಫಲಿತಾಂಶಗಳೊಂದಿಗೆ ಎಲ್ಲಿಯಾದರೂ ಕಾರ್ಯವನ್ನು ರನ್ ಮಾಡುವುದು ಮೊದಲ ಫಲಿತಾಂಶವನ್ನು ಮಾತ್ರ ನೀಡುತ್ತದೆ. ಎರಡನೇ ಫಲಿತಾಂಶವು ನಮಗೆ ನಿಜವಾಗಿಯೂ ಏನು ಬೇಕು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
ಇದು ಎರಡು ತಂತಿಗಳ ಶ್ರೇಣಿಯನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿನ ಕಾರ್ಯಗಳಂತೆ XPath ಕಾರ್ಯಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡಬಹುದು. ಆದ್ದರಿಂದ, ನಾವು ಸ್ಮಾಶಿಂಗ್ ಮ್ಯಾಗಜೀನ್ URL ರಚನೆಯನ್ನು ತಿಳಿದಿದ್ದರೆ, ನಾವು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಮಾಡಬಹುದು (ಟೆಂಪ್ಲೇಟ್ ಅಕ್ಷರಗಳನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ): `ಅನುವಾದ ಮಾಡಿ ಸಬ್ಸ್ಟ್ರಿಂಗ್ ( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/','')`
ಇದು ಏನು ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಕಾಮೆಂಟ್ಗಳ ಅಗತ್ಯವಿರುವ ಮಟ್ಟಿಗೆ ಇದು ಸ್ವಲ್ಪ ಸಂಕೀರ್ಣವಾಗುತ್ತಿದೆ: www.smashingmagazine.com/ ನಂತರದ href ಗುಣಲಕ್ಷಣದಿಂದ ಎಲ್ಲಾ URL ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ, ಮೊದಲ ಒಂಬತ್ತು ಅಕ್ಷರಗಳನ್ನು ತೆಗೆದುಹಾಕಿ, ನಂತರ ಫಾರ್ವರ್ಡ್ ಸ್ಲ್ಯಾಷ್ (/) ಅಕ್ಷರವನ್ನು ಯಾವುದಕ್ಕೂ ಭಾಷಾಂತರಿಸಿ ಕೊನೆಗೊಳ್ಳುವ ಫಾರ್ವರ್ಡ್ ಸ್ಲ್ಯಾಷ್ ಅನ್ನು ತೊಡೆದುಹಾಕಲು. ಪರಿಣಾಮವಾಗಿ ರಚನೆ:
["ಫೀಚರ್-ಟೆಸ್ಟಿಂಗ್-ಸೆಲೆನಿಯಮ್-ವೆಬ್ಡ್ರೈವರ್","ಸ್ವಯಂಚಾಲಿತ-ಪರೀಕ್ಷೆ-ಫಲಿತಾಂಶಗಳು-ಸುಧಾರಣೆ-ಪ್ರವೇಶಸಾಧ್ಯತೆ"]
ಇನ್ನಷ್ಟು XPath ಬಳಕೆಯ ಪ್ರಕರಣಗಳು XPath ನಿಜವಾಗಿಯೂ ಪರೀಕ್ಷೆಯಲ್ಲಿ ಹೊಳೆಯಬಹುದು. ಕಾರಣವನ್ನು ನೋಡಲು ಕಷ್ಟವಾಗುವುದಿಲ್ಲ, ಏಕೆಂದರೆ DOM ನಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಅಂಶವನ್ನು DOM ನಲ್ಲಿ ಯಾವುದೇ ಸ್ಥಾನದಿಂದ ಪಡೆಯಲು XPath ಅನ್ನು ಬಳಸಬಹುದು, ಆದರೆ CSS ಗೆ ಸಾಧ್ಯವಿಲ್ಲ. ನೀವು ಅನೇಕ ಆಧುನಿಕ ನಿರ್ಮಾಣ ವ್ಯವಸ್ಥೆಗಳಲ್ಲಿ ಸ್ಥಿರವಾಗಿ ಉಳಿದಿರುವ CSS ತರಗತಿಗಳನ್ನು ಎಣಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಆದರೆ XPath ನೊಂದಿಗೆ, ಬದಲಾಗುತ್ತಿರುವ DOM ರಚನೆಯನ್ನು ಲೆಕ್ಕಿಸದೆಯೇ ಒಂದು ಅಂಶದ ಪಠ್ಯ ವಿಷಯದ ಕುರಿತು ನಾವು ಹೆಚ್ಚು ದೃಢವಾದ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಮಾಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಚೇತರಿಸಿಕೊಳ್ಳುವ XPath ಪರೀಕ್ಷೆಗಳನ್ನು ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ತಂತ್ರಗಳ ಕುರಿತು ಸಂಶೋಧನೆ ನಡೆದಿದೆ. ಯಾವುದನ್ನಾದರೂ ಮರುಹೆಸರಿಸಲಾಗಿದೆ ಅಥವಾ ತೆಗೆದುಹಾಕಲಾಗಿದೆ ಎಂಬ ಕಾರಣದಿಂದಾಗಿ CSS ಸೆಲೆಕ್ಟರ್ ಇನ್ನು ಮುಂದೆ ಕಾರ್ಯನಿರ್ವಹಿಸದ ಕಾರಣ ಪರೀಕ್ಷೆಗಳು ಫ್ಲೇಕ್ ಔಟ್ ಮತ್ತು ವಿಫಲಗೊಳ್ಳುವುದಕ್ಕಿಂತ ಕೆಟ್ಟದ್ದಲ್ಲ. ಬಹು ಲೊಕೇಟರ್ ಹೊರತೆಗೆಯುವಿಕೆಯಲ್ಲಿ XPath ನಿಜವಾಗಿಯೂ ಉತ್ತಮವಾಗಿದೆ. ಒಂದು ಅಂಶವನ್ನು ಹೊಂದಿಸಲು XPath ಪ್ರಶ್ನೆಗಳನ್ನು ಬಳಸಲು ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ಮಾರ್ಗಗಳಿವೆ. ಸಿಎಸ್ಎಸ್ನಲ್ಲೂ ಇದು ನಿಜ. ಆದರೆ XPath ಪ್ರಶ್ನೆಗಳು ಹೆಚ್ಚು ಉದ್ದೇಶಿತ ರೀತಿಯಲ್ಲಿ ವಿಷಯಗಳನ್ನು ಡ್ರಿಲ್ ಮಾಡಬಹುದು ಅದು ಹಿಂತಿರುಗಿಸುವುದನ್ನು ಮಿತಿಗೊಳಿಸುತ್ತದೆ, ಹಲವಾರು ಸಂಭವನೀಯ ಹೊಂದಾಣಿಕೆಗಳು ಇರುವ ನಿರ್ದಿಷ್ಟ ಹೊಂದಾಣಿಕೆಯನ್ನು ಕಂಡುಹಿಡಿಯಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, div ಒಳಗೆ ಇರುವ ನಿರ್ದಿಷ್ಟ h2 ಅಂಶವನ್ನು ಹಿಂತಿರುಗಿಸಲು ನಾವು XPath ಅನ್ನು ಬಳಸಬಹುದು, ಅದು ಒಡಹುಟ್ಟಿದವರ DIV ಅನ್ನು ತಕ್ಷಣವೇ ಅನುಸರಿಸುತ್ತದೆ, ಅದು ಡೇಟಾ-testID="ಲೀಡರ್" ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಮಗುವಿನ ಇಮೇಜ್ ಅಂಶವನ್ನು ಹೊಂದಿರುತ್ತದೆ:
ಈ ಶೀರ್ಷಿಕೆಯನ್ನು ಪಡೆಯಬೇಡಿ
ಈ ಶೀರ್ಷಿಕೆಯನ್ನೂ ಪಡೆಯಬೇಡಿ
ಲೀಡರ್ ಚಿತ್ರಕ್ಕಾಗಿ ಹೆಡರ್
ಇದು ಪ್ರಶ್ನೆ: document.queryXPaths(` //ಡಿವಿ[ ಕೆಳಗಿನ-ಸಹೋದರ::div[1] /img[@data-testID='ಲೀಡರ್'] ] /h2/ ಪಠ್ಯ() `);
ಅದು ಹೇಗೆ ಒಟ್ಟಿಗೆ ಬರುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಡೆಮೊದಲ್ಲಿ ಬಿಡಿ: ಬ್ರಿಯಾನ್ ರಾಸ್ಮುಸ್ಸೆನ್ ಅವರ ಪೆನ್ ಕಾಂಪ್ಲೆಕ್ಸ್ H2 ಪ್ರಶ್ನೆಯನ್ನು [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. ಆದ್ದರಿಂದ, ಹೌದು. XPath ಬಳಸಿಕೊಂಡು ಪರೀಕ್ಷೆಯಲ್ಲಿ ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಸಾಕಷ್ಟು ಸಂಭವನೀಯ ಮಾರ್ಗಗಳಿವೆ. XSLT 1.0 ಅಸಮ್ಮತಿ ಬ್ರೌಸರ್ನಿಂದ XSLT 1.0 ಬೆಂಬಲವನ್ನು ತೆಗೆದುಹಾಕಲು Chrome ತಂಡವು ಯೋಜಿಸುತ್ತಿದೆ ಎಂದು ನಾನು ಮೊದಲೇ ಹೇಳಿದ್ದೇನೆ. ಇದು ಮುಖ್ಯವಾಗಿದೆ ಏಕೆಂದರೆ XSLT 1.0 ಡಾಕ್ಯುಮೆಂಟ್ ರೂಪಾಂತರಕ್ಕಾಗಿ XML-ಕೇಂದ್ರಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಅದು XPath 1.0 ಅನ್ನು ಅವಲಂಬಿಸಿದೆ, ಇದು ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಕಂಡುಬರುತ್ತದೆ. ಅದು ಸಂಭವಿಸಿದಾಗ, ನಾವು XPath ನ ಪ್ರಮುಖ ಅಂಶವನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತೇವೆ. ಆದರೆ ಪರೀಕ್ಷೆಗಳನ್ನು ಬರೆಯಲು XPath ನಿಜವಾಗಿಯೂ ಉತ್ತಮವಾಗಿದೆ ಎಂಬ ಅಂಶವನ್ನು ನೀಡಿದರೆ, XPath ಒಟ್ಟಾರೆಯಾಗಿ ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಶೀಘ್ರದಲ್ಲೇ ಕಣ್ಮರೆಯಾಗುವುದು ಅಸಂಭವವಾಗಿದೆ. ಒಂದು ವೈಶಿಷ್ಟ್ಯವನ್ನು ತೆಗೆದುಹಾಕಿದಾಗ ಜನರು ಅದರಲ್ಲಿ ಆಸಕ್ತಿ ಹೊಂದುತ್ತಾರೆ ಎಂದು ನಾನು ಗಮನಿಸಿದ್ದೇನೆ. ಮತ್ತು XSLT 1.0 ಅಸಮ್ಮತಿಸುವ ಸಂದರ್ಭದಲ್ಲಿ ಇದು ಖಂಡಿತವಾಗಿಯೂ ನಿಜವಾಗಿದೆ. ಅಸಮ್ಮತಿ ವಿರುದ್ಧ ವಾದಗಳಿಂದ ತುಂಬಿದ ಹ್ಯಾಕರ್ ನ್ಯೂಸ್ನಲ್ಲಿ ಸಂಪೂರ್ಣ ಚರ್ಚೆ ನಡೆಯುತ್ತಿದೆ. XSLT ನೊಂದಿಗೆ ಬ್ಲಾಗಿಂಗ್ ಫ್ರೇಮ್ವರ್ಕ್ ಅನ್ನು ರಚಿಸಲು ಪೋಸ್ಟ್ ಸ್ವತಃ ಉತ್ತಮ ಉದಾಹರಣೆಯಾಗಿದೆ. ನೀವುನಿಮಗಾಗಿ ಚರ್ಚೆಯನ್ನು ಓದಬಹುದು, ಆದರೆ ಆ ರೀತಿಯ ಪ್ರಕರಣಗಳನ್ನು ನಿರ್ವಹಿಸಲು XLST ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಶಿಮ್ ಆಗಿ ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ಇದು ಪಡೆಯುತ್ತದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಸ್ಯಾಕ್ಸನ್ XSLT, XQUERY ಮತ್ತು XPath ಎಂಜಿನ್ಗಳಿಗೆ ಪೋರ್ಟ್ ಆಗಿರುವ SaxonJS ಅನ್ನು ಬ್ರೌಸರ್ಗಳು ಬಳಸಬೇಕೆಂಬ ಸಲಹೆಗಳನ್ನು ನಾನು ನೋಡಿದ್ದೇನೆ. ಇದು ಆಸಕ್ತಿದಾಯಕ ವಿಚಾರವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಸ್ಯಾಕ್ಸನ್-ಜೆಎಸ್ ಈ ವಿಶೇಷಣಗಳ ಪ್ರಸ್ತುತ ಆವೃತ್ತಿಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ, ಆದರೆ XPath ಅಥವಾ XSLT ಯ ಯಾವುದೇ ಆವೃತ್ತಿಯನ್ನು 1.0 ಅನ್ನು ಮೀರಿ ಕಾರ್ಯಗತಗೊಳಿಸುವ ಯಾವುದೇ ಬ್ರೌಸರ್ ಇಲ್ಲ ಮತ್ತು XQuery ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದಿಲ್ಲ. ನಾನು ಸ್ಯಾಕ್ಸನ್ ಜೆಎಸ್ ಮತ್ತು ಸ್ಯಾಕ್ಸನ್ ಎಂಜಿನ್ನ ಇತರ ಆವೃತ್ತಿಗಳ ಹಿಂದಿನ ಕಂಪನಿಯಾದ ಸ್ಯಾಕ್ಸೋನಿಕಾದಲ್ಲಿ ನಾರ್ಮ್ ಟೋವಿ-ವಾಲ್ಶ್ ಅವರನ್ನು ತಲುಪಿದೆ. ಅವರು ಹೇಳಿದರು: "ಯಾವುದೇ ಬ್ರೌಸರ್ ಮಾರಾಟಗಾರರು SaxonJS ಅನ್ನು ಬ್ರೌಸರ್ನಲ್ಲಿ ಆಧುನಿಕ XML ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಆರಂಭಿಕ ಹಂತವಾಗಿ ತೆಗೆದುಕೊಳ್ಳಲು ಆಸಕ್ತಿ ಹೊಂದಿದ್ದರೆ, ನಾವು ಅವರೊಂದಿಗೆ ಚರ್ಚಿಸಲು ರೋಮಾಂಚನಗೊಳ್ಳುತ್ತೇವೆ." - ನಾರ್ಮ್ ಟೋವಿ-ವಾಲ್ಷ್
ಆದರೆ ಸೇರಿಸಲಾಗಿದೆ: "SaxonJS ಅನ್ನು ಅದರ ಪ್ರಸ್ತುತ ರೂಪದಲ್ಲಿ ತೆಗೆದುಕೊಂಡು ಅದನ್ನು ಬ್ರೌಸರ್ ಬಿಲ್ಡ್ಗೆ ಬದಲಾಯಿಸದೆ ಬಿಡುವುದು ಆದರ್ಶ ವಿಧಾನವಾಗಿದೆ ಎಂದು ಯಾರಾದರೂ ಭಾವಿಸಿದರೆ ನನಗೆ ತುಂಬಾ ಆಶ್ಚರ್ಯವಾಗುತ್ತದೆ. ಬ್ರೌಸರ್ ಮಾರಾಟಗಾರರು, ಅವರು ಬ್ರೌಸರ್ ಅನ್ನು ನಿರ್ಮಿಸುವ ಸ್ವಭಾವದಿಂದ, ನಾವು 'ಹೊರಗಿನಿಂದ' ಹೆಚ್ಚು ಆಳವಾದ ಮಟ್ಟದಲ್ಲಿ ಏಕೀಕರಣವನ್ನು ಸಮೀಪಿಸಬಹುದು." - ನಾರ್ಮ್ ಟೋವೆ-ವಾಲ್ಷ್
XSLT ಅಸಮ್ಮತಿ ಘೋಷಣೆಗೆ ಒಂದು ವಾರದ ಮೊದಲು ಟೋವಿ-ವಾಲ್ಷ್ ಅವರ ಕಾಮೆಂಟ್ಗಳು ಬಂದವು ಎಂದು ಗಮನಿಸಬೇಕಾದ ಅಂಶವಾಗಿದೆ. ತೀರ್ಮಾನ ನಾನು ಮುಂದೆ ಹೋಗಬಹುದಿತ್ತು. ಆದರೆ ಇದು XPath ನ ಶಕ್ತಿಯನ್ನು ಪ್ರದರ್ಶಿಸಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ ಮತ್ತು ಉತ್ತಮ ವಿಷಯಗಳನ್ನು ಸಾಧಿಸಲು ಅದನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುವ ಸಾಕಷ್ಟು ಉದಾಹರಣೆಗಳನ್ನು ನಿಮಗೆ ನೀಡಿದೆ. ಇದು ಬ್ರೌಸರ್ ಸ್ಟಾಕ್ನಲ್ಲಿರುವ ಹಳೆಯ ತಂತ್ರಜ್ಞಾನದ ಪರಿಪೂರ್ಣ ಉದಾಹರಣೆಯಾಗಿದೆ, ಅದು ಇಂದಿಗೂ ಸಾಕಷ್ಟು ಉಪಯುಕ್ತತೆಯನ್ನು ಹೊಂದಿದೆ, ಅದು ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿಲ್ಲದಿದ್ದರೂ ಅಥವಾ ಅದನ್ನು ತಲುಪಲು ಎಂದಿಗೂ ಯೋಚಿಸದಿದ್ದರೂ ಸಹ. ಹೆಚ್ಚಿನ ಓದುವಿಕೆ
"ನೈಸರ್ಗಿಕ ಭಾಷೆಯೊಂದಿಗೆ ಸ್ವಯಂಚಾಲಿತ ವೆಬ್ ಪರೀಕ್ಷೆಗಳ ಸ್ಥಿತಿಸ್ಥಾಪಕತ್ವವನ್ನು ಹೆಚ್ಚಿಸುವುದು" (ACM ಡಿಜಿಟಲ್ ಲೈಬ್ರರಿ) ಮರುೌನ್ ಅಯ್ಲಿ, ಯೂಸೆಫ್ ಬಕೌನಿ, ನಾಡರ್ ಜಲ್ಲೋಲ್ ಮತ್ತು ರಿಮಾ ಕಿಲಾನಿ ಈ ಲೇಖನವು ಚೇತರಿಸಿಕೊಳ್ಳುವ ಪರೀಕ್ಷೆಗಳನ್ನು ಬರೆಯಲು ಹಲವು XPath ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. XPath (MDN) XPath ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸುವ ತಾಂತ್ರಿಕ ವಿವರಣೆಯನ್ನು ನೀವು ಬಯಸಿದರೆ ಪ್ರಾರಂಭಿಸಲು ಇದು ಅತ್ಯುತ್ತಮ ಸ್ಥಳವಾಗಿದೆ. XPath ಟ್ಯುಟೋರಿಯಲ್ (ZVON)ಈ ಟ್ಯುಟೋರಿಯಲ್ ನನ್ನ ಸ್ವಂತ ಕಲಿಕೆಯಲ್ಲಿ ಹೆಚ್ಚು ಸಹಾಯಕವಾಗಿದೆ ಎಂದು ನಾನು ಕಂಡುಕೊಂಡಿದ್ದೇನೆ, ಉದಾಹರಣೆಗಳು ಮತ್ತು ಸ್ಪಷ್ಟ ವಿವರಣೆಗಳ ಸಂಪತ್ತಿಗೆ ಧನ್ಯವಾದಗಳು. XPatherThis ಸಂವಾದಾತ್ಮಕ ಸಾಧನವು ಕೋಡ್ನೊಂದಿಗೆ ನೇರವಾಗಿ ಕೆಲಸ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
