XPath ve CSS Seçicilerde Uzmanlaşmak: Bunlar Nelerdir ve Web Kazıma İçin Nasıl Kullanılır?

Seçicilere Giriş: XPath ve CSS Seçiciler Nedir?

XPath ve CSS seçicileri, web sayfalarındaki öğeleri bulmak ve çıkarmak için web kazımada kullanılan güçlü araçlardır. Bu araçlar, araştırma, iş veya kişisel projeler için web'den bilgi toplama sürecini otomatikleştirmek isteyen herkes için gereklidir.

XPath Temelleri

XPath nedir?

XPath veya XML Yol Dili, bir XML belgesindeki öğeler ve nitelikler arasında gezinmenizi sağlayan bir sorgu dilidir. Web kazıma bağlamında XPath, HTML belgeleri içindeki öğeleri bulmak için kullanılır.

XPath Söz Dizimi ve İfadeleri

XPath ifadeleri bir XML belgesinden düğümleri seçmek için kullanılır. İşte bazı temel XPath ifadeleri:

• Kesin yol: /html/body/div – Tümünü seçer div çocukları olan unsurlar body eleman.
• Göreceli yol: //div – Tümünü seçer div konumlarına bakılmaksızın belgedeki öğeler.
• Öznitellikler: //div[@id='main'] – öğesini seçer div ile eleman id öznitelik 'ana'ya eşittir.
• Metin içeriği: //div[text()='Hello World'] – öğesini seçer div 'Merhaba Dünya' metnini içeren öğe.

XPath Eksenleri

XPath eksenleri, düğümlerin mevcut düğümle ilişkisini tanımlar. Yaygın olarak kullanılan bazı eksenler şunlardır:

• Çocuk: child::div – Tümünü seçer div geçerli düğümün çocukları.
• Ebeveyn: parent::div – Geçerli düğümün ebeveynini (eğer bir düğümse) seçer. div.
• Kardeş: following-sibling::div – Tümünü seçer div geçerli düğümden sonraki kardeşler.
• Ata: ancestor::div – Tümünü seçer div mevcut düğümün ataları.

CSS Seçicilerin Temelleri

CSS Seçiciler nedir?

CSS seçicileri bir web sayfasındaki öğeleri seçmek için kullanılan kalıplardır. Bunlar öncelikle CSS'de stil oluşturmak için kullanılır, ancak öğeleri bulmak için web kazımada da kullanılabilirler.

Temel CSS Seçiciler

• Tür Seçici: div – Tümünü seçer div elementler.
• Sınıf Seçici: .class-name – Sınıftaki tüm elemanları seçer class-name.
• Kimlik Seçici: #id-name – Kimliğe sahip öğeyi seçer id-name.
• Özellik Seçici: [type='text'] – Özelliğe sahip tüm öğeleri seçer type 'metin' olarak ayarlayın.

Birleştiriciler ve Sözde Sınıflar

• Torun Birleştirici: div p – Tümünü seçer p içindeki elemanlar div elementler.
• Çocuk Birleştirici: div > p – Tümünü seçer p doğrudan çocukları olan unsurlar div elementler.
• Bitişik Kardeş Birleştirici: div + p – öğesini seçer p hemen öncesinde bir öğe bulunur div eleman.
• Genel Kardeş Birleştirici: div ~ p – Tümünü seçer p önünde bir harf bulunan öğeler div eleman.
• Sözde Sınıflar: a:hover – Seçer a Kullanıcı fareyi üzerlerine getirdiğinde öğeler.

XPath vs CSS Seçiciler: Hangisini Kullanmalı?

Hem XPath hem de CSS seçicilerin güçlü ve zayıf yönleri vardır ve aralarındaki seçim genellikle görevin belirli gereksinimlerine bağlıdır.

XPath'ın güçlü yönleri

• Güçlü: XPath, DOM'da hem ileri hem de geri gezinebilir, bu da onu karmaşık sorgular için çok güçlü kılar.
• Esnek: XPath daha karmaşık ifadelere ve koşullara izin vererek daha fazla esneklik sağlar.

