README
¶
==========================
`DOM Manipulation`_ in Go_
==========================
.. image:: https://img.shields.io/badge/Language-Go-blue.svg
:target: https://golang.org/
.. image:: https://godoc.org/github.com/siongui/godom/wasm?status.png
:target: https://godoc.org/github.com/siongui/godom/wasm
.. image:: https://api.travis-ci.org/siongui/godom.png?branch=master
:target: https://travis-ci.org/siongui/godom
.. image:: https://goreportcard.com/badge/github.com/siongui/godom/wasm
:target: https://goreportcard.com/report/github.com/siongui/godom/wasm
.. image:: https://img.shields.io/badge/license-Unlicense-blue.svg
:target: https://raw.githubusercontent.com/siongui/godom/master/UNLICENSE
.. image:: https://img.shields.io/badge/Status-Beta-brightgreen.svg
.. image:: https://img.shields.io/twitter/url/https/github.com/siongui/godom.svg?style=social
:target: https://twitter.com/intent/tweet?text=Wow:&url=%5Bobject%20Object%5D
Make `DOM Manipulation`_ in Go_ as similar to JavaScript_ as possible via
WebAssembly_. For DOM Manipulation via GopherJS_, visit root_ directory.
- `Ubuntu 18.04`_
- Go_ (1.11 or later)
.. contents:: **Table of Content**
Install
+++++++
.. code-block:: bash
$ GOARCH=wasm GOOS=js go get -u github.com/siongui/godom/wasm
Why?
++++
Why not use `syscall/js`_ directly?
###################################
Because the code written directly using `syscall/js`_ without any wrapper is
really ugly. For example, if you want to *getElementById*, you need to write:
.. code-block:: go
import (
"syscall/js"
)
foo := js.Global().Get("document").Call("getElementById", "foo")
With *godom*, you write:
.. code-block:: go
import (
. "github.com/siongui/godom/wasm"
)
foo := Document.GetElementById("foo")
which looks like *JavaScript* and more readable.
What if the method/property is not implemented in *godom*?
##########################################################
*godom* is only a wrapper for `syscall/js`_ package. If something is not
implemented, you can still use methods in `syscall/js`_ to call or get the
method/property you need. For example, if the *Play()* method of the audio
element is not implemented, you can use `syscall/js`_ *Call* method to call
*play* method directly:
.. code-block:: go
import (
. "github.com/siongui/godom/wasm"
)
a := Document.GetElementById("foo")
a.Call("play")
Code Example
++++++++++++
- `Frontend Programming in Go`_: If you have no experience of Go WebAssembly
before, read this.
Reference
+++++++++
.. [1] `WebAssembly · golang/go Wiki · GitHub <https://github.com/golang/go/wiki/WebAssembly>`_
.. %s/o \*Object/v Value/gc
.. _DOM Manipulation: https://www.google.com/search?q=DOM+Manipulation
.. _Go: https://golang.org/
.. _JavaScript: https://www.google.com/search?q=JavaScript
.. _syscall/js: https://godoc.org/syscall/js
.. _GopherJS: http://www.gopherjs.org/
.. _WebAssembly: https://duckduckgo.com/?q=webassembly
.. _root: https://github.com/siongui/godom
.. _Ubuntu 18.04: http://releases.ubuntu.com/18.04/
.. _UNLICENSE: http://unlicense.org/
.. _Frontend Programming in Go: https://siongui.github.io/2017/12/04/frontend-programming-in-go/
Documentation
¶
Overview ¶
Package wasm aims to make DOM manipulation in Go as similar to JavaScript as possible. The Go code is compiled to WebAssembly via official Go compiler 1.11 or later. This package is used for front-end programming.
You can import wasm as follows:
import ( . "github.com/siongui/godom/wasm" )
Access dom element with id="foo" as follows:
foo := Document.GetElementById("foo")
Or
foo := Document.QuerySelector("#foo")
If something is not implemented in this library, you can use methods of js.Value in "syscall/js" to manipulate DOM API directly.
For example, if **textContent** property of foo is not implemented, you can use Get method of js.Value in "syscall/js" to get the **textContent** property as follows:
t := foo.Get("textContent").String()
If some DOM method is not implemented, you can use Call method provided by js.Value in "syscall/js". For example, if foo is an audio element and **play** method of foo is not implemented. You can use Call method of js.Value in "syscall/js" to call **play** method of DOM audio element directly.
foo.Call("play")
You can also read the godoc of "syscall/js":
https://tip.golang.org/pkg/syscall/js/ https://godoc.org/syscall/js
Index ¶
- Variables
- func Alert(s string)
- type DOMRect
- type DOMTokenList
- type Value
- func (v Value) ActiveElement() Value
- func (v Value) ClassList() DOMTokenList
- func (v Value) CreateElement(tag string) Value
- func (v Value) CreateTextNode(textContent string) Value
- func (v Value) GetAttribute(attributeName string) string
- func (v Value) GetBoundingClientRect() DOMRect
- func (v Value) GetElementById(id string) Value
- func (v Value) InnerHTML() string
- func (v Value) OuterHTML() string
- func (v Value) QuerySelector(selectors string) Value
- func (v Value) QuerySelectorAll(selectors string) []Value
- func (v Value) SetInnerHTML(html string)
- func (v Value) SetOuterHTML(html string)
- func (v Value) TagName() string
- func (v Value) Write(markup string)
Constants ¶
This section is empty.
Variables ¶
var Document = Value{js.Global().Get("document")}
equivalent to document object in JavaScript DOM API.
var Window = &window{js.Global()}
equivalent to window object in JavaScript DOM API.
Functions ¶
Types ¶
type DOMTokenList ¶
func (DOMTokenList) Add ¶
func (t DOMTokenList) Add(s string)
func (DOMTokenList) Contains ¶
func (t DOMTokenList) Contains(s string) bool
func (DOMTokenList) Length ¶
func (t DOMTokenList) Length() int
func (DOMTokenList) Remove ¶
func (t DOMTokenList) Remove(s string)
func (DOMTokenList) Toggle ¶
func (t DOMTokenList) Toggle(s string)
type Value ¶
This type usually represents a DOM element or node. The type is actually a wrapper for js.Value in syscall/js package. Any instance of the type can also use the methods provided by syscall/js, such as Call, Get, and Set methods. If something is not implemented in this library, you can use the methods provided by syscall/js to manipulate JavaScript DOM API directly.
func (Value) ActiveElement ¶
Returns the currently focused element https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
func (Value) ClassList ¶
func (v Value) ClassList() DOMTokenList
func (Value) CreateElement ¶
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
func (Value) CreateTextNode ¶
https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
func (Value) GetBoundingClientRect ¶
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
func (Value) GetElementById ¶
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
func (Value) QuerySelectorAll ¶
https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
Source Files