Tidak semua data web yang di-scrap bersih dan dapat langsung digunakan. Jika parser Anda tidak dikonfigurasi dengan benar, web scraper Anda mungkin mengembalikan data “kotor” yang tidak perlu dalam jumlah besar. Untuk membuat parser yang kuat, Anda perlu menggunakan dan mengonfigurasi pemilih CSS yang tepat.
Karena ada berbagai jenis pemilih CSS, memilih pemilih CSS yang tepat dapat menjadi sebuah tantangan. Lembar contekan pemilih CSS ini dirancang untuk membantu Anda memilih pemilih CSS yang sesuai untuk kebutuhan ekstraksi data Anda. Selain itu, kami telah menyertakan contoh pembuatan parser HTML dengan berbagai pemilih CSS dalam bahasa pemrograman seperti Scrapy dan Node.JS untuk memberikan pemahaman praktis tentang implementasinya.
Daftar Isi
Lembar contekan pemilih CSS untuk pengikisan web
Catatan: Jika Anda belum familiar dengan Cascading Style Sheets (CSS), sebaiknya Anda membaca dasar-dasar CSS dan kegunaannya di akhir blog ini Pengikisan web untuk membaca.
Meskipun ada banyak pemilih CSS, kami tidak perlu mengetahui semuanya untuk web scraping (kecuali Anda juga tertarik mempelajari pengembangan front-end. Itu bukan tujuan kami saat ini).
Oleh karena itu, lembar contekan pemilih CSS kami hanya mencantumkan hal-hal yang dapat membantu kami membuat web scraper yang efisien. Untuk lembar contekan pemilih CSS yang lebih detail, kunjungi halaman referensi pemilih CSS W3Schools.
| pemilih | Contoh | Skenario kasus penggunaan |
| * | * | Pemilih ini memilih semua elemen dalam suatu halaman. Tidak jauh berbeda dengan satu halaman. Memang tidak banyak gunanya, tapi tetap ada baiknya untuk mengetahuinya |
| .Kelas | .Judul kartu | Pemilih CSS paling sederhana menargetkan atribut kelas. Jika hanya digunakan oleh elemen target Anda, itu mungkin sudah cukup. |
| .kelas1.kelas2 | .card-heading.card-title | Ada elemen dengan kelas seperti class="card-heading card-title". Jika kita melihat spasi, itu karena elemen tersebut menggunakan beberapa kelas. Namun, tidak ada metode tetap untuk memilih elemen. Cobalah untuk menjaga ruang. Jika tidak berhasil, ganti spasi dengan titik. |
| Kartu #ID | Deskripsi Kartu #C | Apa yang terjadi jika kelas digunakan dalam terlalu banyak elemen atau elemen tersebut tidak memiliki kelas? Memilih ID Anda mungkin merupakan hal terbaik berikutnya. Satu-satunya masalah adalah ID unik per elemen. Jadi tidak perlu memotong dan mengikis beberapa elemen sekaligus. |
| elemen | h4 | Untuk memilih elemen, yang perlu kita lakukan hanyalah menambahkan nama tag HTML ke parser kita. |
| elemen.kelas | h4.judul peta | Ini adalah bentuk paling umum yang akan kami gunakan dalam proyek kami. |
| elemen induk > elemen anak | div > h4 | Kita dapat memberitahu scraper kita untuk mengekstrak satu elemen ke elemen lainnya. Dalam contoh ini kita ingin mencari elemen h4 yang induknya adalah div. |
| parentElement.class > elemen anak | div.card-body > h4 | Kita dapat menggabungkan logika sebelumnya untuk menentukan elemen induk dan mengekstrak elemen CSS anak tertentu. Hal ini sangat berguna bila data yang diinginkan tidak memiliki kelas atau ID, namun berada pada induk dengan kelas/ID unik. |
| (Atribut) | (href) | Cara hebat lainnya untuk mengatasi elemen yang tidak memiliki kelas yang jelas untuk dipilih. Scraper Anda akan mengekstrak semua elemen yang berisi atribut tertentu. Dalam hal ini, semuanya akan diperlukan Tag paling umum berisi atribut href. |
| (atribut=nilai) | (target=_kosong) | Kita dapat memberitahu scraper kita untuk mengekstrak hanya elemen dengan nilai tertentu dalam atributnya. |
| Elemen(atribut=nilai) | a(rel=berikutnya) | Ini adalah pemilih yang kami gunakan untuk menambahkan fungsionalitas perayapan ke skrip scrapy kami: next_page = Response.css('a(rel=next)').attrib('href') Situs web target yang digunakan untuk Semua pagination mereka menghubungkan kelas yang sama, jadi kami harus mencari solusi lain. |
| (atribut~=nilai) | (Judul~=Peringkat) | Pemilih ini memilih semua elemen yang mengandung kata “Rating” di atribut judulnya. |
Untuk sebagian besar proyek, penyeleksi ini akan lebih dari cukup untuk mengekstrak data yang Anda cari.
Catatan: Jika Anda ingin mempelajari lebih lanjut tentang pemilih CSS secara umum, Mozilla memiliki halaman bagus yang menjelaskan cara kerja pemilih CSS untuk pengembangan web. Dengan mengingat hal tersebut, inilah saatnya beralih ke sesuatu yang lebih praktis.
Cara Membuat Parser HTML dengan Selector CSS (Contoh Kode)
Setiap web scraper, tidak peduli bagaimana strukturnya, memerlukan parser. Dengan menggunakan metode ini, skrip kami memfilter data dari kode HTML dan hanya mengekstrak sedikit informasi yang kami perlukan. Karena setiap bahasa pemrograman menangani hal ini secara berbeda, berikut adalah empat parser HTML yang dibuat dengan CSS untuk perpustakaan berbeda:
Membuat parser HTML dengan pemilih Scrapy CSS
Scrapy adalah kerangka kerja sumber terbuka yang membuat web scraping dengan Python menjadi mudah dan terukur. Untuk proyek ini, kami menelusuri situs web pemasok anggur (https://www.wine-selection.com/) untuk mengumpulkan nama, pangeran, dan tautan semua anggur.
def parse(self, response):
for wines in response.css('div.txt-wrap'):
yield {
'name': wines.css('a::text').get(),
'price': wines.css('strong.price::text').get().replace('$ ',''),
'link': wines.css('a').attrib('href'),
}
Ada dua hal yang perlu diingat dengan metode analisis ini:
Catatan: Kami menggunakan jawaban dari permintaan pertama. Tanpa jawaban terhadap analisis, tidak ada gunanya mendefinisikan metode ini.
Anda dapat membaca tutorial Scrapy selengkapnya di sini
Membuat parser HTML dengan pemilih Rvest CSS
Rvest bagi R sama dengan Scrapy bagi Python. Ini (Rvest) adalah pustaka web scraping yang sangat efisien dan banyak akal yang dirancang untuk R dan menonjol karena kemudahannya memanipulasi data dan membuat visualisasi yang indah.
Untuk proyek ini kami ingin membuat gudang film dari IMDb dan mendapatkan judul film, tahun, rating, dan ringkasan.
titles = page > html_nodes(".lister-item-header a") > html_text()
movie_url = page > html_nodes(".lister-item-header a") > html_attr("href") > paste("https://www.imdb.com", ., sep)
year = page > html_nodes(".text-muted.unbold") > html_text()
rating = page > html_nodes(".ratings-imdb-rating strong") > html_text()
synopsis = page > html_nodes(".ratings-bar+ .text-muted") > html_text()
Di Rvest kita tidak perlu mendefinisikan metode untuk mengurai HTML yang diunduh. Yang harus kami lakukan hanyalah mengirimkan permintaan dan menyimpan respons dalam variabel halaman.
Kemudian kita bisa menggunakan > untuk menavigasi DOM dan mengekstrak data yang kita cari.
Beberapa hal yang perlu diingat tentang parser ini:
- Kami menggunakan html_text() di akhir string untuk memberi tahu skrip kami agar hanya menangkap teks di dalam node.
- Karena URL terfragmentasi dalam atribut href (The Suicide Squad), kami menambahkan fungsi paste() untuk membuat URL final benar-benar dapat diklik.
Latihan ini sangat menyenangkan dan kami harus membuat lingkaran agar scraper kami dapat menelusuri penomoran halaman.
Anda dapat membaca tutorial lengkap scraper Rvest di sini
Membuat parser HTML dengan pemilih CSS C# ScrapySharp
Seperti bahasa pemrograman lainnya, kita juga bisa menggunakan C# saja untuk membuat scraper. Namun, kami memerlukan lebih banyak waktu untuk membuat skrip berkualitas rendah - banyak baris kode untuk melakukan tugas sederhana.
Sebagai gantinya, kita bisa menggunakan ScrapySharp, perpustakaan yang dirancang khusus untuk web scraping di C#.
Meskipun kami mengerjakan proyek yang relatif kecil, Anda dapat menerapkan logika yang sama untuk membuat parser yang lebih besar dan kompleks ke dalam proyek Anda.
HtmlWeb web = new HtmlWeb();
HtmlDocument doc = web.Load("https://blog.hubspot.com/topic-learning-path/customer-retention");
var Headers = doc.DocumentNode.CssSelect("h3.blog-card__content-title > a")
Perhatikan bahwa kali ini kita menggunakan elemen element.class > untuk membuat pemilih CSS.
Kami melakukannya seperti itu karena tidak ada kelas di sana Tag yang berisi judul artikel di blog Hubspot.
Anda dapat membaca tutorial web scraping C# selengkapnya di sini
Membuat Parser HTML dengan Selector CSS Node.JS Cheerio
Node.JS adalah lingkungan runtime yang memungkinkan kita menggunakan JavaScript di backend.
Berkat keserbagunaannya, kita dapat melakukan banyak hal dengan Node.JS. Misalnya, kita dapat menggunakan perpustakaan bernama Puppeteer untuk menulis web scraper yang berinteraksi dengan situs web untuk mengakses data di balik pemicu dan peristiwa.
Namun, untuk halaman statis, solusi terbaik adalah menggunakan Cheerio untuk mengurai HTML yang diunduh.
Sekali lagi, ini hanyalah contoh sederhana, tetapi Anda dapat menggunakan sintaks yang sama untuk mengekstrak lebih banyak elemen selama Anda mengetahui pemilih CSS yang tepat (di sinilah lembar contekan pemilih CSS di atas berguna).
Untuk contoh ini, kami mengirimkan permintaan menggunakan Axios (klien HTTP berbasis janji untuk Node.js) dan kemudian menggunakan Cheerio untuk memilih elemen harga dalam DOM.
axios(url)
.then(response => {
const html = response.data;
const $ = cheerio.load(html)
const salePrice = $('.sale-price').text()
console.log(salePrice);
})
Anda dapat membaca tutorial lengkap web scraper Node.js di sini
Pengikisan web dengan pemilih CSS
Jika Anda baru memulai web scraping, sekarang Anda akan mempelajari lebih lanjut tentang CSS, perannya dalam web scraping, dan bagaimana kita dapat menggunakannya untuk mengurai HTML.
Selain HTML dan JavaScript, CSS adalah salah satu elemen penyusun setiap situs web dan aplikasi web. Ia menggunakan pemilih untuk memilih elemen HTML berdasarkan kelas, ID, atribut, dan kelas semu dan kemudian menerapkan gaya pada elemen tersebut untuk memberi tahu browser cara menampilkan elemen pada tingkat visual.
Dengan menggunakan logika yang sama, kita dapat menggunakan pemilih CSS untuk memberi tahu scraper kita di mana letak data yang ingin kita kumpulkan.
Kita bisa membayangkan prosesnya seperti ini:
- Pertama, kami menyebabkan skrip kami mengirim permintaan ke server. Sebagai tanggapan, server mengirimkan kepadanya kode sumber HTML.
- Kami kemudian membuat parser menggunakan CSS untuk memfilter HTML dan memilih hanya elemen yang kami perlukan.
Membangun parser dengan CSS bisa menjadi sangat berguna karena kita dapat menggunakan satu baris kode untuk mengambil sekumpulan elemen tertentu.
Misalnya, kita dapat secara khusus membuat daftar produk, mengekstrak nama produk, deskripsi dan harga, dan mengisi tabel dengan semua data ini untuk analisis lebih lanjut.
Namun, sebelum kita dapat melakukan hal tersebut, kita perlu memahami struktur website target kita agar dapat menemukan target yang tepat.
Cara memeriksa halaman untuk memilih pemilih CSS yang benar
Ada beberapa cara untuk menemukan properti yang tepat yang perlu kita targetkan saat membuat parser dengan CSS.
Cara paling umum untuk memeriksa situs web adalah menggunakan alat pengembang browser.
Ayo masuk ke blog ScraperAPI, klik kanan dan klik Inspect.
"Alat Inspektur" terbuka sehingga kita dapat melihat struktur HTML halaman.
Untuk halaman ini kita ingin mendapatkan judul setiap artikel, jadi kita perlu melihat bagaimana judul tersebut diberikan dalam HTML.
Kita dapat melakukan ini dengan menggunakan “Alat Inspektur” dan mengklik judulnya.
Oke, kita dapat melihat bahwa judul kita ada di a
tag. Dengan informasi ini kami dapat mengarahkan scraper kami untuk menemukan semua orang
Tandai dan tambahkan ke tabel kami.
Tag ini hanya digunakan untuk judul, jadi itu sudah cukup untuk halaman ini.
Namun, di sebagian besar situs web kami menemukannya
Ke
Tag digunakan untuk banyak elemen berbeda, yang akan menyebabkan scraper kami menghasilkan banyak noise.
Skenario lain di mana tag tidak terpotong adalah ketika mencoba mengambil URL tertentu.
URL – hampir – selalu berada dalam satu URL Elemen dalam atribut href-nya. Untuk alasan ini, kami cukup meminta skrip kami untuk mengekstrak semuanya Tag menampilkan link navigasi, link footer, dan jenis link lainnya di halaman.
Tidak terlalu berguna, bukan?
Kemudian penyeleksi CSS ikut berperan.
Jika diamati lebih dekat, kita dapat melihat dua hal:
- Yang paling penting
di mana kita dapat menemukan bahwa judul tersebut memiliki kelas “Tubuh Kartu”.
- Sedangkan judulnya sendiri adalah a
dengan kelas 'judul kartu'
Dengan informasi baru ini, kita dapat membuat metode untuk mengurai HTML yang diunduh dan hanya mengekstrak elemen yang cocok dengan filter kita.
Jika kita menulis metode ini menggunakan Scrapy, tampilannya akan seperti ini:
def parse(self, response): for articles in response.css('div.card-body'): yield { 'title': articles.css('h4.card-title::text').get(), }Tentu saja, setiap bahasa pemrograman akan sedikit berbeda. Di Scrappy kami menggunakan “:text” untuk menunjukkan bahwa kami hanya menginginkan teks di dalam tag dan bukan keseluruhan elemen.
Namun, logika di balik pemilih CSS relatif sama.
Ingatlah bahwa halaman arahan kami memiliki struktur yang sangat sederhana. Situs web lain bisa jauh lebih kompleks, jadi penting untuk memiliki lembar contekan CSS untuk membantu kami mengetahui cara terbaik memprogram parser kami.
Pemilih CSS yang tepat membuat parser HTML yang kuat
Seperti yang Anda lihat, jika Anda memahami sintaks untuk membuat pemilih CSS, Anda dapat mengekstrak hampir semua elemen dari situs web - termasuk halaman dinamis.
Ini semua tentang menemukan logika yang tepat untuk audiens target dan memahami dasar-dasar bahasa pemrograman yang ingin Anda gunakan untuk membuat web scraper Anda.
Sejauh ini dua bahasa favorit kami adalah Python dengan Scrapy dan R dengan Rvest. Sintaksnya mudah dipahami dan hanya dengan beberapa baris kode Anda dapat mengekstrak data dalam jumlah besar.
Selain itu, jauh lebih mudah untuk mengadaptasi skrip Anda ke penomoran halaman dengan Python dan R dibandingkan dengan C# atau Node.js.
Namun, jika Anda sudah memiliki banyak pengalaman dengan yang terakhir, tidak akan ada masalah dalam memilihnya. Selama Anda mendapatkan data yang benar dan dapat memprogram lebih cepat, sisanya terserah Anda.
Jika Anda menginginkan lembar contekan CSS yang lebih komprehensif, lihat yang ini dari W3Schools. Ingin mempelajari lebih lanjut tentang web scraping? Lihat sumber daya pengikisan web ini di blog ScraperAPI:
Sampai jumpa lagi, selamat menggores!
- Sedangkan judulnya sendiri adalah a
