ブラウザとDOM API
Kotlin/JS標準ライブラリは、kotlinx.browserパッケージを使用してブラウザ固有の機能にアクセスできます。このパッケージには、documentやwindowのような典型的なトップレベルオブジェクトが含まれています。標準ライブラリは、これらのオブジェクトによって公開される機能に対して、可能な限り型安全なラッパーを提供します。代替手段として、Kotlinの型システムにうまくマッピングできない関数とのやり取りには、dynamic型が使用されます。
DOMとのやり取り
ドキュメントオブジェクトモデル (DOM) とのやり取りには、document変数を使用できます。たとえば、このオブジェクトを通してウェブサイトの背景色を設定できます。
document.bgColor = "FFAA12"documentオブジェクトは、ID、名前、クラス名、タグ名などによって特定の要素を取得する方法も提供します。返されるすべての要素はElement?型です。それらのプロパティにアクセスするには、適切な型にキャストする必要があります。たとえば、電子メールの<input>フィールドを含むHTMLページがあると仮定します。
<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 = "[email protected]"このinput要素を参照するのと同じように、ページ上の他の要素にアクセスし、それらを適切な型にキャストできます。
DOMで要素を簡潔に作成し、構造化する方法については、型安全なHTML DSLを参照してください。