7.2.1 浏览器与 DOM API

2 分钟阅读

原文链接: https://kotlinlang.org/docs/browser-api-dom.html

7.2.1 浏览器与 DOM API

kotlinx-browser 库让你可以访问浏览器特有的功能。它包含 document 和 window 这类常用的顶层对象，并在可能的情况下为它们的功能提供类型安全的封装。

作为后备方案，dynamic 类型可以访问那些无法很好地映射到 Kotlin 类型系统中的函数。

要使用浏览器与 DOM API，请把 kotlinx-browser 库作为依赖添加到项目的 build.gradle(.kts) 文件中：

Kotlin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
repositories {
    mavenCentral()
}

kotlin {
    js {
        browser()
    }

    sourceSets {
        commonMain {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-browser:0.5.0")
            }
        }
    }
}

Groovy

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
repositories {
    mavenCentral()
}

kotlin {
    js {
        browser()
    }

    sourceSets {
        commonMain {
            dependencies {
                implementation 'org.jetbrains.kotlinx:kotlinx-browser:0.5.0'
            }
        }
    }
}

与 DOM 交互

要与文档对象模型（DOM）交互，你可以使用 document 变量。例如，你可以通过这个对象设置网站的背景颜色：

1
document.bgColor = "FFAA12"

document 对象还提供了按 ID、名称、类名、标签名等方式获取特定元素的方法。所有返回的元素类型都是 Element?。要访问它们的属性，你需要把它们转换为合适的类型。例如，假设你有一个带 email <input> 字段的 HTML 页面：

1
2
3
4
5
<body>
    <input type="text" name="email" id="email"/>

    <script type="text/javascript" src="tutorial.js"></script>
</body>

注意你的脚本被放在 body 标签的底部。这可以确保脚本加载之前 DOM 已完全可用。

有了这样的设置，你就可以访问 DOM 中的元素。要访问 input 字段的属性，请调用 getElementById 并把它转换为 HTMLInputElement。然后你就可以安全地访问它的属性，例如 value：

1
2
val email = document.getElementById("email") as HTMLInputElement
email.value = "hadi@jetbrains.com"

就像引用这个 input 元素一样，你也可以访问页面上的其他元素，把它们转换为合适的类型。

接下来学什么？

要了解如何以简洁的方式在 DOM 中创建和组织元素，请查看类型安全的 HTML DSL。

最后修改 September 13, 2026: 更新C和Cpp以及新增Kotlin和SwiftUI (d20dcaaa6)