API браузера и DOM

Библиотека kotlinx-browser позволяет обращаться к функциональности, специфичной для браузера. Она включает распространённые глобальные объекты, такие как document и window, и, где это возможно, предоставляет типобезопасные оболочки для их функциональности.

В качестве запасного варианта тип dynamic предоставляет доступ к функциям, которые плохо вписываются в систему типов Kotlin.

Чтобы использовать API браузера и DOM, добавьте библиотеку kotlinx-browser в качестве зависимости в файл build.gradle(.kts) вашего проекта:

repositories {
    mavenCentral()
}

kotlin {
    js {
        browser()
    }

    sourceSets {
        commonMain {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-browser:0.5.0")
            }
        }
    }
}

repositories {
    mavenCentral()
}

kotlin {
    js {
        browser()
    }

    sourceSets {
        commonMain {
            dependencies {
                implementation 'org.jetbrains.kotlinx:kotlinx-browser:0.5.0'
            }
        }
    }
}

Взаимодействие с DOM

Для взаимодействия с объектной моделью документа (DOM) можно использовать переменную document. Например, с помощью этого объекта можно изменить цвет фона нашего сайта:

document.bgColor = "FFAA12"

Объект document также позволяет получить определённый элемент по идентификатору, имени, имени класса, имени тега и так далее. Тип всех возвращаемых элементов — Element?. Чтобы получить доступ к их свойствам, необходимо привести их к соответствующему типу. Например, предположим, что у вас есть HTML-страница с полем <input> для электронной почты:

<body>
    <input type="text" name="email" id="email"/>

    <script type="text/javascript" src="tutorial.js"></script>
</body>

Обратите внимание, что ваш скрипт включён в нижней части тега body. Это гарантирует, что DOM будет полностью доступен до загрузки скрипта.

После такой настройки можно обращаться к элементам DOM. Чтобы получить доступ к свойствам поля input, вызовите getElementById и приведите результат к типу HTMLInputElement. Затем можно безопасно обращаться к его свойствам, например к value:

val email = document.getElementById("email") as HTMLInputElement
email.value = "hadi@jetbrains.com"

Так же, как и к этому элементу input, можно обращаться к другим элементам страницы, приводя их к соответствующим типам.

Что дальше?

Чтобы узнать, как лаконично создавать элементы DOM и задавать их структуру, ознакомьтесь с разделом Типобезопасный HTML DSL.

04 августа 2026

© 2010–2026 JetBrains s.r.o. and Kotlin Programming Language contributors
Licensed under the Apache License, Version 2.0.
https://kotlinlang.org/docs/browser-api-dom.html