========================== 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?status.svg :target: https://godoc.org/github.com/siongui/godom

.. image:: https://api.travis-ci.org/siongui/godom.svg?branch=master :target: https://travis-ci.org/siongui/godom

.. image:: https://goreportcard.com/badge/github.com/siongui/godom :target: https://goreportcard.com/report/github.com/siongui/godom

.. 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 GopherJS_. For DOM Manipulation via WebAssembly_, visit wasm_ directory.

• Ubuntu 20.04_
• Go_

.. contents:: Table of Content

Why? ++++

Why not use GopherJS directly? ##############################

Because the code written directly by GopherJS without any wrapper is really ugly. For example, if you want to getElementById, you need to write:

.. code-block:: go

import ( "github.com/gopherjs/gopherjs/js" )

foo := js.Global.Get("document").Call("getElementById", "foo")

With godom, you write:

.. code-block:: go

import ( . "github.com/siongui/godom" )

foo := Document.GetElementById("foo")

which looks like JavaScript and more readable.

Why not use existing go-js-dom_? ##################################

Because it's too restricted, and sometimes need to do a lot of type casting. For example, if you have an audio element with id foo and you want to call the Play() method, you need to write the following code:

.. code-block:: go

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

a := dom.GetWindow().Document().GetElementByID("foo").(*dom.HTMLAudioElement) a.Play()

If you use querySelectorAll to select a lot of such elements, you need to do a lot of type casting, which is really disturbing.

With godom, you can write like this:

.. code-block:: go

import ( . "github.com/siongui/godom" )

a := Document.GetElementById("foo") a.Play()

What if the method/property is not implemented in godom? ##########################################################

godom is only a wrapper for GopherJS. If something is not implemented, you can still use the GopherJS methods 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 GopherJS Call method to call play method directly:

.. code-block:: go

import ( . "github.com/siongui/godom" )

a := Document.GetElementById("foo") a.Call("play")

Code Example ++++++++++++

• Frontend Programming in Go_: If you have no experience of GopherJS before, read this.
• Synonyms - Go and JavaScript_: If you have some experience about GopherJS, this serves as references for quick start.

null test #########

Test if event.state is null in popstate event listener:

.. code-block:: go

ih := Document.QuerySelector("#infoHistory")

Window.AddEventListener("popstate", func(e Event) {
	if e.Get("state") == nil {
		ih.SetInnerHTML("Entry Page")
	} else {
		ih.SetInnerHTML(e.Get("state").String())
	}
})

HTML dataset (data-* attribute) ###############################

Assume we have the following element:

.. code-block:: html

You can access the data-content as follows:

.. code-block:: go

p := Document.QuerySelector("#foo") content := p.Dataset().Get("content").String()

XML/XSLT ########

We will transform Tipitaka XML to HTML and append it to the following div.

.. code-block:: html

The frontend code:

.. code-block:: go

// Basic Example - XSLT: Extensible Stylesheet Language Transformations | MDN // https://developer.mozilla.org/en-US/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Basic_Example xsltProcessor := NewXSLTProcessor()

// Load the xsl file using synchronous (third param is set to false) XMLHttpRequest myXMLHTTPRequest := NewXMLHttpRequest() //myXMLHTTPRequest.Open("GET", "https://tipitaka.org/romn/cscd/tipitaka-latn.xsl", false) myXMLHTTPRequest.Open("GET", "https://siongui.github.io/tipitaka-romn/cscd/tipitaka-latn.xsl", false) myXMLHTTPRequest.Send()

xslStylesheet := myXMLHTTPRequest.ResponseXML()

// Finally import the .xsl xsltProcessor.ImportStylesheet(xslStylesheet)

// load the xml file myXMLHTTPRequest2 := NewXMLHttpRequest() //myXMLHTTPRequest.Open("GET", "https://tipitaka.org/romn/cscd/vin01m.mul0.xml", false) myXMLHTTPRequest2.Open("GET", "https://siongui.github.io/tipitaka-romn/cscd/vin01m.mul0.xml", false) myXMLHTTPRequest2.Send()

xmlDoc := myXMLHTTPRequest2.ResponseXML()

fragment := xsltProcessor.TransformToFragment(xmlDoc, Document)

Document.GetElementById("xml").AppendChild(fragment)

HTML onevent Attribute ######################

This example show you how to register onclick event handler via HTML onclick attribute_.

HTML:

.. code-block:: html

   `javascript - Retrieve the position (X,Y) of an HTML element - Stack Overflow <http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element>`_

   `javascript - Test if an element contains a class? - Stack Overflow <http://stackoverflow.com/a/5898748>`_