Belajar Scrapling - Adaptor & Parsing Dasar
Mendalami objek Adaptor: seleksi elemen dengan CSS dan XPath, memahami perbedaan get dan getall, memanfaatkan chaining, serta mengekstraksi teks dan atribut. Menjelaskan manipulasi DOM berbasis lxml — traversal tree dan iterasi elemen — untuk membangun data terstruktur.
#Pendahuluan
Di episode 3 kalian sudah mengambil halaman web dengan Fetcher, session, dan impersonation. Sekarang saatnya bagian yang paling sering dipakai sepanjang karier scraping: membaca isi HTML dengan Adaptor.
Episode ini mengajarkan seleksi dasar — CSS selector dan XPath, perbedaan .get() dengan .getall(), chaining antar elemen — lalu ekstraksi teks dan atribut, sampai manipulasi tree lxml untuk iterasi elemen.
#Mengenal Objek Adaptor
Adaptor adalah representasi pohon DOM dari HTML mentah. Di episode 3, page hasil Fetcher.get adalah Adaptor. Ia juga bisa dibuat dari string HTML langsung — berguna saat HTML sudah kalian simpan atau diambil dari sumber lain:
from scrapling import Adaptor
html = """
<html>
<body>
<h1 class="judul">Halo Dunia</h1>
<p class="konten">Ini paragraf pertama.</p>
<p class="konten">Ini paragraf kedua.</p>
</body>
</html>
"""
page = Adaptor(html)Sekarang page siap di-seleksi tanpa perlu request sama sekali. Objek ini juga mendukung operasi seperti .get() untuk elemen, .text, dan atribut — yang akan kita pakai sepanjang episode ini.
#Seleksi dengan CSS: Metode css
Cara paling umum memilih elemen adalah .css(selector) dengan selector CSS. Metode ini mengembalikan objek Adaptor baru yang mewakili hasil seleksi:
page = Adaptor(html)
judul = page.css("h1.judul")
paragraf = page.css("p.konten")Selector h1.judul memilih tag h1 dengan class judul, dan p.konten memilih semua paragraf ber-class konten. Hasilnya objek Adaptor yang bisa di-chain — misalnya mengambil teks langsung dari hasil seleksi, atau menyeleksi turunan dari hasil itu.
#Seleksi dengan XPath: Metode xpath
XPath memberi kontrol lebih halus — menunjuk elemen berdasarkan posisi, teks, atau relasi. Metode .xpath() menerima ekspresi XPath:
judul = page.xpath("//h1[@class='judul']")
paragraf_kedua = page.xpath("(//p)[2]")//h1[@class='judul'] menemukan h1 ber-class judul di mana pun di dokumen, sementara (//p)[2] mengambil paragraf kedua. Saat CSS selector tidak bisa mengungkapkan kondisi tertentu — misalnya "elemen yang teksnya dimulai dengan kata tertentu" — XPath biasanya jawabannya.
#get vs getall: Satu atau Semua
Ini perbedaan paling penting di episode ini. .get() mengambil elemen pertama dari hasil seleksi, sedangkan .getall() mengembalikan semua hasil sebagai list:
page = Adaptor(html)
pertama = page.css("p").get()
semua = page.css("p").getall()
print(pertama.text)
print(len(semua))pertama.text menampilkan teks paragraf pertama, dan len(semua) memberi jumlah semua paragraf. Aturan praktisnya: pakai .get() saat kalian tahu hanya ingin satu hasil (judul, harga, satu nomor), dan .getall() saat ingin seluruh koleksi (daftar produk, semua link).
#Chaining Seleksi
Seleksi tidak harus satu tingkat. Kalian bisa menyeleksi elemen dari hasil seleksi sebelumnya — inilah chaining. Cara ini memakai parameter base untuk menandai titik awal pencarian:
page = Adaptor(html)
judul = page.css("body").css("h1", base=0)Panggilan kedua mencari h1 di dalam hasil body — hasilnya lebih spesifik dan tetap ringkas. Chaining sangat berguna pada halaman kompleks dengan banyak container: seleksi container dulu, lalu seleksi elemen di dalamnya.
#Mengekstraksi Teks dan Atribut
Setelah elemen terpilih, ekstraksi datanya. Teks elemen diambil lewat properti .text (yang menormalisasi spasi), dan atribut lewat parameter atribut pada .get():
html = """
<a href="/artikel/1" data-category="python">Belajar Parsing</a>
"""
page = Adaptor(html)
link = page.css("a").get()
print(link.text)
print(link.attrib["href"])Teks elemen otomatis dibersihkan dari whitespace berlebih, dan attrib memberi dictionary berisi semua atribut — href dan data-category di sini. Untuk selector tertentu, ada juga pseudo-selector ::text yang langsung menargetkan teks node:
teks = page.css("a::text").get()
print(teks)Ini pintasan untuk "ambillah teks dari elemen ini" tanpa harus menavigasi objek dulu.
#Manipulasi DOM dan Iterasi Elemen
Karena Adaptor berbasis lxml, tree-nya bisa ditelusuri secara terprogram. Ada dua pola yang sering dipakai. Pertama, iterasi elemen hasil seleksi untuk menyusun data:
produk_list = page.css("div.produk").getall()
data = []
for item in produk_list:
nama = item.css("h2").text
harga = item.css("span.harga").text
data.append({"nama": nama, "harga": harga})Setiap item hasil .getall() adalah Adaptor mandiri, jadi chaining di dalam loop berjalan mulus. Pola ini menjadi fondasi dataset terstruktur di episode 10. Kedua, kalian bisa menavigasi relasi langsung antar node:
parent = item.xpath("..").get()
siblings = item.xpath("../div")Ekspresi .. mengangkat satu tingkat ke elemen induk, dan ../div mengambil semua saudara div. Kemampuan menavigasi relasi ini yang membuat XPath tetap relevan di samping CSS.
Warning
Perhatikan bahwa hasil seleksi bisa kosong — selector yang typo, atau struktur DOM yang berubah. Selalu periksa apakah hasil .get() bernilai None sebelum memakai atributnya, agar script tidak crash di tengah crawl.
#Menyusun Data Terstruktur
Sekarang satukan semua yang sudah dipelajari menjadi satu fungsi yang menghasilkan data terstruktur:
from scrapling import Adaptor
def parse_artikel(html):
page = Adaptor(html)
return {
"judul": page.css("h1").text,
"link": page.css("a.baca-selengkapnya").get().attrib["href"],
"paragraf": page.css("article p").getall(),
}Fungsi ini mengambil HTML mentah, memilih judul dengan CSS, mengambil link lewat atribut, dan mengumpulkan semua paragraf. Perhatikan kombinasi .text, attrib, dan .getall() dalam satu fungsi — itulah inti parsing yang akan kalian pakai berulang kali.
#Penutup
Kalian sekarang mahir membaca HTML dengan Adaptor: membangun objek dari string, memilih elemen dengan .css() dan .xpath(), memahami kapan memakai .get() atau .getall(), memanfaatkan chaining, mengekstrak teks dan atribut, serta mengiterasi tree lxml untuk membangun data terstruktur.
Inti yang harus dibawa pulang:
Adaptorbisa dibuat dari HTML string atau hasil fetcher; berbasis lxml sehingga sangat cepat..css()dan.xpath()mengembalikanAdaptoryang bisa di-chain..get()ambil hasil pertama,.getall()ambil semua sebagai list..textmenormalkan teks;attribmenyediakan semua atribut elemen.- Iterasi elemen dengan
.getall()lalu chain per item adalah pola dasar membangun dataset.
Di episode 5 kita naik satu tingkat: selection methods lanjutan — find_by_text, find_by_regex, pencarian elemen similar, dan filter berbasis kondisi atribut. Sampai jumpa!