DOM DOM DOM

(You have to read it right.)

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.

Show me...

Now you see me

To show exaclty what's going we're going the long way about this.

  1. First we have to get the button that is going to trigger the collapsing and expanding of the hidden div.
  2. let firstButton = document.getElementById('firstButton');
  3. Then we have to add a click event listener. (Here's the full list).
  4. firstButton.addEventListener('click', function(){
  5. Then our function, we'll make use of the Javascript toggle method.
  6. firstExplanation.classList.toggle('hide'); })
  7. This is just checking to see if element contains the class hide. If it does, it will remove it. If not, it adds it.
  8. * We could do this ourselves using boolean values.

You can toggle the div.

But lets go back to the beginning.

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...

Cool, but I need to get to it before I can do anything.

Fret not...

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);

childNodes

Child Nodes give you the element and the text.

Check this out...

1 2 3
4 5 6
7 8 9

Here's the HTML for the table above.

Screenshot of table used

If we grab that highlighted cell with the 2.

let tableHighlight = document.getElementById('element'); tableHighlight.classList.add('highlightTable'); console.log(element.childNodes);

What we get is: NodeList(3) [text, span, text]

Now let's delete the spaces.

Screenshot of table used

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.

Children

Same cell from our table:

console.log(element.children);

What we get is:HTMLCollection [span]

Cool... So what?

Well we can do this: element.children[0].classList.add('goGreen');

The first child of the element tag will now have the green background.

Image of table used earlier

It's just the 2 that has the green background.

Notice the children[0] - 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.

Screenshot of table used

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.

Screenshot of table used

nextSibling

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:

nextElementSibling

Screenshot of table used

This time we'll get the next Element.

The table cell.

siblingTest.nextElementSibling.classList.add("goGreen");

Notice cell 6 is green.

Image of table used earlier

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?

siblingTest.previousElementSibling.classList.add("blueish");

That is how cell 4 is blue.

It is the previous Element sibling of the cell with 5, the ID of element2..

parentNode

This lets us grab the parent of the element.

Screenshot of table used

Lets add a 2px solid red border around the parent of element td that has the value text 5, id of element2.

let siblingTest = document.getElementById('element2'); siblingTest.parentNode.classList.add("redBorder");

Still using element2 as our base.

siblingTest.parentNode.nextElementSibling.classList.add("purpleBorder");

Will give us the next rows.

The parent of td is the tr.

It's nextElementSibling is the next tr.

So we've gone up the DOM, Sideways and down.