DOM Helpers

DOM helpers let you read and update the page directly from Go.

Important: You must dot-import pkg/wasm (import . "github.com/felipegenef/gothicframework/v2/pkg/wasm") for use these helpers, otherwise you will get a tinygo compile error.

To update content by element ID, use SetText for plain text and SetHTML when you need to inject markup.

Here is an example wired to an Observable:

import . "github.com/felipegenef/gothicframework/v2/pkg/wasm"

 ClientSideState: func() {
	 count := CreateObservable(0)

	 Observe(func() {
		 SetText("count-label", strconv.Itoa(count.Get()))
		 SetHTML("badge", "<strong>new</strong>")
	},  count)
} 

For CSS class manipulation, you have AddClass, RemoveClass, and ToggleClass. Each one targets an element by ID and flips a single class.

Here is a menu toggle that combines both styles:

open := CreateObservable(false)

 Observe(func() {
	 if open.Get() {
		 RemoveClass("menu", "hidden")
		 AddClass("overlay", "opacity-50")
	} else {
		 AddClass("menu", "hidden")
		 RemoveClass("overlay", "opacity-50")
	}
},  open)

 // Or flip in a single call:
 CreateWasmFunc("toggleMenu", func() {
	 ToggleClass("menu", "hidden")
}) 

To look up elements, use GetElementById or QuerySelector. Both return a single JSValue handle you can read from or write to.

Note: QuerySelectorAll returns a JSValue array. Iterate it with .Length() and .Index(i), not with Go range.

For form inputs and the clipboard, use SetValue to write into an input by ID, and WriteClipboard to copy text to the user's clipboard:

CreateWasmFunc("copyAllInputs", func() {
	 // QuerySelectorAll returns []JSValue, iterate by index, NOT with range
	 items := QuerySelectorAll("input.copyable")
	 all := \"\"
	 for i := 0; i < items.Length(); i++ {
		 el := items.Index(i)
		 all += el.Get("value").String() + \"\\n\"
	}
	 WriteClipboard(all)
	 SetValue("status", "copied!")
})

 // Single element lookup
 title := GetElementById("page-title")
 if !title.IsNull() {
	 title.Set("textContent", "Updated!")
} 

Tip: reach for the ID-based helpers first. Drop down to GetElementById or QuerySelector only when you need the full JSValue handle.

Ready to wire these helpers up to real user interactions? Learn how to register event handlers from Go next!