API браузера и DOM
Стандартная библиотека Kotlin/JS позволяет получить доступ к функциям, специфичным для браузера, используя пакет kotlinx.browser, который включает в себя стандартные объекты верхнего уровня, такие как document и window. Стандартная библиотека предоставляет безопасные обертки для функций, экспонируемых этими объектами, где это возможно. В качестве запасного варианта, тип dynamic используется для взаимодействия с функциями, которые плохо отображаются в системе типов Kotlin.
Взаимодействие с DOM
Для взаимодействия с объектной моделью документа (DOM) вы можете использовать переменную document. Например, вы можете установить цвет фона веб-сайта с помощью этого объекта:
document.bgColor = "FFAA12"
Объект document также предоставляет возможность извлечения конкретного элемента по идентификатору, имени, имени класса, имени тега и т. д. Все возвращенные элементы имеют тип Element?. Для доступа к их свойствам необходимо привести их к соответствующему типу. Например, предположим, что у вас есть веб-страница с полем ввода email <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 лаконичным способом, ознакомьтесь с Безопасным DSL для HTML.
© 2010–2022 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
