Browser API and the DOM
The Kotlin/JS standard library allows us to access browser-specific functionality using the
kotlinx.browser package, which includes typical top-level objects such as
window. The standard library provides typesafe wrappers for the functionality exposed by these objects wherever possible. As a fallback, the
dynamic type is used to provide interaction with functions that do not map well into the Kotlin type system.
Interacting with the DOM
For interaction with the Document Object Model (DOM), we can use the variable
document. For example, we can set the background color of our website through this object:
document.bgColor = "FFAA12"
document object also provides us a way to retrieve a specific element by ID, name, class name, tag name and so on. All returned elements are of type
Element?. To access their properties, we need to cast them to their appropriate type. For example, say we have an HTML page with an email
<input type="text" name="email" id="email"/>
Note that we include our script at the bottom of the
body tag. This ensures that the DOM is fully available before the script is loaded.
With this setup, we can access elements of our DOM. To access the properties of the
input field, we invoke
getElementById and cast it to
HTMLInputElement. We can then safely access its properties, such as
val email = document.getElementById("email") as HTMLInputElement
email.value = "[email protected]"
Much like we reference this
input element, we can access other elements on the page, casting them to the appropriate types.
To see how we can express how elements in the DOM can be created and structured in a concise way, check out the the Typesafe HTML DSL.