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 лаконичным способом, ознакомьтесь со статьей Typesafe HTML DSL.
© 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
