Maybe you'll find it useful...
Real quick JS DOM walkthough.
What's the DOM?
It's the Document Object Model.
It lets us grab everything that is on the page, or create and put it on the page.
Now you see me
To show exaclty what's going we're going the long way about this.
You can toggle the div.
The DOM starts with the root html element.
Then we have the DOM tree - every HTML tag is an object.
Nested tags are "children" of the enclosing one.
Keep going - the text inside the tag is an object as well.
These nested tags are children of the enclosing ones.
There are also descendants - these are all elements that are nested in the given one. So, it's children, their children and then their children...
If you want to interact with the HTML from your JS, it must include a document object.
Did you notice when the page loaded there was a blue background that faded out? Refresh you'll see.
It was this line of JS - setTimeout(() => document.body.style.background = "", 1000);
Child Nodes give you the element and the text.
Check this out...
Here's the HTML for the table above.
If we grab that highlighted cell with the 2.
let tableHighlight = document.getElementById('element');
What we get is: NodeList(3) [text, span, text]
Now let's delete the spaces.
Same JS to get the childNodes
But this time, we only get: NodeList [span]
There are no spaces to account for.
To get only the elements, use children.
Same cell from our table:
What we get is:HTMLCollection [span]
Well we can do this: element.children.classList.add('goGreen');
The first child of the element tag will now have the green background.
It's just the 2 that has the green background.
Notice the children - when you grab it, it's stored in a Node list.
So you have to grab it accordingly.
Another one, here's the table again.
var mainDiv = document.getElementById('childNodesExample'); mainDiv.classList.add('yellowish');
This is getting the first child of main container childNodesExample and giving it a yellowish background.
Again #text nodes are inserted in the DOM where whitespace occurs between tags.
As with childNodes.
So bump that... Unless you know you have no whitespace.
I go with:
This time we'll get the next Element.
The table cell.
Notice cell 6 is green.
It's the next element sibling of cell 5 (which has the id element2 JS variable siblingTest.
We can console it and see it's: td class="goGreen">6
Want the element before it?
That is how cell 4 is blue.
It is the previous Element sibling of the cell with 5, the ID of element2..