Is there a way to watch for element updates within an element?

[atye]

I have a page with an element that contains dynamic data which is updated with javascript. I'd like to select the top-level, parent element and then be able to add logic to respond to changes within that element. I didn't see something built-in to do something like this, except for handling dialogs.

Is this something I would implement myself? Something to get the parent element on a ticker and go from there?

[ysmood]

Yes, you can use the proto lib to do it. The js code is copied from MDN:

// Package main ...
package main

import (
	"fmt"

	"github.com/go-rod/rod"
	"github.com/go-rod/rod/lib/utils"
	"github.com/ysmood/gson"
)

func main() {
	page := rod.New().MustConnect().MustPage("http://example.com").MustWaitStable()

	page.MustExpose("myChanged", func(j gson.JSON) (interface{}, error) {
		fmt.Println("dom changed", j.JSON("", "  "))

		return nil, nil
	})

	page.MustElement("h1").MustEval(`() => {
		// Options for the observer (which mutations to observe)
		const config = { attributes: true, childList: true, subtree: true };
		
		// Callback function to execute when mutations are observed
		const callback = (mutationList, observer) => {
		  for (const mutation of mutationList) {
			myChanged(mutation.attributeName)
		  }
		};
		
		// Create an observer instance linked to the callback function
		const observer = new MutationObserver(callback);
		
		// Start observing the target node for configured mutations
		observer.observe(this, config);

		// Set the attribute to trigger the observer
		this.setAttribute("xxxx", "123")
	}`)

	utils.Sleep(1)
}