API браузера и DOM

Взаимодействие с 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.