XPATH seçicilerini CSS seçicilerine göre çok daha kullanışlı buluyorum, ama sürekli css kodu yazan herkes zaten css seçicilerini bildiği için xpath seçicilerini öğrenmek için zaman harcamıyorlar, lazım olduğunda nasıl olsa css seçicileri ile çözerim diye düşünüyorlar.
XPATH seçicilerinin mantığını gösterebilmek için bu başlığı açmak istedim, ilerleyen zamanlarda örnek html dokümanları üzerinden xpath seçim senaryoları da eklenebilir belki.
Not 1: HTML dokümanlarınız ile kend, XPATH denemelerinizi yapabilmek için şu sayfayı kullanabilirsiniz: XPath Playground
Not 2: CSS seçicilerinde doğrudan html elemanlarına erişiriz ancak Xpath seçicilerinde alt elemanları ile birlikte ve html notasyonu ile html elemanlarını seçeriz. Eğer bir seçimin altındaki yazıyı html kodları ve alt etiketleri olmadan görmek isterseniz sonuna /text() seçicisini eklemelisiniz.
XPATH Seçicileri
//*: HTML sayfasındaki tüm etiketleri seçer
//h1: HTML sayfasındaki tüm h1 etiketlerini seçer
//div[@attribute='değer']: tüm attribute'lar için genelleştirilmiş seçici syntax'ı
//div[@class='sinif']: sinif class'ına sahip tüm div'leri seçer
//div[@class='sinif']/p: sinif class'ına sahip tüm div'lerin altındaki p etiketlerini seçer
//div[@class='sinif1' or @class='sinif2']/p: sinif1 ve sinif2 etiketlerine sahip div'lerin altındaki p etiketlerini seçer
//div[@class='sinif1' or @class='sinif2']/p/text(): sinif1 ve sinif2 etiketlerine sahip div'lerin altındaki p etiketlerinin sadece yazılarını (html notasyonu ve alt etiketleri olmadan) seçer
//a/@href: href attribute'u olan a etiketlerini seçer
//a[starts-with(@href,'https')]: href attribute'u https ile başlayan a etiketlerini seçer
//a[ends-with(@href,'com.tr')]: href attribute'u com.tr ile biten a etiketlerini seçer
//a[contains(@href,'reitix')]: href attribute'u reitix içeren a etiketlerini seçer
//a[contains(text(),'google')]: içerisindeki yazılar "google" yazısını içeren a etiketlerini seçer (küçük büyük harfe duyarlıdır)
//ul[@id='liste']/li: "liste" ID'sine sahip ul'nin altındaki li'leri seçer
//ul[@id='liste']/li[1]: "liste" ID'sine sahip ul'nin altındaki li'lerden ilkini seçer
//ul[@id='liste']/li[position()=1 or position()=3]: "liste" ID'sine sahip ul'nin altındaki li'lerden birincisini ve üçüncüsünü seçer
//ul[@id='liste']/li[position()=1 or position()=last()]: "liste" ID'sine sahip ul'nin altındaki li'lerden birincisini ve sonuncusunu seçer
//ul[@id='liste']/li[position()>2]: "liste" ID'sine sahip ul'nin altındaki li'lerden 2. sıradan sonra gelenleri seçer
Yukarı Doğru Seçimler (Parent Seçimleri)
//ul[@id='liste']/parent::div: "liste" ID'sine sahip ul'nin parent div'ini seçer
//ul[@id='liste']/parent::node(): "liste" ID'sine sahip ul'nin parent'ı (div olması şart değil)
//ul[@id='liste']/ancestor::node(): "liste" ID'sine sahip ul'nin parent'ının parent'ı (dedesi gibi düşünülebilir) (div olması şart değil)
//ul[@id='liste']/preceding::node(): "liste" ID'sine sahip ul'den önce gelen html elemanlarının tümünü seçer (alt katmanlar dahil)
//ul[@id='liste']/preceding::h1: "liste" ID'sine sahip ul'den önce gelen h1'leri seçer
//ul[@id='liste']/preceding-sibling::node(): "liste" ID'sine sahip ul'den önce gelen sibling'lerini seçer
Not: sibling kardeş demektir ve aynı parent'a sahip html elemanları için kullanılır
Aşağı Doğru Seçimler (Child Seçimleri)
//ul[@id='liste']/child::node(): "liste" ID'sine sahip ul'nin altındaki tüm elemanları seçer
//ul[@id='liste']/following::node(): "liste" ID'sine sahip ul'den sonra gelen tüm elemanları seçer (alt katmanlar dahil)
//ul[@id='liste']/following-sibling::node(): "liste" ID'sine sahip ul'den sonra gelen tüm sibling'leri seçer
//ul[@id='liste']/descendant::node(): "liste" ID'sine sahip ul'nin child'larının child'larını (torunlarını) seçer
Editör editi: sitede daha önce açılmış olan bazı diğer benzer başlıklar için;
bkz: CSS Seçicileri Nelerdir?
bkz: Web Scraping Nedir?
bkz: Scrapy Nedir ve Nasıl Kullanılır?
bkz: CSS'te Class Seçicileri ile HTML Elemanlarını Seçmek
bkz: HTML Etiketlerine CSS Kodu Yazmak
bkz: HTML ve CSS ile kayan yazı yapmak