API браузера и DOM
Библиотека Kotlin/JS позволяет получить доступ к функциональности браузера с помощью пакета kotlinx.browser, который включает в себя стандартные объекты верхнего уровня, такие как document и window. Библиотека предоставляет безопасные обертки для функциональности, предоставляемой этими объектами, где это возможно. В качестве резервного варианта используется тип dynamic, чтобы обеспечить взаимодействие с функциями, которые не хорошо отображаются в системе типов Kotlin.
Взаимодействие с 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 лаконичным способом, ознакомьтесь со страницей Безопасный DSL для HTML.
© 2010–2023 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
