Gegevens uit JavaScript extraheren
Leer gegevens op te halen die door JavaScript worden gegenereerd of geladen, waaronder inhoud uit AJAX-aanroepen en single-pageapplicaties.
Gegevens uit JavaScript extraheren is een gratis Webscraping en bots-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Webscraping en bots. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Webscraping en bots bevat in totaal 4 lessen.
Dynamische webinhoud uitgelegd
Veel moderne websites laden niet al hun inhoud in één keer. In plaats daarvan gebruiken ze JavaScript om gegevens op te halen en de pagina nadat die aanvankelijk is geladen bij te werken. Dit heet dynamische inhoud.
Traditionele scrapingtools zoals Requests en BeautifulSoup zien alleen de oorspronkelijke HTML. Ze missen alles wat JavaScript later laadt.
De rol van JavaScript bij het laden
JavaScript kan op verschillende manieren nieuwe gegevens laden:
- AJAX-aanroepen: Asynchronous JavaScript and XML. De browser vraagt op de achtergrond gegevens op bij een server zonder de hele pagina opnieuw te laden.
- DOM-manipulatie: JavaScript voegt rechtstreeks elementen toe aan de structuur van de pagina, verwijdert ze of past ze aan (Document Object Model).
- Singlepage-applicaties (SPA's): volledige websites die zijn gebouwd om inhoud dynamisch te laden en te navigeren zonder de hele pagina opnieuw te laden.
Door dit dynamische laden wordt scrapen complexer.
Wanneer Requests en BS4 tekortschieten
Wanneer je de Python-bibliotheek requests gebruikt, krijg je de onbewerkte HTML die de server aanvankelijk verstuurt. Als een website daarna JavaScript gebruikt om meer gegevens te laden, staan die gegevens niet in de HTML die je hebt ontvangen.
BeautifulSoup kan alleen de HTML verwerken die aan de bibliotheek wordt doorgegeven. De bibliotheek kan geen JavaScript uitvoeren om extra inhoud op te halen of erop te wachten.
Selenium voor dynamische inhoud
Hier wordt Selenium essentieel. Selenium bestuurt programmatisch een echte webbrowser, zoals Chrome of Firefox.
Wanneer Selenium een pagina opent, voert de browser alle JavaScript uit, inclusief AJAX-aanroepen en DOM-manipulaties. Daardoor ziet Selenium de volledig weergegeven pagina, net als een menselijke gebruiker.
Wachten tot elementen verschijnen
Omdat inhoud dynamisch wordt geladen, is die mogelijk niet meteen beschikbaar wanneer Selenium een pagina voor het eerst laadt. Je moet Selenium laten wachten totdat aan een specifiek element of een bepaalde voorwaarde is voldaan voordat je gegevens probeert te extraheren.
Als je niet wacht, probeert je script mogelijk een element te vinden voordat JavaScript het heeft weergegeven, wat tot fouten of ontbrekende gegevens leidt.
Expliciete wachttijden gebruiken
Met Seleniums WebDriverWait in combinatie met ExpectedConditions (EC) kun je expliciete wachttijden instellen. Hiermee laat je Selenium maximaal een bepaalde tijd wachten totdat aan een voorwaarde is voldaan.
Veelgebruikte voorwaarden zijn wachten totdat een element zichtbaar, aanklikbaar of aanwezig in het DOM is.
Probeer dit voorbeeld uit te voeren:
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time
def main():
driver = webdriver.Chrome()
driver.get("https://www.selenium.dev/selenium/web/dynamic.html")
# Click a button that will make an element appear after a delay
driver.find_element(By.ID, "adder").click()
# Wait up to 10 seconds for the new element to appear
try:
new_element = WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.ID, "box0"))
)
print("New element found:", new_element.text)
except Exception as e:
print("Element not found within time limit:", e)
driver.quit()
if __name__ == "__main__":
main()Weergegeven gegevens extraheren
Nadat je met succes hebt gewacht tot dynamische inhoud is verschenen, lijkt het extraheren van de gegevens op het extraheren van statische inhoud met Selenium.
Je kunt methoden gebruiken zoals find_element(By.ID, "id_name"), find_element(By.CLASS_NAME, "class_name") of find_element(By.CSS_SELECTOR, "css_selector") om de elementen te vinden. Vervolgens kun je hun tekstinhoud of attributen ophalen.
Code: dynamische tekst ophalen
Dit voorbeeld laat zien hoe je op een element wacht en vervolgens de tekst ervan extraheert. Stel je een pagina voor waarop een bericht "Loading..." na enkele seconden verandert in echte gegevens.
Probeer dit voorbeeld uit te voeren:
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time
def main():
driver = webdriver.Chrome()
# Using a simple test page that changes content
driver.get("https://www.selenium.dev/selenium/web/dynamic.html")
# Click button to reveal content
driver.find_element(By.ID, "reveal").click()
# Wait for the content to be visible
try:
# The 'revealed' div becomes visible
revealed_div = WebDriverWait(driver, 10).until(
EC.visibility_of_element_located((By.ID, "revealed"))
)
print("Revealed content:", revealed_div.text)
except Exception as e:
print("Revealed content not found:", e)
driver.quit()
if __name__ == "__main__":
main()Singlepage-applicaties scrapen
Singlepage-applicaties (SPA's) zijn websites die één HTML-pagina laden en de inhoud vervolgens dynamisch bijwerken terwijl de gebruiker ermee werkt. Navigatie binnen een SPA houdt vaak niet in dat de hele pagina opnieuw wordt geladen.
Selenium kan goed overweg met SPA's omdat het als een volledige browser werkt. Je werkt met elementen, bijvoorbeeld door op navigatielinks te klikken, en Selenium voert de JavaScript uit, waardoor het DOM wordt bijgewerkt. Daarna pas je dezelfde technieken voor wachten en extraheren toe.
Korte controle over wachttijden
Welke Selenium-techniek is cruciaal bij het scrapen van dynamische inhoud die na het laden van de pagina verschijnt, om ervoor te zorgen dat de inhoud beschikbaar is voordat je die probeert te extraheren?
Samenvatting: dynamische gegevens extraheren
Goed gedaan! Je hebt geleerd hoe je dynamische webinhoud aanpakt:
- Veel websites gebruiken JavaScript voor AJAX-aanroepen, DOM-manipulatie en SPA's.
- Traditionele hulpmiddelen zoals Requests en BeautifulSoup kunnen geen JavaScript uitvoeren.
- Selenium kan JavaScript weergeven doordat het een volledige browser bestuurt.
- Expliciete wachttijden zijn essentieel om ervoor te zorgen dat dynamisch geladen inhoud aanwezig is voordat je die extraheert.
Met deze vaardigheid krijg je toegang tot een groot aantal moderne websites voor je scrapingprojecten!
Leer Python met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Gegevens uit JavaScript extraheren” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Webscraping en bots, waaronder “Gegevens uit JavaScript extraheren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Webscraping en bots bevat in totaal 4 lessen.
Wat leer ik in “Gegevens uit JavaScript extraheren”?
Leer gegevens op te halen die door JavaScript worden gegenereerd of geladen, waaronder inhoud uit AJAX-aanroepen en single-pageapplicaties. Je oefent met Webscraping en bots door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Webscraping en bots te beginnen?
Ervaring vooraf is niet nodig. Webscraping en bots op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Gegevens uit JavaScript extraheren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Webscraping en bots?
Ja. Elke les over Webscraping en bots bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Kennismaken met Selenium
- Browserinteracties automatiseren
- Gegevens uit JavaScript extraheren
- Wachtstrategieën voor dynamische pagina's