Struktur HTML dan Pemilih CSS
Pahami pohon DOM dan tulis pemilih CSS untuk menargetkan elemen.
Struktur HTML dan Pemilih CSS adalah pelajaran R Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar R Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus R Academy mencakup 4 pelajaran total.
Pohon DOM HTML
Setiap halaman web disusun sebagai pohon Document Object Model (DOM). Elemen HTML bersarang satu di dalam yang lain dan membentuk hierarki induk-anak. Pengikisan web menelusuri pohon ini untuk mengekstrak data.
# HTML structure conceptually:
# <html>
# <body>
# <div class='container'>
# <h1 id='title'>Hello</h1>
# <p class='text'>World</p>
# </div>
# </body>
# </html>
# rvest lets us query this tree with CSS selectors
library(rvest)
html <- read_html('<div><h1>Title</h1><p class="info">Text</p></div>')
html_text(html_element(html, 'h1'))Selector CSS: Selector Tag
Selector CSS paling sederhana menargetkan elemen berdasarkan nama tag. Menulis p memilih semua elemen paragraf. Menulis h1 memilih semua judul tingkat 1.
library(rvest)
html <- read_html('
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<h2>A heading</h2>
</div>
')
# Tag selector: selects all <p> elements
nodes <- html_elements(html, 'p')
html_text2(nodes)
# Returns: c('First paragraph', 'Second paragraph')Selector CSS: Class dan ID
Gunakan .classname untuk memilih elemen berdasarkan class dan #idname untuk memilih satu elemen berdasarkan ID. Class dapat muncul berkali-kali; ID seharusnya unik di halaman.
library(rvest)
html <- read_html('
<div>
<p class="highlight">Important text</p>
<p class="normal">Regular text</p>
<span id="price">$9.99</span>
</div>
')
# Class selector (prefix with .)
html_text2(html_element(html, '.highlight'))
# ID selector (prefix with #)
html_text2(html_element(html, '#price'))Selector Keturunan dan Anak
div p memilih setiap p di dalam div (pada kedalaman apa pun). div > p hanya memilih anak langsung. h1 + p memilih p yang langsung mengikuti h1 (saudara bersebelahan).
library(rvest)
html <- read_html('
<div class="outer">
<p>Direct child</p>
<section>
<p>Nested deeper</p>
</section>
</div>
')
# Descendant: both paragraphs
all_p <- html_elements(html, 'div p')
length(all_p) # 2
# Direct child only
direct_p <- html_elements(html, 'div.outer > p')
length(direct_p) # 1Selector Atribut
Selector atribut CSS memungkinkan Anda memfilter berdasarkan atribut HTML: [attr] memeriksa keberadaan, [attr='val'] memeriksa nilai yang persis sama, dan [attr*='val'] memeriksa apakah nilai mengandung substring.
library(rvest)
html <- read_html('
<div>
<a href="https://example.com">External</a>
<a href="/about">Internal</a>
<a>No href</a>
</div>
')
# Select only anchors that have an href attribute
with_href <- html_elements(html, 'a[href]')
length(with_href) # 2
# Select anchors with href starting with https
external <- html_elements(html, 'a[href^="https"]')
html_text2(external) # 'External'Dasar-Dasar XPath
XPath adalah alternatif untuk selector CSS yang lebih ampuh untuk kueri kompleks. Dalam rvest, gunakan html_element(html, xpath='//tag'). //p berarti setiap p di mana pun; /html/body/p adalah jalur absolut.
library(rvest)
html <- read_html('
<html><body>
<table>
<tr><td class="price">10.99</td></tr>
<tr><td class="price">5.50</td></tr>
</table>
</body></html>
')
# XPath: select all td with class price
nodes <- html_elements(html, xpath = '//td[@class="price"]')
html_text2(nodes)
# c('10.99', '5.50')
# XPath text() function
nodes2 <- html_elements(html, xpath = '//td[contains(@class,"price")]')
html_text2(nodes2)Menggabungkan Selector
Selector dapat digabungkan untuk memperoleh ketepatan. div.card h2 memilih h2 di dalam div dengan class card. Koma memisahkan beberapa selector independen: h1, h2, h3 memilih ketiga tingkat judul tersebut.
library(rvest)
html <- read_html('
<div class="card">
<h2>Card Title</h2>
<p class="desc">Description here</p>
<span class="price">$19</span>
</div>
<div class="footer">
<h2>Footer Heading</h2>
</div>
')
# Only h2 inside .card
card_h2 <- html_element(html, 'div.card h2')
html_text2(card_h2) # 'Card Title'
# Multiple selectors with comma
price_desc <- html_elements(html, '.price, .desc')
html_text2(price_desc)Alat SelectorGadget
SelectorGadget adalah bookmarklet peramban yang membantu Anda menemukan selector CSS secara interaktif. Klik elemen yang Anda inginkan (disorot hijau) dan elemen yang tidak Anda inginkan (disorot merah) — alat ini secara otomatis menghasilkan selector CSS minimal.
# SelectorGadget workflow:
# 1. Open target page in Chrome/Firefox
# 2. Activate SelectorGadget bookmarklet
# 3. Click element you want -> turns green, selector appears
# 4. Click elements you DON'T want -> turns red, selector narrows
# 5. Copy the selector shown at the bottom
# 6. Use in rvest:
library(rvest)
# Example: SelectorGadget found '.product-title' for us
# page <- read_html('https://books.toscrape.com')
# titles <- html_elements(page, '.product_pod h3 a')
# html_text2(titles)
cat('SelectorGadget is available at selectorgadget.com')Memeriksa Halaman di DevTools
DevTools peramban (F12) memungkinkan Anda memeriksa DOM secara langsung. Klik kanan elemen apa pun, pilih Inspect, dan panel Elements akan menampilkan HTML. Saat Anda mengarahkan kursor, elemen di halaman akan disorot sehingga membantu Anda mengidentifikasi tag, class, dan ID yang tepat untuk ditargetkan.
# DevTools workflow for finding selectors:
# 1. F12 -> Elements tab
# 2. Click the cursor icon (Inspector)
# 3. Click the element on the page
# 4. Right-click highlighted HTML -> Copy -> Copy selector
# 5. Paste selector into rvest
# The copied selector might look like:
# '#main > div.results > article:nth-child(1) > h3'
# Simplify it: usually '.results h3' works just as well
# Validate your selector in the Console with:
# document.querySelectorAll('.results h3')
library(rvest)
cat('Always verify selectors return the elements you expect')Pseudo-class dan nth-child
Pseudo-class CSS seperti :first-child, :last-child, dan :nth-child(n) memungkinkan Anda memilih elemen berdasarkan posisinya di dalam induknya — berguna ketika elemen tidak memiliki class pembeda.
library(rvest)
html <- read_html('
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
')
# First item
first <- html_element(html, 'li:first-child')
html_text2(first) # 'First'
# Third item
third <- html_element(html, 'li:nth-child(3)')
html_text2(third) # 'Third'
# Even items
evens <- html_elements(html, 'li:nth-child(even)')
html_text2(evens) # c('Second', 'Fourth')Aturan Spesifisitas Selector
Jika beberapa selector dapat cocok, spesifisitas menentukan selector yang dipilih. ID mengalahkan class; class mengalahkan tag. Dalam pengikisan web, hal ini tidak terlalu penting — tetapi memahami spesifisitas membantu Anda menulis selector yang tepat dan menghindari kecocokan yang keliru.
library(rvest)
html <- read_html('
<div id="header" class="top">
<p class="title">Main Title</p>
</div>
<div class="content">
<p class="title">Content Title</p>
</div>
')
# Overly broad: gets BOTH titles
broad <- html_elements(html, 'p.title')
html_text2(broad)
# Specific: only header title
specific <- html_element(html, '#header p.title')
html_text2(specific) # 'Main Title'
# Be as specific as needed but not more
content_title <- html_element(html, '.content .title')
html_text2(content_title)Pemeriksaan Singkat
Uji pemahaman Anda tentang selector CSS yang digunakan dalam pengambilan data web dengan rvest.
Ringkasan: Selector HTML & CSS
Hal-hal penting: DOM berbentuk pohon; selector CSS digunakan untuk menavigasinya. Gunakan tag untuk jenis elemen, .class untuk kelas, #id untuk elemen unik, > untuk turunan langsung, dan [attr] untuk atribut. SelectorGadget dan DevTools membantu Anda menemukan selector secara interaktif. XPath (//tag[@attr]) menangani kasus yang tidak dapat ditangani CSS.
# Summary of key CSS selectors for web scraping:
# 'p' -> all <p> elements
# '.price' -> elements with class='price'
# '#main' -> element with id='main'
# 'div > p' -> direct child p of div
# 'a[href]' -> a elements that have href attr
# 'a[href*=http] -> a elements where href contains 'http'
# 'li:nth-child(2)' -> second li in its parent
# 'h1, h2' -> both h1 and h2 elements
# xpath='//td[@class="price"]' -> XPath alternative
library(rvest)
cat('Selectors are the foundation of reliable web scraping')Pertanyaan yang Sering Diajukan
Apakah pelajaran “Struktur HTML dan Pemilih CSS” gratis?
Ya — teks lengkap “Struktur HTML dan Pemilih CSS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus R Academy, upgrade ke CoddyKit PRO. Kursus R Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Struktur HTML dan Pemilih CSS”?
Pahami pohon DOM dan tulis pemilih CSS untuk menargetkan elemen. Kamu berlatih R Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai R Academy?
Tidak diperlukan pengalaman sebelumnya. R Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Struktur HTML dan Pemilih CSS” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran R Academy ini?
Ya. Setiap pelajaran R Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Struktur HTML dan Pemilih CSS
- Dasar-Dasar html_element() dan html_text()
- Scraping Tabel dan Tautan
- Menangani Paginasi dan Banyak Halaman