Chrome uzant\u0131lar\u0131 geli\u015ftirirken, web sayfalar\u0131yla etkile\u015fim kurmak i\u00e7in i\u00e7erik betikleri (content scripts) vazge\u00e7ilmezdir. Bu betikler, web sayfas\u0131n\u0131n DOM’una eri\u015ferek belirli elementleri se\u00e7me, de\u011fi\u015ftirme veya onlarla etkile\u015fim kurma yetene\u011fi sa\u011flar. Ancak, modern web sayfalar\u0131n\u0131n dinamik yap\u0131s\u0131, s\u00fcrekli de\u011fi\u015fen HTML s\u0131n\u0131flar\u0131 ve kimlikleri, element se\u00e7imi konusunda geli\u015ftiricileri s\u0131k s\u0131k zorlar. Geleneksel olarak kullan\u0131lan Chrome uzant\u0131lar\u0131n\u0131n g\u00fcc\u00fc, kullan\u0131c\u0131lar\u0131n web deneyimini ki\u015fiselle\u015ftirme ve geli\u015ftirme yeteneklerinden gelir. Bu yeteneklerin \u00e7o\u011fu, uzant\u0131lar\u0131n web sayfalar\u0131yla do\u011frudan etkile\u015fim kurmas\u0131n\u0131 sa\u011flayan i\u00e7erik betikleri arac\u0131l\u0131\u011f\u0131yla sa\u011flan\u0131r.<\/p>\n \u0130\u00e7erik betikleri, ziyaret edilen web sayfalar\u0131n\u0131n ba\u011flam\u0131nda \u00e7al\u0131\u015fan JavaScript dosyalar\u0131d\u0131r. Bir web sayfas\u0131n\u0131n DOM’una eri\u015febilir, CSS stillerini okuyup de\u011fi\u015ftirebilir ve sayfa \u00fczerindeki olaylar\u0131 dinleyebilirler. Bu sayede, web sayfalar\u0131na yeni \u00f6zellikler eklemek, mevcut \u00f6zellikleri de\u011fi\u015ftirmek veya sayfa i\u00e7eri\u011fini analiz etmek gibi geni\u015f bir yelpazede g\u00f6revleri yerine getirebilirler. \u00d6rne\u011fin, bir sayfa \u00fczerindeki belirli bir metni vurgulamak, bir d\u00fc\u011fmeye t\u0131klama i\u015flevi eklemek veya bir form alan\u0131n\u0131 otomatik doldurmak gibi i\u015flemler i\u00e7erik betikleriyle kolayca yap\u0131labilir.<\/p>\n G\u00fcn\u00fcm\u00fcz\u00fcn web siteleri, tek sayfa uygulamalar\u0131 (SPA) ve JavaScript \u00e7er\u00e7eveleri (React, Angular, Vue) sayesinde olduk\u00e7a dinamiktir. Bu dinamizm, i\u00e7erik betikleri i\u00e7in \u00f6nemli zorluklar yarat\u0131r:<\/p>\n Bir i\u00e7erik beti\u011finin ba\u015far\u0131s\u0131, hedeflenen elementleri ne kadar g\u00fcvenilir bir \u015fekilde se\u00e7ebildi\u011fine ba\u011fl\u0131d\u0131r. Yanl\u0131\u015f veya eksik element se\u00e7imi, uzant\u0131n\u0131n hatal\u0131 \u00e7al\u0131\u015fmas\u0131na, beklenmeyen davran\u0131\u015flara yol a\u00e7mas\u0131na veya en k\u00f6t\u00fc ihtimalle tamamen i\u015flevsiz kalmas\u0131na neden olabilir. Bu nedenle, dinamik ve de\u011fi\u015fken web ortamlar\u0131nda bile tutarl\u0131 bir \u015fekilde \u00e7al\u0131\u015facak sa\u011flam element se\u00e7im stratejileri geli\u015ftirmek kritik \u00f6neme sahiptir.<\/p>\n Web geli\u015ftiricilerinin en s\u0131k kulland\u0131\u011f\u0131 DOM se\u00e7im y\u00f6ntemlerinden ikisi <\/code><\/p>\n Ancak, XPath (XML Path Language), XML belgelerindeki (ve dolay\u0131s\u0131yla HTML belgelerindeki) elementleri ve nitelikleri se\u00e7mek i\u00e7in kullan\u0131lan bir sorgu dilidir. DOM a\u011fac\u0131n\u0131n herhangi bir yerine ula\u015fabilen g\u00fc\u00e7l\u00fc ve esnek bir yap\u0131ya sahiptir.<\/p>\n XPath, bir a\u011fa\u00e7 yap\u0131s\u0131ndaki d\u00fc\u011f\u00fcmleri (elementler, nitelikler, metinler vb.) tan\u0131mlamak i\u00e7in yollar kullan\u0131r. Bir dosya sistemindeki dosya yollar\u0131na benzer \u015fekilde \u00e7al\u0131\u015f\u0131r. \u00d6rne\u011fin, XPath'in en b\u00fcy\u00fck avantajlar\u0131ndan biri, elementleri sadece etiket adlar\u0131na veya konumlar\u0131na g\u00f6re de\u011fil, ayn\u0131 zamanda nitelik de\u011ferlerine ve hatta i\u00e7erdikleri metinlere g\u00f6re se\u00e7ebilmesidir:<\/p>\n XPath, se\u00e7imleri daha da hassasla\u015ft\u0131rmak i\u00e7in \u00e7e\u015fitli fonksiyonlar ve operat\u00f6rler sunar:<\/p>\n XPath'in sa\u011flad\u0131\u011f\u0131 esneklik ve g\u00fc\u00e7, onu bir\u00e7ok senaryoda \u00d6rnek:<\/strong> Bir butonun s\u0131n\u0131f\u0131 \"primary-btn\" den \"main-action-button\" a de\u011fi\u015fti\u011finde:<\/p>\n <\/code><\/p>\n CSS se\u00e7iciler, DOM a\u011fac\u0131nda yaln\u0131zca a\u015fa\u011f\u0131ya do\u011fru (\u00e7ocuk elementlere) veya belirli karde\u015f elementlere ( Senaryo:<\/strong> Bir \u00fcr\u00fcn listesindeki \"Sepete Ekle\" butonuna t\u0131kland\u0131\u011f\u0131nda, o \u00fcr\u00fcn\u00fcn fiyat\u0131n\u0131 almak istiyorsunuz. Fiyat, butonun bir \u00f6nceki karde\u015f elementi olan bir XPath, Bu t\u00fcr senaryolar\u0131 Chrome uzant\u0131lar\u0131nda XPath kullanmak, taray\u0131c\u0131n\u0131n yerle\u015fik <\/code><\/p>\n \u00d6rnek 1: Tek bir element se\u00e7imi<\/strong><\/p>\n <\/code><\/p>\n \u00d6rnek 2: Birden fazla element se\u00e7imi (iterator)<\/strong><\/p>\n <\/code><\/p>\n \u00d6rnek 3: Birden fazla element se\u00e7imi (snapshot - \u00f6nerilen)<\/strong><\/p>\n <\/code><\/p>\n XPath'in g\u00fcc\u00fcn\u00fc etkin bir \u015fekilde kullanmak i\u00e7in baz\u0131 en iyi uygulamalar\u0131 ve dikkat edilmesi gereken noktalar\u0131 bilmek \u00f6nemlidir.<\/p>\n XPath, her zaman Yukar\u0131da bahsedildi\u011fi gibi, XPath sorgular\u0131 Karma\u015f\u0131k XPath ifadeleri, \u00f6zellikle iyi belgelenmezlerse okunmas\u0131 ve bak\u0131m\u0131 zor olabilir. XPath ifadelerini yazarken a\u015fa\u011f\u0131daki ipu\u00e7lar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurun:<\/p>\n \u0130\u00e7erik betiklerinizin g\u00fcvenilirli\u011fini sa\u011flamak i\u00e7in kapsaml\u0131 testler yapmak \u015fartt\u0131r. Farkl\u0131 sayfa yap\u0131lar\u0131, dil se\u00e7enekleri ve dinamik i\u00e7erik y\u00fcklemeleri alt\u0131nda XPath ifadelerinizin do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olun. Taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131 konsolunda Chrome uzant\u0131lar\u0131nda g\u00fcvenilir i\u00e7erik betikleri olu\u015fturmak, modern web'in dinamik ve s\u00fcrekli de\u011fi\u015fen do\u011fas\u0131 g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda \u00f6nemli bir zorluktur. XPath, ba\u015flang\u0131\u00e7ta biraz farkl\u0131 bir s\u00f6zdizimine sahip oldu\u011fu i\u00e7in al\u0131\u015fmak zaman alabilir. Ancak, temel kavramlar\u0131 (eksenler, konum ad\u0131mlar\u0131, nitelikler, fonksiyonlar) anlad\u0131ktan sonra olduk\u00e7a sezgiseldir. Birka\u00e7 pratik \u00f6rnek ve taray\u0131c\u0131 eklentileriyle h\u0131zl\u0131ca ustala\u015fabilirsiniz.<\/p>\n Evet, genel olarak XPath sorgular\u0131, basit CSS se\u00e7icilerine k\u0131yasla daha fazla i\u015flem gerektirebilir. \u00d6zellikle \u00e7ok geni\u015f DOM a\u011fa\u00e7lar\u0131nda veya karma\u015f\u0131k, genel XPath ifadeleri kullan\u0131ld\u0131\u011f\u0131nda bu fark belirginle\u015febilir. Ancak, ak\u0131ll\u0131ca ve spesifik olarak kullan\u0131ld\u0131\u011f\u0131nda \u00e7o\u011fu uygulama i\u00e7in performans fark\u0131 ihmal edilebilir d\u00fczeydedir.<\/p>\n Hay\u0131r. Elementin stabil bir ID'si veya s\u0131n\u0131f\u0131 varsa ve basit bir se\u00e7im yeterliyse, XPath ifadelerini debug etmek, Evet, querySelector<\/code> ve querySelectorAll<\/code> y\u00f6ntemleri \u00e7o\u011fu zaman yeterli olsa da, \u00f6zellikle sayfa yap\u0131s\u0131n\u0131n s\u0131k de\u011fi\u015fti\u011fi veya karma\u015f\u0131k elementlerin hedeflenmesi gerekti\u011fi durumlarda yetersiz kalabilir. \u0130\u015fte bu noktada, daha sa\u011flam ve esnek bir \u00e7\u00f6z\u00fcm olarak XPath devreye girer. Bu makale, Chrome uzant\u0131lar\u0131nda g\u00fcvenilir i\u00e7erik betikleri olu\u015fturman\u0131n \u00f6nemini vurgulayacak ve XPath’in querySelector<\/code>‘a k\u0131yasla neden daha \u00fcst\u00fcn bir se\u00e7enek oldu\u011funu detayl\u0131 bir \u015fekilde a\u00e7\u0131klayacakt\u0131r.<\/p>\n\u0130\u00e7erik Betiklerinin Temelleri ve Kar\u015f\u0131la\u015f\u0131lan Zorluklar<\/h2>\n
Chrome Uzant\u0131lar\u0131nda \u0130\u00e7erik Betiklerinin Rol\u00fc<\/h3>\n
Dinamik Web Sayfalar\u0131n\u0131n Getirdi\u011fi Problemler<\/h3>\n
\n
css-1a2b3c<\/code>) atayabilir. Bu t\u00fcr adlar, statik se\u00e7im i\u00e7in g\u00fcvenilmezdir.<\/li>\nElement Se\u00e7iminin \u00d6nemi<\/h3>\n
querySelector ve querySelectorAll: Tan\u0131d\u0131k Ama Bazen Yetersiz Bir Dost<\/h2>\n
querySelector<\/code> ve querySelectorAll<\/code>‘d\u0131r. Bu y\u00f6ntemler, CSS se\u00e7icilerinin g\u00fcc\u00fcn\u00fc kullanarak elementleri bulmay\u0131 sa\u011flar.<\/p>\nCSS Se\u00e7icilerin G\u00fcc\u00fc ve S\u0131n\u0131rl\u0131l\u0131klar\u0131<\/h3>\n
querySelector<\/code>, belirtilen CSS se\u00e7iciyle e\u015fle\u015fen ilk elementi d\u00f6nd\u00fcr\u00fcrken, querySelectorAll<\/code> t\u00fcm e\u015fle\u015fen elementleri bir NodeList olarak d\u00f6nd\u00fcr\u00fcr. Bu y\u00f6ntemler, ID (#myId<\/code>), s\u0131n\u0131f (.myClass<\/code>), etiket ad\u0131 (div<\/code>), nitelik ([data-test=\"value\"]<\/code>) ve bunlar\u0131n kombinasyonlar\u0131 gibi standart CSS se\u00e7icilerini destekler. \u00c7o\u011fu senaryoda olduk\u00e7a etkilidirler ve kullan\u0131m\u0131 kolayd\u0131r.<\/p>\n\n\/\/ \u00d6rnek: querySelector kullan\u0131m\u0131\nconst myButton = document.querySelector('#submitButton');\nif (myButton) {\n myButton.addEventListener('click', () => console.log('Butona t\u0131kland\u0131!'));\n}\n\nconst allLinks = document.querySelectorAll('a.external-link');\nallLinks.forEach(link => {\n link.target = '_blank';\n});\n<\/pre>\nYayg\u0131n Kullan\u0131m Senaryolar\u0131<\/h3>\n
querySelector<\/code>, \u00f6zellikle elementlerin sabit ID'lere veya tutarl\u0131 s\u0131n\u0131f adlar\u0131na sahip oldu\u011fu statik sayfalarda veya iyi tan\u0131mlanm\u0131\u015f bile\u015fenlerde \u00e7ok iyi \u00e7al\u0131\u015f\u0131r. K\u00fc\u00e7\u00fck \u00f6l\u00e7ekli otomasyonlar, basit UI de\u011fi\u015fiklikleri veya belirli bir elementin varl\u0131\u011f\u0131n\u0131 kontrol etmek gibi g\u00f6revler i\u00e7in genellikle ilk tercihtir.<\/p>\nDe\u011fi\u015fken Yap\u0131lara Kar\u015f\u0131 Hassasiyet<\/h3>\n
querySelector<\/code>'\u0131n en b\u00fcy\u00fck dezavantaj\u0131, se\u00e7icilerin DOM yap\u0131s\u0131ndaki de\u011fi\u015fikliklere kar\u015f\u0131 olduk\u00e7a hassas olmas\u0131d\u0131r. Bir elementin ID'si veya s\u0131n\u0131f\u0131 de\u011fi\u015fti\u011finde, se\u00e7ici an\u0131nda bozulur. \u00d6rne\u011fin, bir geli\u015ftirici bir d\u00fc\u011fmeye \"btn-primary\" s\u0131n\u0131f\u0131 yerine \"button-main\" s\u0131n\u0131f\u0131 atarsa, eski se\u00e7ici art\u0131k \u00e7al\u0131\u015fmaz. Benzer \u015fekilde, bir elementin DOM a\u011fac\u0131ndaki konumu de\u011fi\u015firse (\u00f6rne\u011fin, bir div<\/code> i\u00e7ine ta\u015f\u0131n\u0131rsa), bu da mevcut CSS se\u00e7icilerini etkileyebilir. Rastgele olu\u015fturulan veya s\u0131k de\u011fi\u015fen s\u0131n\u0131f adlar\u0131 (css-xyz123<\/code>) kullan\u0131ld\u0131\u011f\u0131nda ise querySelector<\/code> neredeyse i\u015fe yaramaz hale gelir.<\/p>\nXPath'in G\u00fcc\u00fc: Sa\u011flam ve Esnek Element Se\u00e7imi<\/h2>\n
XPath Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n
\/html\/body\/div[2]\/p[1]<\/code> ifadesi, HTML belgesinin g\u00f6vdesindeki ikinci div<\/code> elementinin ilk p<\/code> elementini se\u00e7er. XPath, sadece element etiketlerine ve pozisyonlar\u0131na de\u011fil, ayn\u0131 zamanda nitelik de\u011ferlerine, metin i\u00e7eri\u011fine ve hatta elementler aras\u0131ndaki ili\u015fkilere (ebeveyn, \u00e7ocuk, karde\u015f) g\u00f6re se\u00e7im yapma yetene\u011fi sunar.<\/p>\nMutlak ve G\u00f6receli XPath Yollar\u0131<\/h3>\n
\n
\/html<\/code>) ba\u015flayarak elementin tam yolunu belirtir. \u00d6rnek: \/html\/body\/div\/p[2]<\/code>. Bu yollar, DOM yap\u0131s\u0131ndaki en k\u00fc\u00e7\u00fck bir de\u011fi\u015fikli\u011fe bile hassast\u0131r ve genellikle \u00f6nerilmez.<\/li>\n\/\/<\/code>) ile belirtilir. \u00d6rnek: \/\/div[@class='container']\/p[2]<\/code>. Bu, belirli bir div<\/code> s\u0131n\u0131f\u0131na sahip herhangi bir div<\/code> i\u00e7indeki ikinci p<\/code> elementini se\u00e7er. G\u00f6receli yollar, mutlak yollara g\u00f6re \u00e7ok daha esnektir ve daha s\u0131k tercih edilir.<\/li>\n<\/ul>\nNiteliklere ve Metin \u0130\u00e7eri\u011fine G\u00f6re Se\u00e7im<\/h3>\n
\n
\/\/input[@name='username']<\/code> (ad\u0131 'username' olan t\u00fcm input elementleri) veya \/\/button[contains(@class, 'submit')]<\/code> (s\u0131n\u0131f\u0131nda 'submit' ge\u00e7en t\u00fcm butonlar).<\/li>\n\/\/button[text()='G\u00f6nder']<\/code> (metni 'G\u00f6nder' olan t\u00fcm butonlar) veya \/\/h2[contains(text(), '\u00dcr\u00fcn Detaylar\u0131')]<\/code> (metninde '\u00dcr\u00fcn Detaylar\u0131' ge\u00e7en t\u00fcm h2 elementleri).<\/li>\n<\/ul>\nGeli\u015fmi\u015f XPath Fonksiyonlar\u0131 ve Operat\u00f6rleri<\/h3>\n
\n
and<\/code>, or<\/code>, not()<\/code> (\/\/a[@href='\/login' and text()='Giri\u015f Yap']<\/code>)<\/li>\ncontains()<\/code>, starts-with()<\/code>, ends-with()<\/code>, substring()<\/code> (\/\/img[starts-with(@src, 'https:\/\/cdn.example.com')]<\/code>)<\/li>\nposition()<\/code>, last()<\/code> (\/\/li[position()=last()]<\/code> - son liste \u00f6\u011fesi)<\/li>\nparent::<\/code>, child::<\/code>, following-sibling::<\/code>, preceding-sibling::<\/code>, ancestor::<\/code>, descendant::<\/code> (\/\/input[@id='username']\/following-sibling::button<\/code>)<\/li>\n<\/ul>\nNeden XPath, querySelector'dan Daha \u00dcst\u00fcn?<\/h2>\n
querySelector<\/code>'dan daha \u00fcst\u00fcn bir se\u00e7enek haline getirir.<\/p>\nYap\u0131sal De\u011fi\u015fikliklere Kar\u015f\u0131 Dayan\u0131kl\u0131l\u0131k<\/h3>\n
querySelector<\/code> genellikle elementin do\u011frudan ID'sine veya s\u0131n\u0131f\u0131na ba\u011fl\u0131d\u0131r. Bu \u00f6zellikler de\u011fi\u015fti\u011finde se\u00e7ici bozulur. XPath ise, elementleri sadece ID veya s\u0131n\u0131f yerine, birden fazla niteli\u011fe, metin i\u00e7eri\u011fine veya di\u011fer elementlerle olan ili\u015fkilerine g\u00f6re se\u00e7ebilir. Bu sayede, sayfa yap\u0131s\u0131nda k\u00fc\u00e7\u00fck de\u011fi\u015fiklikler oldu\u011funda bile elementin konumu veya nitelikleri tamamen de\u011fi\u015fmedi\u011fi s\u00fcrece XPath yolunun \u00e7al\u0131\u015fmaya devam etme olas\u0131l\u0131\u011f\u0131 daha y\u00fcksektir.<\/p>\n\n
document.querySelector('.primary-btn')<\/code> bozulur.<\/li>\ndocument.evaluate(\"\/\/button[text()='Kaydet']\", ...)<\/code>, butonun metni de\u011fi\u015fmedi\u011fi s\u00fcrece \u00e7al\u0131\u015fmaya devam eder.<\/li>\n<\/ul>\nMetin \u0130\u00e7eri\u011fine G\u00f6re Se\u00e7im Yetene\u011fi<\/h3>\n
querySelector<\/code>'\u0131n do\u011frudan metin i\u00e7eri\u011fine g\u00f6re element se\u00e7me yetene\u011fi yoktur. Metin i\u00e7eri\u011fine g\u00f6re se\u00e7im yapmak i\u00e7in \u00f6nce t\u00fcm potansiyel elementleri se\u00e7ip ard\u0131ndan JavaScript ile filtreleme yapmak gerekir. XPath ise bu yetene\u011fi do\u011frudan dilin bir par\u00e7as\u0131 olarak sunar. Bu, \u00f6zellikle uluslararas\u0131la\u015fm\u0131\u015f (i18n) sitelerde veya dinamik olarak olu\u015fturulan metinlerin oldu\u011fu yerlerde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\n\/\/ querySelector ile metin tabanl\u0131 se\u00e7im (daha karma\u015f\u0131k)\nconst buttons = document.querySelectorAll('button');\nconst saveButton = Array.from(buttons).find(btn => btn.textContent.trim() === 'Kaydet');\n\n\/\/ XPath ile metin tabanl\u0131 se\u00e7im (daha basit ve do\u011frudan)\nconst xpathResult = document.evaluate(\"\/\/button[text()='Kaydet']\", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);\nconst saveButtonXPath = xpathResult.singleNodeValue;\n<\/pre>\nYukar\u0131 Y\u00f6nl\u00fc Gezinme ve Karde\u015f Elementlere Eri\u015fim<\/h3>\n
+<\/code>, ~<\/code>) do\u011fru ilerleyebilir. Yukar\u0131ya do\u011fru (ebeveyn elementlere) gezinme yetenekleri yoktur. XPath ise parent::<\/code>, ancestor::<\/code>, preceding-sibling::<\/code> gibi eksenler sayesinde DOM a\u011fac\u0131nda her y\u00f6ne serbest\u00e7e gezinme imkan\u0131 sunar. Bu, belirli bir elementten yola \u00e7\u0131karak onun ebeveynini, karde\u015fini veya ba\u015fka bir ili\u015fkili elementi bulmak gerekti\u011finde paha bi\u00e7ilmezdir.<\/p>\nspan<\/code> etiketi i\u00e7inde olabilir.<\/p>\n\n
querySelector<\/code> ile bu, genellikle butonun ebeveynini bulup, sonra ebeveynin \u00e7ocuklar\u0131 aras\u0131nda gezinmeyi gerektirir.<\/li>\n\/\/button[text()='Sepete Ekle']\/preceding-sibling::span[@class='product-price']<\/code> do\u011frudan fiyat elementini se\u00e7ebilir.<\/li>\n<\/ul>\nDaha Karma\u015f\u0131k Senaryolar \u0130\u00e7in Esneklik<\/h3>\n
querySelector<\/code>'\u0131n yetersiz kald\u0131\u011f\u0131 karma\u015f\u0131k senaryolarda ger\u00e7ek g\u00fcc\u00fcn\u00fc g\u00f6sterir. \u00d6rne\u011fin:<\/p>\n\n
div<\/code> i\u00e7indeki \u00fc\u00e7\u00fcnc\u00fc a<\/code> etiketi.<\/li>\ntd<\/code> elementinin ebeveyn tr<\/code>'si.<\/li>\ndata-id<\/code> niteli\u011fine sahip bir elementin, belirli bir aria-label<\/code> niteli\u011fine sahip bir karde\u015f elementi.<\/li>\n<\/ul>\nquerySelector<\/code> ile \u00e7\u00f6zmek ya imkans\u0131zd\u0131r ya da \u00e7ok uzun ve okunaks\u0131z JavaScript kodlar\u0131 yazmay\u0131 gerektirir. XPath, bu t\u00fcr karma\u015f\u0131k se\u00e7imleri tek bir sat\u0131rda ifade etmeye olanak tan\u0131r.<\/p>\nChrome Uzant\u0131lar\u0131nda XPath Kullan\u0131m\u0131<\/h2>\n
document.evaluate()<\/code> metodunu kullanarak yap\u0131l\u0131r.<\/p>\ndocument.evaluate ile XPath Uygulama<\/h3>\n
document.evaluate()<\/code> metodu, bir XPath ifadesini de\u011ferlendirir ve sonu\u00e7lar\u0131 d\u00f6nd\u00fcr\u00fcr. S\u00f6zdizimi \u015f\u00f6yledir:<\/p>\n\ndocument.evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result)\n<\/pre>\n\n
xpathExpression<\/code>: De\u011ferlendirilecek XPath dizesi (\u00f6rn. \"\/\/button[text()='G\u00f6nder']\"<\/code>).<\/li>\ncontextNode<\/code>: XPath ifadesinin de\u011ferlendirilece\u011fi DOM d\u00fc\u011f\u00fcm\u00fc (genellikle document<\/code>).<\/li>\nnamespaceResolver<\/code>: XML ad alanlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in kullan\u0131lan bir fonksiyon (HTML i\u00e7in genellikle null<\/code>).<\/li>\nresultType<\/code>: D\u00f6nd\u00fcr\u00fclecek sonucun tipi (a\u015fa\u011f\u0131ya bak\u0131n).<\/li>\nresult<\/code>: Mevcut bir XPathResult nesnesi (genellikle null<\/code>).<\/li>\n<\/ul>\nXPath Sonu\u00e7 Tipleri ve Y\u00f6netimi<\/h3>\n
resultType<\/code> parametresi, XPath ifadesinin sonucunun nas\u0131l d\u00f6nd\u00fcr\u00fclece\u011fini belirler. En yayg\u0131n kullan\u0131lan tipler \u015funlard\u0131r:<\/p>\n\n
XPathResult.FIRST_ORDERED_NODE_TYPE<\/code>: E\u015fle\u015fen ilk d\u00fc\u011f\u00fcm\u00fc d\u00f6nd\u00fcr\u00fcr (singleNodeValue<\/code> \u00f6zelli\u011fi).<\/li>\nXPathResult.ORDERED_NODE_ITERATOR_TYPE<\/code>: E\u015fle\u015fen t\u00fcm d\u00fc\u011f\u00fcmleri bir yineleyici (iterator) olarak d\u00f6nd\u00fcr\u00fcr. iterateNext()<\/code> ile tek tek eri\u015filir.<\/li>\nXPathResult.ORDERED_NODE_SNAPSHOT_TYPE<\/code>: E\u015fle\u015fen t\u00fcm d\u00fc\u011f\u00fcmleri bir anl\u0131k g\u00f6r\u00fcnt\u00fc (snapshot) olarak d\u00f6nd\u00fcr\u00fcr. snapshotLength<\/code> ve snapshotItem(index)<\/code> ile eri\u015filir. Bu, yineleyiciden daha kararl\u0131d\u0131r, \u00e7\u00fcnk\u00fc DOM de\u011fi\u015fikliklerinden etkilenmez.<\/li>\nXPathResult.ANY_TYPE<\/code>: XPath ifadesinin sonucuna g\u00f6re en uygun tipi d\u00f6nd\u00fcr\u00fcr.<\/li>\n<\/ul>\nPratik Kod \u00d6rnekleri<\/h3>\n
\nfunction getElementByXPath(xpath) {\n const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);\n return result.singleNodeValue;\n}\n\nconst loginButton = getElementByXPath(\"\/\/button[text()='Giri\u015f Yap']\");\nif (loginButton) {\n console.log('Giri\u015f Yap butonu bulundu:', loginButton);\n loginButton.click();\n}\n<\/pre>\n\nfunction getElementsByXPath(xpath) {\n const result = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);\n const elements = [];\n let node = result.iterateNext();\n while (node) {\n elements.push(node);\n node = result.iterateNext();\n }\n return elements;\n}\n\nconst productPrices = getElementsByXPath(\"\/\/div[@class='product-card']\/\/span[contains(@class, 'price')]\");\nproductPrices.forEach(priceElement => {\n console.log('\u00dcr\u00fcn Fiyat\u0131:', priceElement.textContent);\n});\n<\/pre>\n\nfunction getElementsByXPathSnapshot(xpath) {\n const result = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);\n const elements = [];\n for (let i = 0; i < result.snapshotLength; i++) {\n elements.push(result.snapshotItem(i));\n }\n return elements;\n}\n\nconst allArticleTitles = getElementsByXPathSnapshot(\"\/\/article\/h2\");\nallArticleTitles.forEach(title => {\n console.log('Makale Ba\u015fl\u0131\u011f\u0131:', title.textContent);\n});\n<\/pre>\nHata Y\u00f6netimi ve Performans \u0130pu\u00e7lar\u0131<\/h3>\n
\n
document.evaluate()<\/code> ge\u00e7ersiz bir XPath ifadesiyle \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda bir hata f\u0131rlatabilir. Bu nedenle, \u00f6zellikle dinamik olarak olu\u015fturulan XPath ifadeleri kullan\u0131l\u0131yorsa try-catch<\/code> bloklar\u0131 kullanmak \u00f6nemlidir. Ayr\u0131ca, singleNodeValue<\/code> veya iterateNext()<\/code> gibi sonu\u00e7lar\u0131n null<\/code> olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek, elementin bulunamad\u0131\u011f\u0131 durumlar\u0131 ele almak i\u00e7in gereklidir.<\/li>\nquerySelector<\/code>'dan daha yava\u015f olabilir. M\u00fcmk\u00fcn oldu\u011funca spesifik XPath ifadeleri kullanmaya \u00e7al\u0131\u015f\u0131n ve gereksiz yere t\u00fcm DOM'u taramaktan ka\u00e7\u0131n\u0131n (\u00f6rn. \/\/div<\/code> yerine \/\/div[@id='myContainer']<\/code>). Performans kritik senaryolarda, \u00f6nce daha genel bir querySelector<\/code> ile bir ba\u011flam d\u00fc\u011f\u00fcm\u00fc (contextNode<\/code>) se\u00e7ip, ard\u0131ndan bu d\u00fc\u011f\u00fcm i\u00e7inde XPath \u00e7al\u0131\u015ft\u0131rmak performans\u0131 art\u0131rabilir.<\/li>\n<\/ul>\nEn \u0130yi Uygulamalar ve Dikkat Edilmesi Gerekenler<\/h2>\n
XPath'i Ne Zaman Kullanmal\u0131?<\/h3>\n
querySelector<\/code> yerine kullan\u0131lmal\u0131 demek de\u011fildir. Do\u011fru arac\u0131 do\u011fru i\u015f i\u00e7in se\u00e7mek \u00f6nemlidir:<\/p>\n\n
\n
\n
#myElement<\/code>).<\/li>\n.myUniqueClass<\/code>).<\/li>\nquerySelector<\/code> ile ba\u011flam daralt\u0131labilir).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nPerformans Konular\u0131<\/h3>\n
querySelector<\/code>'a g\u00f6re daha fazla i\u015flem g\u00fcc\u00fc gerektirebilir. Performans\u0131 optimize etmek i\u00e7in:<\/p>\n\n
\/\/div<\/code> yerine \/\/div[@id='container']<\/code> kullan\u0131n.<\/li>\ndocument<\/code> yerine daha k\u00fc\u00e7\u00fck bir contextNode<\/code> kullan\u0131n. \u00d6rne\u011fin, \u00f6nce document.querySelector('#mainContent')<\/code> ile ana i\u00e7eri\u011fi se\u00e7ip, sonra bu element i\u00e7inde XPath \u00e7al\u0131\u015ft\u0131r\u0131n.<\/li>\nBak\u0131m ve Okunabilirlik<\/h3>\n
\n
Test ve Hata Ay\u0131klama<\/h3>\n
document.evaluate()<\/code> metodunu do\u011frudan kullanarak XPath ifadelerini test edebilirsiniz.<\/p>\nSonu\u00e7<\/h2>\n
querySelector<\/code> ve querySelectorAll<\/code>, basit senaryolar i\u00e7in yeterli olsa da, sayfa yap\u0131s\u0131n\u0131n s\u0131k de\u011fi\u015fti\u011fi veya karma\u015f\u0131k elementlerin hedeflenmesi gerekti\u011fi durumlarda yetersiz kalabilir. XPath, niteliklere, metin i\u00e7eri\u011fine ve elementler aras\u0131 ili\u015fkilere dayal\u0131 g\u00fc\u00e7l\u00fc ve esnek se\u00e7im yetenekleri sayesinde bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in ideal bir \u00e7\u00f6z\u00fcmd\u00fcr. Yap\u0131sal de\u011fi\u015fikliklere kar\u015f\u0131 daha dayan\u0131kl\u0131 olmas\u0131, yukar\u0131 y\u00f6nl\u00fc gezinme imkan\u0131 sunmas\u0131 ve karma\u015f\u0131k senaryolar\u0131 tek bir ifadeyle \u00e7\u00f6zebilmesi, XPath'i \u00f6zellikle kritik otomasyonlar ve veri kaz\u0131ma g\u00f6revleri i\u00e7in vazge\u00e7ilmez k\u0131lar. Her iki y\u00f6ntemin de avantajlar\u0131n\u0131 ve dezavantajlar\u0131n\u0131 anlayarak, projenizin ihtiya\u00e7lar\u0131na en uygun arac\u0131 se\u00e7ebilir ve daha sa\u011flam, bak\u0131m\u0131 kolay ve gelece\u011fe d\u00f6n\u00fck Chrome uzant\u0131lar\u0131 geli\u015ftirebilirsiniz.<\/p>\nSSS (S\u0131k Sorulan Sorular)<\/h2>\n
XPath \u00f6\u011frenmek zor mu?<\/h3>\n
XPath'in performans dezavantaj\u0131 var m\u0131?<\/h3>\n
Her zaman XPath mi kullanmal\u0131y\u0131m?<\/h3>\n
querySelector<\/code> daha okunabilir ve genellikle daha performansl\u0131 bir se\u00e7enektir. XPath, querySelector<\/code>'\u0131n yetersiz kald\u0131\u011f\u0131 daha karma\u015f\u0131k, dinamik veya de\u011fi\u015fime a\u00e7\u0131k senaryolar i\u00e7in en iyi \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\nXPath'i debug etmek zor mu?<\/h3>\n
querySelector<\/code>'a g\u00f6re biraz daha farkl\u0131 bir yakla\u015f\u0131m gerektirir. Taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131n konsolunda $x(\"your-xpath-expression\")<\/code> (Chrome) veya document.evaluate()<\/code> metodunu kullanarak XPath ifadelerinizi do\u011frudan test edebilirsiniz. Ayr\u0131ca, XPath Helper gibi taray\u0131c\u0131 eklentileri, ifadelerinizi g\u00f6rsel olarak test etmenize ve sonu\u00e7lar\u0131 an\u0131nda g\u00f6rmenize yard\u0131mc\u0131 olur.<\/p>\nXPath, t\u00fcm taray\u0131c\u0131larda destekleniyor mu?<\/h3>\n
document.evaluate()<\/code> metodu modern t\u00fcm taray\u0131c\u0131larda (Chrome, Firefox, Edge, Safari) geni\u015f \u00e7apl\u0131 bir deste\u011fe sahiptir. Bu da XPath'i taray\u0131c\u0131lar aras\u0131 uyumluluk a\u00e7\u0131s\u0131ndan g\u00fcvenilir bir se\u00e7enek yapar.<\/p>\n","protected":false},"excerpt":{"rendered":"Chrome uzant\u0131lar\u0131 geli\u015ftirirken, web sayfalar\u0131yla etkile\u015fim kurmak i\u00e7in i\u00e7erik betikleri (content scripts) vazge\u00e7ilmezdir. Bu betikler, web sayfas\u0131n…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-37177","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n