{"id":25195141,"url":"https://github.com/siongui/godom","last_synced_at":"2025-06-28T08:38:38.980Z","repository":{"id":41086357,"uuid":"81510530","full_name":"siongui/godom","owner":"siongui","description":"Make DOM manipulation in Go as similar to JavaScript as possible. (via GopherJS or WebAssembly)","archived":false,"fork":false,"pushed_at":"2022-10-12T05:15:31.000Z","size":66,"stargazers_count":179,"open_issues_count":1,"forks_count":21,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-10T03:55:47.151Z","etag":null,"topics":["dom-manipulation","frontend","go","golang","gopherjs"],"latest_commit_sha":null,"homepage":"","language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/siongui.png","metadata":{"files":{"readme":"README.rst","changelog":"history.go","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-10T00:54:04.000Z","updated_at":"2024-11-16T16:13:36.000Z","dependencies_parsed_at":"2022-08-26T13:23:40.121Z","dependency_job_id":null,"html_url":"https://github.com/siongui/godom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/siongui/godom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siongui%2Fgodom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siongui%2Fgodom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siongui%2Fgodom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siongui%2Fgodom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siongui","download_url":"https://codeload.github.com/siongui/godom/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siongui%2Fgodom/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262402687,"owners_count":23305659,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-manipulation","frontend","go","golang","gopherjs"],"created_at":"2025-02-10T00:50:16.047Z","updated_at":"2025-06-28T08:38:38.942Z","avatar_url":"https://github.com/siongui.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"==========================\n`DOM Manipulation`_ in Go_\n==========================\n\n.. image:: https://img.shields.io/badge/Language-Go-blue.svg\n   :target: https://golang.org/\n\n.. image:: https://godoc.org/github.com/siongui/godom?status.svg\n   :target: https://godoc.org/github.com/siongui/godom\n\n.. image:: https://api.travis-ci.org/siongui/godom.svg?branch=master\n   :target: https://travis-ci.org/siongui/godom\n\n.. image:: https://goreportcard.com/badge/github.com/siongui/godom\n   :target: https://goreportcard.com/report/github.com/siongui/godom\n\n.. image:: https://img.shields.io/badge/license-Unlicense-blue.svg\n   :target: https://raw.githubusercontent.com/siongui/godom/master/UNLICENSE\n\n.. image:: https://img.shields.io/badge/Status-Beta-brightgreen.svg\n\n.. image:: https://img.shields.io/twitter/url/https/github.com/siongui/godom.svg?style=social\n   :target: https://twitter.com/intent/tweet?text=Wow:\u0026url=%5Bobject%20Object%5D\n\nMake `DOM Manipulation`_ in Go_ as similar to JavaScript_ as possible via\nGopherJS_. For DOM Manipulation via WebAssembly_, visit wasm_ directory.\n\n  - `Ubuntu 20.04`_\n  - Go_\n\n.. contents:: **Table of Content**\n\n\nWhy?\n++++\n\n\nWhy not use GopherJS directly?\n##############################\n\nBecause the code written directly by GopherJS without any wrapper is really\nugly. For example, if you want to *getElementById*, you need to write:\n\n.. code-block:: go\n\n  import (\n  \t\"github.com/gopherjs/gopherjs/js\"\n  )\n\n  foo := js.Global.Get(\"document\").Call(\"getElementById\", \"foo\")\n\nWith *godom*, you write:\n\n.. code-block:: go\n\n  import (\n  \t. \"github.com/siongui/godom\"\n  )\n\n  foo := Document.GetElementById(\"foo\")\n\nwhich looks like *JavaScript* and more readable.\n\nWhy not use existing `go-js-dom`_?\n##################################\n\nBecause it's too restricted, and sometimes need to do a lot of type casting.\nFor example, if you have an *audio* element with id *foo* and you want to call\nthe *Play()* method, you need to write the following code:\n\n.. code-block:: go\n\n  import (\n  \t\"honnef.co/go/js/dom\"\n  )\n\n  a := dom.GetWindow().Document().GetElementByID(\"foo\").(*dom.HTMLAudioElement)\n  a.Play()\n\nIf you use *querySelectorAll* to select a lot of such elements, you need to do a\nlot of type casting, which is really disturbing.\n\nWith *godom*, you can write like this:\n\n.. code-block:: go\n\n  import (\n  \t. \"github.com/siongui/godom\"\n  )\n\n  a := Document.GetElementById(\"foo\")\n  a.Play()\n\n\nWhat if the method/property is not implemented in *godom*?\n##########################################################\n\n*godom* is only a wrapper for GopherJS. If something is not implemented, you can\nstill use the GopherJS methods to call or get the method/property you need.\nFor example, if the *Play()* method of the audio element is not implemented, you\ncan use GopherJS *Call* method to call *play* method directly:\n\n.. code-block:: go\n\n  import (\n  \t. \"github.com/siongui/godom\"\n  )\n\n  a := Document.GetElementById(\"foo\")\n  a.Call(\"play\")\n\n\nCode Example\n++++++++++++\n\n- `Frontend Programming in Go`_: If you have no experience of GopherJS before,\n  read this.\n- `Synonyms - Go and JavaScript`_: If you have some experience about GopherJS,\n  this serves as references for quick start.\n\n\nnull test\n#########\n\nTest if event.state is null in ``popstate`` event listener:\n\n.. code-block:: go\n\n  \tih := Document.QuerySelector(\"#infoHistory\")\n\n  \tWindow.AddEventListener(\"popstate\", func(e Event) {\n  \t\tif e.Get(\"state\") == nil {\n  \t\t\tih.SetInnerHTML(\"Entry Page\")\n  \t\t} else {\n  \t\t\tih.SetInnerHTML(e.Get(\"state\").String())\n  \t\t}\n  \t})\n\n\nHTML dataset (data-* attribute)\n###############################\n\nAssume we have the following element:\n\n.. code-block:: html\n\n  \u003cp id=\"foo\" data-content=\"content of person 1\"\u003e\u003c/p\u003e\n\nYou can access the ``data-content`` as follows:\n\n.. code-block:: go\n\n  p := Document.QuerySelector(\"#foo\")\n  content := p.Dataset().Get(\"content\").String()\n\n\nXML/XSLT\n########\n\nWe will transform Tipitaka XML to HTML and append it to the following *div*.\n\n.. code-block:: html\n\n  \u003cdiv id=\"xml\"\u003e\u003c/div\u003e\n\nThe frontend code:\n\n.. code-block:: go\n\n  // Basic Example - XSLT: Extensible Stylesheet Language Transformations | MDN\n  // https://developer.mozilla.org/en-US/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Basic_Example\n  xsltProcessor := NewXSLTProcessor()\n\n  // Load the xsl file using synchronous (third param is set to false) XMLHttpRequest\n  myXMLHTTPRequest := NewXMLHttpRequest()\n  //myXMLHTTPRequest.Open(\"GET\", \"https://tipitaka.org/romn/cscd/tipitaka-latn.xsl\", false)\n  myXMLHTTPRequest.Open(\"GET\", \"https://siongui.github.io/tipitaka-romn/cscd/tipitaka-latn.xsl\", false)\n  myXMLHTTPRequest.Send()\n\n  xslStylesheet := myXMLHTTPRequest.ResponseXML()\n\n  // Finally import the .xsl\n  xsltProcessor.ImportStylesheet(xslStylesheet)\n\n  // load the xml file\n  myXMLHTTPRequest2 := NewXMLHttpRequest()\n  //myXMLHTTPRequest.Open(\"GET\", \"https://tipitaka.org/romn/cscd/vin01m.mul0.xml\", false)\n  myXMLHTTPRequest2.Open(\"GET\", \"https://siongui.github.io/tipitaka-romn/cscd/vin01m.mul0.xml\", false)\n  myXMLHTTPRequest2.Send()\n\n  xmlDoc := myXMLHTTPRequest2.ResponseXML()\n\n  fragment := xsltProcessor.TransformToFragment(xmlDoc, Document)\n\n  Document.GetElementById(\"xml\").AppendChild(fragment)\n\n\nHTML onevent Attribute\n######################\n\nThis example show you how to register onclick event handler via\n`HTML onclick attribute`_.\n\n**HTML**:\n\n.. code-block:: html\n\n  \u003cdiv onclick=\"myhandler('Hi')\"\u003eClick me to say Hi\u003cdiv\u003e\n\n**Go/GopherJS**:\n\n.. code-block:: go\n\n  Document.Set(\"myhandler\", func(s string) {\n  \tAlert(s)\n  })\n\n\n`Element.getAttribute()`_\n#########################\n\nBefore using `Element.getAttribute()`_, call `Element.hasAttribute()`_ first to\ncheck if the attribute exists or not. Otherwise something unexpected will\nhappen.\n\n\nUNLICENSE\n+++++++++\n\nReleased in public domain. See UNLICENSE_.\n\n\nReferences\n++++++++++\n\n.. [1] `GopherJS - A compiler from Go to JavaScript \u003chttp://www.gopherjs.org/\u003e`_\n       (`GitHub \u003chttps://github.com/gopherjs/gopherjs\u003e`__,\n       `GopherJS Playground \u003chttp://www.gopherjs.org/playground/\u003e`_,\n       |godoc|)\n\n.. [2] `dom - GopherJS bindings for the JavaScript DOM APIs \u003chttps://godoc.org/honnef.co/go/js/dom\u003e`_\n       (`GitHub \u003chttps://github.com/dominikh/go-js-dom\u003e`__)\n\n.. [3] | `panic: interface conversion: ast.Expr is *ast.SelectorExpr, not *ast.Ident - Google search \u003chttps://www.google.com/search?q=panic:+interface+conversion:+ast.Expr+is+*ast.SelectorExpr,+not+*ast.Ident\u003e`_\n       | `add a method to an external package - Google search \u003chttps://www.google.com/search?q=add+a+method+to+an+external+package\u003e`_\n\n.. [4] `[Golang] Add Method to Existing Type in External Package \u003chttps://siongui.github.io/2017/02/11/go-add-method-function-to-type-in-external-package/\u003e`_\n\n.. [5] `JavaScript Remove All Children of a DOM Element \u003chttps://siongui.github.io/2012/09/26/javascript-remove-all-children-of-dom-element/\u003e`_\n\n.. [6] `How to do insert After() in JavaScript without using a library? - Stack Overflow \u003chttp://stackoverflow.com/a/32135318\u003e`_\n\n.. [7] `javascript element position \u003chttps://www.google.com/search?q=javascript+element+position\u003e`_\n\n       `javascript - Retrieve the position (X,Y) of an HTML element - Stack Overflow \u003chttp://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element\u003e`_\n\n.. [8] `javascript check class exists - Google search \u003chttps://www.google.com/search?q=javascript+check+class+exists\u003e`_\n\n       `javascript - Test if an element contains a class? - Stack Overflow \u003chttp://stackoverflow.com/a/5898748\u003e`_\n\n.. [9] | `Who is using GopherJS? : golang \u003chttps://www.reddit.com/r/golang/comments/5urqny/who_is_using_gopherjs/\u003e`_\n       | `GopherJS 1.8-1 is released : golang \u003chttps://www.reddit.com/r/golang/comments/5upkkc/gopherjs_181_is_released/\u003e`_\n\n.. [10] `Go Report Card | Go project code quality report cards \u003chttps://goreportcard.com/\u003e`_\n.. [11] `Shields.io: Quality metadata badges for open source projects  \u003chttps://shields.io/\u003e`_\n\n.. [12] `HTML DOM Style object \u003chttps://www.w3schools.com/jsref/dom_obj_style.asp\u003e`_\n\n.. [13] | `javascript is focused - Google search \u003chttps://www.google.com/search?q=javascript+is+focused\u003e`_\n        | `javascript is focused - DuckDuckGo search \u003chttps://duckduckgo.com/?q=javascript+is+focused\u003e`_\n        | `javascript is focused - Ecosia search \u003chttps://www.ecosia.org/search?q=javascript+is+focused\u003e`_\n        | `javascript is focused - Qwant search \u003chttps://www.qwant.com/?q=javascript+is+focused\u003e`_\n        | `javascript is focused - Bing search \u003chttps://www.bing.com/search?q=javascript+is+focused\u003e`_\n        | `javascript is focused - Yahoo search \u003chttps://search.yahoo.com/search?p=javascript+is+focused\u003e`_\n        | `javascript is focused - Baidu search \u003chttps://www.baidu.com/s?wd=javascript+is+focused\u003e`_\n        | `javascript is focused - Yandex search \u003chttps://www.yandex.com/search/?text=javascript+is+focused\u003e`_\n\n.. _DOM Manipulation: https://www.google.com/search?q=DOM+Manipulation\n.. _Go: https://golang.org/\n.. _JavaScript: https://www.google.com/search?q=JavaScript\n.. _GopherJS: https://github.com/gopherjs/gopherjs\n.. _WebAssembly: https://duckduckgo.com/?q=webassembly\n.. _wasm: wasm\n.. _Ubuntu 20.04: https://releases.ubuntu.com/20.04/\n.. _Go 1.8: https://golang.org/dl/\n.. _go-js-dom: https://github.com/dominikh/go-js-dom\n.. _UNLICENSE: https://unlicense.org/\n.. _Frontend Programming in Go: https://siongui.github.io/2017/12/04/frontend-programming-in-go/\n.. _Synonyms - Go and JavaScript: https://siongui.github.io/2017/12/07/synonyms-go-and-javascript/\n.. _HTML onclick attribute: https://www.google.com/search?q=HTML+onclick+attribute\n.. _Element.getAttribute(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute\n.. _Element.hasAttribute(): https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute\n\n.. |godoc| image:: https://godoc.org/github.com/gopherjs/gopherjs/js?status.png\n   :target: https://godoc.org/github.com/gopherjs/gopherjs/js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiongui%2Fgodom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiongui%2Fgodom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiongui%2Fgodom/lists"}