کار با DOM و document

DOM همون صفحه‌ست؛ فقط با کت‌شلوار رسمی‌تر.

درس 3 از 10

پیدا کردن یک المنت

با kotlinx.browser.document می‌توانی به صفحه دسترسی داشته باشی. بعد با getElementById یک المنت را پیدا می‌کنی و متنش را عوض می‌کنی.

تغییر متن صفحه

import kotlinx.browser.document

fun main() {
    val title = document.getElementById("title")
    title?.textContent = "سلام از Kotlin/JS"
}

خروجی یا نتیجه اجرا

المنتی با id برابر title متنش می‌شود: سلام از Kotlin/JS

نکته کاربردی: این پایه تعامل با HTML است. اگر DOM را بفهمی، event و فرم و render هم راحت‌تر جا می‌افتد.

index.html

<h1 id="title">متن قبلی</h1>

خروجی یا نتیجه اجرا

قبل از اجرای کاتلین: متن قبلی / بعد از اجرا: سلام از Kotlin/JS

نکته کاربردی: کد وب بدون HTML مثل موتور بدون بدنه است. باید بدانی Kotlin دقیقاً کدام عنصر را دستکاری می‌کند.

با DOM آشنا شدی. حالا باید رویداد بگیریم؛ چون صفحه بدون کلیک مثل کنترل تلویزیون بدون باتریه.

یک المنت با id برابر message را پیدا کن و متنش را به «آماده‌ای؟» تغییر بده.

جواب تمرین

val message = document.getElementById("message")
message?.textContent = "آماده‌ای؟"

خروجی جواب

متن المنت message به «آماده‌ای؟» تغییر می‌کند.