[Golang] GopherJS DOM Example - Access HTML Data Attribute

Introduction

It is really cool to run Go code in the browser. GopherJS is a compiler from Go to JavaScript, which makes this possible. In this post, we will give a simple example of DOM manipulation in Go program. This example shows how to access HTML data-* attribute.

Install GopherJS and DOM bindings

Run the following command to install GopherJS and GopherJS bindings for the JavaScript DOM APIs:

$ go get -u github.com/gopherjs/gopherjs
$ go get -u honnef.co/go/js/dom

Source Code

If you have following element in HTML:

<div id="foo" data-my-demo-value="Hey"></div>

Access the value by Dataset() function, which returns map[string]string:

import "honnef.co/go/js/dom"

...

d := dom.GetWindow().Document()
div1 := d.GetElementByID("foo").(*dom.HTMLDivElement)
v := div1.Dataset()["myDemoValue"]

Note that data-my-demo-value becomes myDemoValue when accessed. Full example is as follows:

HTML:

index.html | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html>
<head>
  <title>GopherJS DOM example - Access HTML Data Attribute</title>
</head>
<body>

<div id="foo" data-my-demo-value="Hey"></div>
<div id="foo2" data-hello="world"></div>

<script src="demo.js"></script>
</body>
</html>

Go:

data.go | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
package main

import "honnef.co/go/js/dom"

func main() {
	d := dom.GetWindow().Document()

	div1 := d.GetElementByID("foo").(*dom.HTMLDivElement)
	print(div1.Dataset()["myDemoValue"])

	div2 := d.GetElementByID("foo2").(*dom.HTMLDivElement)
	print(div2.Dataset()["hello"])
}

Compile the Go code to JavaScript by:

$ gopherjs build data.go -o demo.js

Put demo.js together with the index.html in the same directory and open the index.html with your browser. Open the browser console and you will see the printed value.

Tested on: Ubuntu Linux 15.10, Go 1.5.2.

Powered by Github Pages, Pelican, pyScss.