CodeKitHubWat is deze tool?
XPath (XML Path Language) is een W3C-standaard voor het navigeren en selecteren van nodes — elementen, attributen, tekst — binnen een XML-document met behulp van compacte, padachtige syntaxis, bijvoorbeeld `//book[price>30]/title` selecteert elke `<title>` waarvan het naastliggende `<price>`-element groter is dan 30, overal in het document. Het wordt gebruikt door XSLT-stylesheets, XML-validatietools, webscrapers, browserautomatiseringsframeworks (Selenium, Playwright) en XML-bibliotheken van veel programmeertalen.
De huidige versie die door elke grote browser wordt geïmplementeerd — Chrome, Firefox, Safari, Edge — is XPath 1.0, de oorspronkelijke W3C-aanbeveling uit 1999. Deze tool gebruikt exact diezelfde native engine via de `document.evaluate()`-API van de browser, dus resultaten hier komen overeen met wat je zou krijgen via de DevTools van de browser of JavaScript dat in een browser draait. Latere XPath 2.0/3.0/3.1-specificaties (die functies toevoegen zoals `for`, sequenties en matching met reguliere expressies) worden niet geïmplementeerd — zie de FAQ voor wat dat in de praktijk betekent.
Een expressie kan een van twee soorten resultaten opleveren: een node-set (nul of meer overeenkomende elementen, attributen of tekstnodes, die deze tool serialiseert en één per regel weergeeft met een aantal), of een scalaire waarde — een getal, string of boolean — wanneer de expressie zelf een waarde berekent, zoals `count(//book)` of `//book[1]/title = 'Dune'`.
Waarom gebruiken?
- Debug een XPath-expressie voordat je die hardcodeert in een webscraper, Selenium/Playwright-test of XSLT-stylesheet.
- Controleer snel of een gegeven XPath de node selecteert die je verwacht uit een echt XML/HTML-voorbeeld.
- Zie exacte aantallen matches en geserialiseerde output in plaats van te gokken op basis van code.
- Krijg direct leesbare foutmeldingen bij ongeldige XML of ongeldige XPath-syntaxis in plaats van een cryptische stack trace.
- 100% client-side: je XML en expressie verlaten nooit je browser.
Hoe te gebruiken
- Plak of bewerk je XML (of HTML) in het invoervak — een voorbeelddocument van een boekwinkel is vooraf ingevuld zodat je meteen kunt zien hoe het werkt.
- Typ een XPath-expressie in het expressieveld, of bewerk het vooraf ingevulde voorbeeld.
- Klik op "Evaluate" (of druk op Enter in het expressieveld).
- Lees de gevonden nodes hieronder, met bovenaan een aantal; scalaire resultaten (getallen, strings, booleans) worden direct weergegeven.
- Als de XML of de expressie ongeldig is, vervangt een specifieke foutmelding de resultaten.
Voorbeeld
Invoer
XML:
<bookstore>
<book><title>The Great Gatsby</title><price>12.99</price></book>
<book><title>Learning XPath</title><price>34.50</price></book>
<book><title>Dune</title><price>45.00</price></book>
</bookstore>
XPath: //book[price>30]/titleUitvoer
✓ 2 node(s) matched
<title>Learning XPath</title>
<title>Dune</title>Slechts 2 van de 3 boeken hebben een prijs boven de 30, dus precies 2 <title>-elementen worden geretourneerd — het derde boek (Gatsby, $12,99) wordt terecht uitgesloten.
XPath vs. CSS-selectors in één oogopslag
Beide talen selecteren nodes uit een document, maar ze lossen verschillende problemen op. Gebruik deze tabel om de juiste tool te kiezen voor een bepaalde selectie.
| Mogelijkheid | XPath | CSS-selectors |
|---|---|---|
| Selecteren op tag/class/id, naar beneden | Ja | Ja — en meestal sneller |
| Selecteren op zichtbare/tekstuele inhoud | Ja — `contains(text(),'x')` | Nee |
| Omhoog navigeren naar een ouder/voorouder | Ja — `//div[span]/..` | Nee (`:has()` is een nieuwere, gedeeltelijke uitzondering) |
| Vergelijkingen met waarden van zusjes (bijv. `price>30`) | Ja | Nee |
| Werkt buiten een browser (server-side XML-tools, XSLT) | Ja | Nee — CSS-selectors zijn specifiek voor browser/DOM |
Gerelateerde tools
Werk je met gestructureerde dataformaten? Deze tools passen goed bij het testen van XPath.
Veelgestelde vragen
Waar wordt XPath voor gebruikt?
XPath selecteert nodes — elementen, attributen of tekst — uit een XML- of HTML-document met behulp van padsyntaxis. Het is de selectietaal achter XSLT-transformaties, veel XML-validators, en wordt veel gebruikt bij webscraping en browsertestautomatisering (Selenium, Playwright, Cypress) om elementen op een pagina te vinden, vooral wanneer CSS-selectors alleen de benodigde voorwaarde niet kunnen uitdrukken.
XPath vs. CSS-selectors — wat moet ik gebruiken?
Ze overlappen, maar zijn niet equivalent. XPath kan een ouder selecteren op basis van de inhoud van een kind (`//div[span='Total']`), omhoog navigeren naar voorouders, en selecteren op zichtbare tekst (`//button[contains(text(),'Submit')]`) — CSS-selectors kunnen niet omhoog in de boom navigeren en kunnen helemaal niet matchen op tekstinhoud. Als je alleen selecteert op tag, class of ID, naar beneden door het document, zijn CSS-selectors eenvoudiger te schrijven en meestal sneller te evalueren. Grijp specifiek naar XPath wanneer je "selecteer de ouder van deze tekst" of "selecteer op basis van wat het element zegt" nodig hebt, niet alleen op basis van hoe het getagd of geklasseerd is.
Ondersteunt deze tool XPath 2.0- of 3.0-functies?
Nee — net als geen enkele browser. Browsers implementeren XPath 1.0 (de W3C-aanbeveling uit 1999) via `document.evaluate()`, en deze tool gebruikt exact diezelfde native engine, dus het komt overeen met wat je zou krijgen wanneer je dezelfde expressie uitvoert in de DevTools van de browser of JavaScript. Functies en features die in XPath 2.0/3.0/3.1 zijn geïntroduceerd (zoals `for`-expressies, sequenties of `matches()` met reguliere expressies) zijn niet beschikbaar — alleen 1.0-functies zoals `contains()`, `starts-with()`, `substring()`, `count()`, `position()` en `last()` werken hier.
Wat zijn enkele veelvoorkomende XPath-expressies die ik zou moeten kennen?
`//tag` selecteert elke `<tag>` overal in het document. `//tag[@attr='value']` selecteert `<tag>`-elementen waarvan het attribuut `attr` gelijk is aan `value`. `//tag[contains(text(),'x')]` selecteert `<tag>`-elementen waarvan de directe tekst `x` bevat. `//tag[1]` selecteert het eerste `<tag>`-zusje binnen elke ouder. `//parent/child` selecteert `<child>`-elementen die directe kinderen zijn van `<parent>`. `count(//tag)` retourneert een getal in plaats van een node-set.
Verwerkt deze tool XML-namespaces?
Alleen het gangbare geval zonder namespace wordt netjes ondersteund, wat de overgrote meerderheid van handmatig geschreven of gescrapete XML/HTML dekt. Als je document een XML-namespace declareert (bijv. `xmlns="..."` op het rootelement), vereist `document.evaluate` een namespace-bewuste resolverfunctie die prefixen aan URI's koppelt, wat deze eenvoudige tool niet instelt — expressies tegen namespace-XML kunnen nul matches opleveren, zelfs als ze er correct uitzien. Dit is een bekende beperking, geen bug: verwijder de namespace-declaratie uit je voorbeeld, of gebruik de local-name()-functie als workaround (bijv. `//*[local-name()='title']`).
Wordt mijn XML- of XPath-expressie naar een server verzonden?
Nee. Alles draait lokaal met de ingebouwde `DOMParser` en `document.evaluate()` van je browser — dezelfde engine die je browser intern al gebruikt. Niets wat je typt of plakt verlaat ooit je apparaat.