如何从 Go WebAssembly 访问 DOM 元素属性？答案

【问题标题】：How can I access DOM Element properties from Go WebAssembly?如何从 Go WebAssembly 访问 DOM 元素属性？
【发布时间】：2019-03-29 01:52:11
【问题描述】：

我正在尝试从 https://github.com/golang/go/wiki/WebAssembly 扩展“Hello WebAssembly”示例。如给定的那样，该示例只是将一条消息打印到控制台。我想添加一些代码使用syscall/js 来替换正文元素内容。

下面的尝试构建失败：

package main

import (
    "fmt"

    "syscall/js"
)

func main() {
    fmt.Println("Hello, WebAssembly!") // original example
    // I added
    doc := js.Global().Get("document")
    body := doc.Call("getElementById", "thebody")
    body.innerHTML = "Dynamic Content"
}

当我尝试使用 $ env GOOS=js GOARCH=wasm go build -o main.wasm 构建时我得到： ./wasm.go:14:6: body.innerHTML undefined (type js.Value has no field or method innerHTML)

仔细想想并不奇怪，但我在https://godoc.org/syscall/js 的文档中没有看到解释如何获取和设置元素属性的示例。

【问题讨论】：

1) “这个包是实验性的。它目前的范围只是允许测试运行，但还没有为用户提供一个全面的 API。” 2) JS 和 DOM 是两个不同的东西。 JS 包允许您调用 JS 函数，它不包含 JS DOM 的完整 Go 实现。 3) 您发布的 Wiki 链接建议使用 github.com/dennwc/dom 进行 DOM 操作。你试过了吗？
@Adrian 谢谢。我查看了 DOM 库。稍后它可能会很有用，但我喜欢在我还在采取婴儿步骤时避免额外的包裹。目前，icza 的回答满足了我的需求。

标签： go webassembly

【解决方案1】：

要获取某个 JavaScript 对象的任何属性的值，请使用 Value.Get() 方法（实际上，当您通过调用 js.Global().Get("document") 访问文档对象时已经使用了它）。同样，要设置属性的值，请使用Value.Set()。

要获取/设置其值的属性名称只是 Go string 值，在您的情况下为 "innerHTML"。要设置的值可能是许多 Go 值（例如，string、整数、浮点数、bool、切片、映射等），js.ValueOf() 函数用于获得一个js.Value()，它将最终确定。在您的情况下，您可以简单地使用 Go string 值 "Dynamic Content"。

doc := js.Global().Get("document")
body := doc.Call("getElementById", "thebody")
body.Set("innerHTML", "Dynamic Content")

【讨论】：

谢谢！在我修复了最后一行的错字之后，这才奏效。应该是 body.Set 而不是 body.SetValue。
@MikeEllis 是的，它是body.Set()。谢谢。