用 JavaScript 调用 Go 函数后，如何让 Go 访问 DOM？

在上一篇文章中，我们已经了解了如何通过 JavaScript 调用 Go 编写的函数。这一篇文章，我们将主要介绍如何在 Go 中访问 DOM API。这将使我们能够进行更丰富的 Web 开发，包括操纵 DOM 元素、处理事件和与用户交互。

准备工作

在开始之前，我们需要确保已经正确设置了 Go WASM 环境。这包括安装 Go WASM 工具链和配置必要的构建脚本。有关详细信息，请参阅上一篇文章。

访问 DOM API

为了在 Go 中访问 DOM API，我们需要使用 syscall/js 包。该包提供了一系列函数，允许 Go 代码与 JavaScript 代码进行交互。

获取 DOM 元素

为了获取 DOM 元素，我们可以使用 syscall/js.Global().Get("document") 函数。这将返回一个 syscall/js.Value 对象，代表文档对象。然后，我们可以使用 syscall/js.Value.Call("getElementById", id) 函数获取具有指定 ID 的元素。例如：

import (
	"syscall/js"
)

func main() {
	doc := js.Global().Get("document")
	element := doc.Call("getElementById", "my-element")
}

设置 DOM 元素属性

为了设置 DOM 元素的属性，我们可以使用 syscall/js.Value.Set() 函数。例如，以下代码将元素的 innerHTML 属性设置为 "Hello, world!":

import (
	"syscall/js"
)

func main() {
	doc := js.Global().Get("document")
	element := doc.Call("getElementById", "my-element")
	element.Set("innerHTML", "Hello, world!")
}

添加事件监听器

为了向 DOM 元素添加事件监听器，我们可以使用 syscall/js.Value.Call("addEventListener", event, listener) 函数。例如，以下代码向元素添加一个 "click" 事件监听器，当元素被点击时，它将调用 handleClick 函数：

import (
	"syscall/js"
)

func main() {
	doc := js.Global().Get("document")
	element := doc.Call("getElementById", "my-element")
	element.Call("addEventListener", "click", js.FuncOf(handleClick))
}

func handleClick(args []js.Value) {
	// 事件处理代码
}

调用 JavaScript 函数

为了从 Go 中调用 JavaScript 函数，我们可以使用 syscall/js.Call() 函数。例如，以下代码调用 JavaScript 函数 myFunction()：

import (
	"syscall/js"
)

func main() {
	js.Call("myFunction")
}

结语

通过 syscall/js 包，我们可以在 Go 中轻松访问 DOM API。这使我们能够进行更丰富的 Web 开发，包括操纵 DOM 元素、处理事件和与用户交互。希望本篇文章能够帮助您更好地理解如何在 Go 中使用 DOM API。