I'm currently trying to access the first child of an element using JavaScript. Here's the code I'm attempting to write (for now I'm just trying to console.log the element to confirm I've grabbed it, from there I know how to do the things I want to do with it):
const nodes = document.querySelector('div#world-map-container').childNodes;
const nodesArray = Array.from(nodes);
console.log(nodes); // prints a NodeList with 4 nodes
console.log(nodesArray) // prints an array with 0 elements? - this is confusing.
console.log(nodesArray[0]) // undefined, which makes sense considering the above line.
I've checked out this post which seems to have a similar issue, but using Array.from() doesn't seem to be doing the trick. I understand why iterating directly over a NodeList is bad practice, but even if I try that it appears as if the NodeList has elements and then no matter what I do, they suddenly disappear. I at first thought perhaps some process was removing them from the document between those two lines, but running something like that in the console live in the page gives the desired result. Thank you!