golang DOM文档对象模型解析与操作插件库dom的使用

Golang DOM文档对象模型解析与操作插件库dom的使用

概述

这个库为WebAssembly目标提供了Go语言的DOM操作API，它封装了Web API的功能，使Go程序能够操作网页DOM元素。

主要特性

  • 更好的JS API（封装了syscall/js）
  • 基础DOM操作、样式和事件处理
  • 输入元素处理
  • SVG元素和变换
  • LocalStorage和SessionStorage
  • 扩展API（Chrome测试通过）：
    • 原生消息传递
    • 书签
    • 标签页
  • 类似net库的WebSocket支持
    • 已测试与gRPC的兼容性
  • 用于快速原型开发的wasm-server

快速开始

安装

go get -u github.com/dennwc/dom
go install github.com/dennwc/dom/cmd/wasm-server

运行示例

cd $GOPATH/src/github.com/dennwc/dom
wasm-server

然后访问 http://localhost:8080/ 查看结果。页面刷新时会自动重新编译源代码，方便实验。

完整示例代码

下面是一个使用dom库操作DOM的完整示例：

package main

import (
	"github.com/dennwc/dom"
)

func main() {
	// 获取body元素
	body := dom.GetDocument().GetBody()

	// 创建一个新的div元素
	div := dom.GetDocument().CreateElement("div")
	
	// 设置div的文本内容
	div.SetTextContent("Hello, DOM from Go!")
	
	// 设置div的样式
	div.GetStyle().SetProperty("color", "blue")
	div.GetStyle().SetProperty("font-size", "24px")
	div.GetStyle().SetProperty("margin", "20px")
	
	// 创建一个按钮
	btn := dom.GetDocument().CreateElement("button")
	btn.SetTextContent("Click me")
	
	// 添加点击事件处理
	btn.AddEventListener("click", func(e dom.Event) {
		div.SetTextContent("Button was clicked!")
		div.GetStyle().SetProperty("color", "red")
	})
	
	// 将元素添加到body中
	body.AppendChild(div)
	body.AppendChild(btn)
	
	// 操作LocalStorage
	dom.GetWindow().GetLocalStorage().SetItem("test", "value from Go")
	stored := dom.GetWindow().GetLocalStorage().GetItem("test")
	println("Stored value:", stored)
}

编辑器配置

如果你使用Visual Studio Code，可以配置工作区环境变量来支持WebAssembly开发：

在.vscode/settings.json中添加：

{
    "go.toolsEnvVars": { "GOARCH": "wasm", "GOOS": "js" }
}

类似项目

  • go-js-dom - 另一个Go语言的DOM操作库

这个库处于活跃开发中，但API会谨慎地进行版本控制以避免破坏性变更。建议使用Go的依赖管理工具锁定特定版本。


更多关于golang DOM文档对象模型解析与操作插件库dom的使用的实战教程也可以访问 https://www.itying.com/category-94-b0.html

1 回复

更多关于golang DOM文档对象模型解析与操作插件库dom的使用的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


Golang DOM解析与操作：使用goquery库

在Go语言中，虽然没有浏览器环境中的原生DOM API，但我们可以使用第三方库来解析和操作HTML文档。最流行的选择是goquery库，它提供了类似jQuery的语法来操作HTML文档。

安装goquery

首先安装goquery及其依赖：

go get github.com/PuerkitoBio/goquery

基本使用方法

1. 从字符串加载HTML

package main

import (
	"fmt"
	"log"
	"github.com/PuerkitoBio/goquery"
)

func main() {
	html := `<html>
		<head>
			<title>示例页面</title>
		</head>
		<body>
			<div id="content">
				<h1>标题</h1>
				<p class="text">段落1</p>
				<p class="text">段落2</p>
				<ul>
					<li>项目1</li>
					<li>项目2</li>
				</ul>
			</div>
		</body>
	</html>`

	doc, err := goquery.NewDocumentFromReader(strings.NewReader(html))
	if err != nil {
		log.Fatal(err)
	}
	
	// 操作DOM...
}

2. 从URL加载HTML

doc, err := goquery.NewDocument("http://example.com")
if err != nil {
	log.Fatal(err)
}

常用DOM操作方法

1. 选择元素

// 按标签名选择
doc.Find("h1").Each(func(i int, s *goquery.Selection) {
	fmt.Println("h1内容:", s.Text())
})

// 按类名选择
doc.Find(".text").Each(func(i int, s *goquery.Selection) {
	fmt.Printf("段落%d: %s\n", i+1, s.Text())
})

// 按ID选择
content := doc.Find("#content")
fmt.Println("内容区域:", content.Text())

2. 获取和修改属性

// 获取属性
doc.Find("a").Each(func(i int, s *goquery.Selection) {
	href, exists := s.Attr("href")
	if exists {
		fmt.Println("链接:", href)
	}
})

// 设置属性
doc.Find("img").SetAttr("alt", "图片描述")

3. 遍历和操作元素

// 遍历所有li元素
doc.Find("li").Each(func(i int, s *goquery.Selection) {
	fmt.Printf("项目%d: %s\n", i+1, s.Text())
})

// 添加元素
doc.Find("ul").AppendHtml("<li>新项目</li>")

// 移除元素
doc.Find(".remove-me").Remove()

4. 获取和修改HTML内容

// 获取HTML
html, _ := doc.Find("#content").Html()
fmt.Println("内容HTML:", html)

// 设置HTML
doc.Find("#content").SetHtml("<p>新内容</p>")

完整示例

package main

import (
	"fmt"
	"log"
	"strings"
	
	"github.com/PuerkitoBio/goquery"
)

func main() {
	html := `<html>
		<body>
			<div id="main">
				<h1>产品列表</h1>
				<ul class="products">
					<li data-id="1">产品A</li>
					<li data-id="2">产品B</li>
				</ul>
			</div>
		</body>
	</html>`

	doc, err := goquery.NewDocumentFromReader(strings.NewReader(html))
	if err != nil {
		log.Fatal(err)
	}

	// 修改标题
	doc.Find("h1").SetText("我们的产品")

	// 添加新产品
	doc.Find("ul.products").AppendHtml(`<li data-id="3">产品C</li>`)

	// 遍历产品
	doc.Find("ul.products li").Each(func(i int, s *goquery.Selection) {
		id, _ := s.Attr("data-id")
		fmt.Printf("产品ID: %s, 名称: %s\n", id, s.Text())
	})

	// 获取修改后的HTML
	newHtml, _ := doc.Html()
	fmt.Println("修改后的HTML:")
	fmt.Println(newHtml)
}

其他有用的DOM库

  1. net/html - Go标准库中的HTML解析器
  2. htmlquery - 使用XPath语法查询HTML
  3. cascadia - CSS选择器实现，goquery底层使用它

注意事项

  1. goquery不是线程安全的，如果要在多个goroutine中使用，应该为每个goroutine创建独立的文档实例
  2. 对于大型HTML文档，考虑使用流式解析器如标准库的html/tokenizer
  3. goquery适合中等大小的HTML文档，对于非常大的文档可能会有性能问题

goquery提供了强大而简洁的API来处理HTML文档，使得在Go中操作DOM变得非常简单直观。

回到顶部