Apakah Anda tahu selektor mana yang tepat untuk digunakan dalam web scraping? Web scraping telah cukup populer dalam beberapa dekade terakhir untuk mengekstrak data dari internet. Hal ini membantu bisnis memperoleh dan menganalisis data untuk membuat keputusan bisnis yang lebih baik. Berkat teknologi otomatis, web scraping tidak pernah semudah sekarang.
Apakah Anda tahu selektor mana yang tepat untuk digunakan dalam web scraping? Web scraping telah cukup populer dalam beberapa dekade terakhir untuk mengekstrak data dari internet. Hal ini membantu bisnis memperoleh dan menganalisis data untuk membuat keputusan bisnis yang lebih baik. Berkat teknologi otomatis, web scraping tidak pernah semudah sekarang.
Namun, apa pun alat atau kerangka kerja yang Anda pilih, Anda harus membuat keputusan penting untuk memastikan bahwa scraper Anda mengikis data dengan sopan. Yaitu apakah akan mengekstrak elemen web menggunakan pemilih XPath atau CSS, yang akan Anda pelajari dalam artikel ini.
Mari kita bahas beberapa contoh yang sudah ada.
XPath adalah singkatan dari Bahasa Jalur XML. Namun, XPath menggunakan sintaks non-XML untuk memilih tag atau kelompok tag dari dokumen XML atau HTML, seperti halnya web scraping. XPath memungkinkan Anda menulis ekspresi untuk mengakses elemen HTML atau XML secara langsung tanpa menelusuri seluruh pohon HTML.
Untuk memahami bagaimana Anda dapat mengakses sebuah elemen menggunakan XPath, mari kita gali lebih dalam dengan sebuah kode HTML. Saya berasumsi bahwa Anda sudah mengetahui beberapa HTML dasar.
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Anda dapat mengetikkan kode di atas di editor pilihan Anda dan menyimpannya sebagai products.html. Kemudian Anda dapat melihatnya di browser (sebaiknya Google Chrome karena kita akan membahas contoh ini dengan browser tersebut).
Ketika browser menjalankan kode ini, browser akan memformat HTML dan membuat representasi pohon dari elemen-elemennya. Hal ini dikenal sebagai DOM (Model Objek Dokumen) dalam bentuk berikut:
Anda dapat membaca lebih lanjut tentang DOM pada tautan yang diberikan. Sekarang fokus kita di sini adalah pada XPath tentang bagaimana menavigasi ke setiap elemen ini secara langsung tanpa melintasi seluruh pohon. Jadi mari kita mulai dengan terminologi dasar Xpath.
Dengan XPath, elemen yang paling mendasar adalah node. Nah, node adalah elemen individual yang baru saja Anda lihat di pohon DOM. Saat kita melanjutkan artikel ini, Anda akan menemukan lebih jauh bahwa node terdiri dari elemen tag, atribut, nilai string yang diberikan padanya, dan seterusnya. Ada tujuh di setiap halaman XML atau HTML, dan mari kita lihat setiap jenis node dengan cermat.
Meskipun tiga hal di atas adalah yang paling penting, empat hal berikut ini juga penting untuk diketahui sebagai informasi tambahan.
Ada dua cara untuk melakukan ini. Pertama, Mari kita mendemonstrasikannya atau membuat contoh kode. Seperti yang telah saya sebutkan di atas, saya harap Anda telah menyimpannya di disk lokal Anda dan siap untuk dilihat di browser Anda.
Ketika halaman dimuat, arahkan mouse Anda ke item 1 dan klik kanan padanya. Kemudian pilih Inspect dari item menu yang muncul seperti yang ditunjukkan pada tangkapan layar di bawah ini:
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
Kemudian setelah menempelkannya dalam file teks atau di suatu tempat, Anda akan mendapatkannya:
/html/body/ul/li[1]Ini dikenal sebagai jalur absolut . Di bawah ini akan saya jelaskan bagaimana Anda mendapatkannya.
Langkah 1 => li [1] //Di sini menunjukkan elemen li pertama
Langkah 2 => /li[1]
Langkah 3 => ul/li[1]
Langkah 4 => /ul/li[1]
Langkah 5 => body/ul/li[1]
Langkah 6 => /body/ul/li[1]
Langkah 7 => html/body/ul/li[1]
Langkah 8 => /html/body/ul/li[1]
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
Meskipun metode di atas tampak panjang, metode ini akan membantu Anda memahami cara membangun XPath secara lengkap. Sekarang beralih ke metode relatif.
//*[@id="product-list"]/li[1]As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
Perbedaan yang signifikan adalah bahwa XPath penuh tidak dapat dibaca dan sulit untuk dipelihara. Kekhawatiran lain yang jelas adalah bahwa jika ada perubahan pada elemen apa pun yang dimulai dari elemen root, XPath absolut tidak akan valid. Jadi masuk akal untuk menggunakan XPath relatif.
Namun demikian, sebelum mengomentari lebih jauh mengenai hal itu, mari kita cermati terlebih dulu kelebihan dan kekurangannya.
Dengan XPath, Anda tidak perlu khawatir jika Anda tidak mengetahui nama sebuah elemen karena Anda dapat menggunakan fungsi contains untuk mencari kemungkinan kecocokan. Oleh karena itu, Anda dapat naik ke atas DOM saat mencari item untuk di scrape.
Manfaat penting lainnya dari CSS adalah bahwa ia bekerja di peramban lama seperti versi Internet Explorer yang sudah ketinggalan zaman.
Seperti yang telah Anda pelajari di atas, kelemahannya yang paling signifikan adalah lebih mudah rusak ketika Anda mengubah elemen dalam jalur. Hal ini dapat sulit dipahami dibandingkan dengan selektor CSS yang akan Anda temukan di bawah ini.
Selain itu, ketika mengambil elemen dari XPath, kinerjanya jauh lebih lambat daripada CSS.
Seperti yang telah Anda ketahui, CSS adalah singkatan dari Cascading Style Sheets yang secara menonjol digunakan dalam menata elemen HTML di halaman web. Gaya ini termasuk menerapkan warna pada font, gambar latar belakang, dan warna, menyelaraskan dan memposisikan elemen, serta menambah/mengurangi spasi antar paragraf.
Untuk menetapkan gaya pada elemen HTML, Anda perlu menentukannya melalui Selektor CSS. Mari kita mulai dengan contoh sederhana yang dimulai dengan markup di bagian berikutnya.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>Jadi, inilah pemilih CSS untuk elemen di atas:
Anda juga dapat menggabungkan keduanya:
h1.header-styles-PemilihCSS inimemilih elemen h1 dengan kelas header-styles.
Operator > digunakan untuk memilih anak. Sebaliknya, operator + memilih anak pertama, dan operator ~ digunakan untuk memilih semua anak. Beberapa contohnya adalah sebagai berikut:
Tidak seperti XPath, yang tidak didukung oleh Beautiful Soup, selektor CSS didukung dengan pustaka penggalian yang paling efektif. Selain itu, tidak seperti XPath, selektor CSS lebih mudah dipelajari dan dipelihara. Hampir semua browser mendukungnya, kecuali browser lawas di bawah Internet Explorer versi 8. Namun, orang jarang menggunakan browser tersebut di zaman sekarang.
Meskipun Anda tidak menggunakan versi Internet Explorer yang lebih lama, mungkin masih ada ketidakkonsistenan dengan cara merender pada browser yang berbeda.
Karena ada berbagai versi CSS, mereka dapat menciptakan kebingungan di antara para pengembang dan pemula.
Faktor penting lainnya dalam teknologi web saat ini adalah keamanan CSS.
Perbedaan yang jelas antara XPath dan CSS adalah bahwa XPath bersifat dua arah. Ini berarti Anda dapat melintasi kedua arah dalam pohon DOM. Namun, Anda hanya dapat melintasi dari simpul induk ke simpul anak dengan CSS, yang dikenal sebagai aliran satu arah.
Seperti yang telah dibahas pada bagian sebelumnya, XPath lebih sulit untuk dipertahankan dan bukan kandidat yang baik untuk keterbacaan yang efektif. Di sisi lain, meskipun XPath dapat beroperasi di peramban lama, cara merendernya berbeda dari satu peramban ke peramban lainnya.
Oleh karena itu, dalam hal ini, CSS memiliki keunggulan.
XPATH menonjol karena CSS hanya dapat melintasi dari orang tua ke anak di area tertentu seperti melintasi pohon DOM. Sejauh menyangkut kecepatan, CSS lebih unggul.
Namun, perbedaan kecepatan antara XPath dan CSS tidak terlalu diperhitungkan dalam hal web scraping. Ada faktor lain yang perlu dipertimbangkan, seperti latensi jaringan dalam web scrapping.
CSS akan menjadi pilihan pertama Anda dalam hal Beautiful Soup karena tidak mendukung XPath.
Tidak ada jawaban yang tepat mengenai penyeleksi mana yang harus digunakan untuk proyek scraping web Anda. Seperti yang telah Anda temukan dalam artikel ini, XPath memiliki keunggulan dalam situasi tertentu, sedangkan CSS lebih menonjol dalam situasi lainnya.
Oleh karena itu, Anda perlu memperhitungkan poin-poin penting tertentu, seperti penjelajahan, dukungan browser, dan beberapa kemampuan teknis yang telah kita bahas. Kami harap Anda akan mempraktikkan apa yang sudah Anda pelajari dan nantikan artikel-artikel selanjutnya.