> For the complete documentation index, see [llms.txt](https://docs.skrape.it/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.skrape.it/docs/1.0.x/dsl/extract-client-side-rendered-data.md).
# JS-rendered sites
Most modern webpages are dynamically adding elements or data to the DOM by the use of Javascript. Some even are single-page-applications (SPA) build with React.js, Vue.js, Angular, etc - that in turn means nearly the whole DOM is rendered by Javascript that has to be interpreted by a Javascript engine (usually your Browser).
**Skrape{it}**'s default mode is making simple HTTP requests - and thereby it's not possible to scrape JS driven websites in default mode.
{% hint style="info" %}
**Request option `mode = Mode.DOM` for the win!**
When using **skrape{it}**'s DOM mode it emulates to be a real browser, executes the pages Javascript and returns a parsed representation of a website. It supports parsing of client side rendered markup (thereby it's possible to scrape or parse websites that uses React.js, Vue.js, Angular, jQuery and so on). The DOM mode will use the latest Chrome engine to render the page, therefore it provides support for ES6 and modern Javascript features.
:bulb: Keep in mind: ***Because of the browser emulation it is not as fast as the default mode!***
{% endhint %}
## Example
**Let's assume a pretty basic scenario. We want to make a request to a website that is rendering data via Javascript. For instance it's markup could look like this - that is adding an extra div element including some text.**
{% code title="Example Markup that renders elements via Javascipt" %}
```markup
i'm the title
i'm the body
i'm the headline
i'm a paragraph
i'm a second paragraph
```
{% endcode %}
{% code title="How to scrape client-side rendered DOM elements" %}
```kotlin
fun main() {
val scrapedData = skrape {
url = "http://some.url"
mode = Mode.DOM // <--- here's the magic
extract {
div {
withClass = "dynamic"
findFirst { text }
}
}
}
println(scrapedData)
}
```
{% endcode %}
{% code title="Will print extracted data to the console" %}
```bash
> I have been dynamically added via Javascript
```
{% endcode %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.skrape.it/docs/1.0.x/dsl/extract-client-side-rendered-data.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.