In a userscript, how can I access child nodes in gatsby-generated elements?

36 views Asked by At

I'm teaching myself userscripts using Violentmonkey in Firefox, and when trying to access elements on Violentmonkey's website itself, I'm observing strange behavior when iterating through child elements in (what I'm suspecting is) gatsby-generated content.

Below is the entirety of the userscript I'm testing. When I navigate to https://violentmonkey.github.io/ and open up the console in the developer tools, I can see from the first print that the innerHTML element in the first children array element has text, but the second print shows nothing. Further, if I do a console.log of any of the children elements, I see they are empty of any content. This behavior is identical if I access the children using childNodes, firstChild, or firstElementChild.

I suspected that perhaps when I accessed the child nodes the page had not yet completed loading, so I followed the suggestion in this answer, but it made no difference.

I'm not sure where to go from here, as I'm a bit rusty on Javascript and have no experience with gatsby.

// ==UserScript==
// @name        gatsby_get_children
// @namespace   Violentmonkey Scripts
// @match       https://violentmonkey.github.io/*
// @grant       none
// @version     1.0
// @author      -
// @description 1/8/2024, 10:46:38 AM
// ==/UserScript==

function get_items() {

  let gatsbything = document.getElementById('___gatsby');

  console.log(gatsbything);
  console.log(gatsbything.children[0].innerHTML);
}

window.addEventListener('load', get_items, false);
0

There are 0 answers