XPath'ın zayıf yönleri

• Karmaşıklık: Sözdizimi yeni başlayanlar için daha karmaşık ve öğrenmesi daha zor olabilir.
• Verim: XPath sorguları, özellikle büyük belgelerde, CSS seçicilere kıyasla daha yavaş olabilir.

CSS Seçicilerin Güçlü Yönleri

• Basitlik: CSS seçicilerin okunması ve yazılması genellikle daha kolaydır, bu da onları yeni başlayanlar için daha uygun hale getirir.
• Verim: CSS seçiciler, özellikle modern tarayıcılarda genellikle XPath sorgularından daha hızlıdır.

CSS Seçicilerin Zayıf Yönleri

• Sınırlı İşlevsellik: CSS seçiciler, özellikle karmaşık sorgular için XPath'a kıyasla daha az güçlü ve esnektir.

Pratik Örnekler: Web Scraping için XPath ve CSS Seçicilerini Kullanmak

Bir web sayfasından bilgi çıkarmak için XPath ve CSS seçicilerinin nasıl kullanılacağına ilişkin bazı pratik örneklere bakalım.

Örnek 1: Bir Web Sayfasından Başlık Çıkarma

XPath'ı kullanma:

//h1 | //h2 | //h3

Bu ifade tümünü seçer h1, h2, Ve h3 elementler.

CSS Seçicilerini Kullanma:

h1, h2, h3

Bu seçici hepsini seçer h1, h2, Ve h3 elementler.

Örnek 2: Belirli Bir Sınıfa Sahip Bağlantıların Çıkarılması

XPath'ı kullanma:

//a[@class='specific-class']

Bu ifade tümünü seçer a sınıfa ait öğeler specific-class.

CSS Seçicilerini Kullanma:

a.specific-class

Bu seçici hepsini seçer a sınıfa ait öğeler specific-class.

Örnek 3: Belirli Metin İçeren Öğelerin Çıkarılması

XPath'ı kullanma:

//*[contains(text(),'specific text')]

Bu ifade 'belirli metin' metnini içeren tüm öğeleri seçer.

CSS Seçicileri kullanma (CSS ile doğrudan mümkün değildir, ek JavaScript gerektirir):

/* Not directly possible with CSS */

Araçlar ve Kaynaklar: XPath ve CSS Seçicilerini Öğrenme ve Kullanma

Çeşitli araç ve kaynaklar, XPath ve CSS seçicilerini etkili bir şekilde öğrenmenize ve kullanmanıza yardımcı olabilir:

• Tarayıcı Geliştirici Araçları: Çoğu modern tarayıcı, öğeleri incelemenize ve XPath ve CSS seçicilerini test etmenize olanak tanıyan yerleşik geliştirici araçlarıyla birlikte gelir.
• Çevrimiçi XPath Değerlendiricileri: XPath Tester gibi web siteleri XPath ifadelerinizi çevrimiçi olarak test etmenize olanak tanır.
• CSS Seçiciler Test Araçları: CSS Diner gibi web siteleri, CSS seçicileri öğrenmenize yardımcı olacak etkileşimli oyunlar sağlar.
• Dokümantasyon: XPath ve CSS seçicilere ilişkin resmi belgeler W3Schools ve MDN Web Docs'ta bulunabilir.

Çözüm

XPath ve CSS seçicilerinde uzmanlaşmak, web kazıma veya otomatik veri çıkarmayla ilgilenen herkes için çok önemlidir. Bu güçlü araçların temellerini anlayarak, ihtiyacınız olan bilgileri doğru ve verimli bir şekilde bulabilir ve web sayfalarından çıkarabilirsiniz. İster yeni başlayan ister deneyimli bir kazıyıcı olun, XPath ve CSS seçicileri öğrenerek kazanacağınız beceriler, web kazıma araç setinizde çok değerli olacaktır.