what i learned last week: blog on the dom

In this entry I'm going to go over the DOM.

No, not that Dom.

Lets start by asking...

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

Another words...

the DOM is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

Below is a visual representation of the DOM. The reason I bring it up is because it has helped me view the DOM at a higher level.

You can think of the DOM as not only a tree but an UPSIDE DOWN tree. It's important that you remember the upside down part. It's also important to note that everything inside of an HTML document can be represented by a node.

You might be thinking "I'm still not entirely sure what the DOM is and what the heck is a node?"

Let's continue and I think I can make everything more clear.

First, per this stackoverflow inquiry, a node, in this context, is simply an HTML element.

Again, the Document Object Model represents the HTML elements of a document as nodes. Even the document as a whole is considered a node! Ok, so we know that nodes represent HTML elements but what are they?

NODES ARE ANY OBJECTS IN THE DOM HIERARCHY

Remember, classes are templates for creating objects.

Now that we know what the DOM is let's dig into the "how?"

How is the Document Object Model created in the real world?

Todays modern browser can create object oriented representations of HTML documents. This means we have the ability to make create dynamic and powerful websites.

I feel like the above statement doesn't really describe the power of the DOM well enough so I'm going to show you.

Let's visit a totally random website

There is a lot going on the above homepage.

Animated multi colored smoke playing on a loop.

Rave reviews that are on a loop in bold text so the user knows they are on the website of a cinematic masterpiece.

Vin Diesel judging you because you haven't called your mom

interactive buttons

Let's look behind the shiny and cool interface. You can do so by using the view-source URL prefix OR right clicking anywhere in your browser and selecting view page source

If the above steps were followed correctly you should see an HTML document that looks similar to this

The browser reads the above HTML, CSS and JavaScript and creates the DOM!

Finally our browser uses the newly formed DOM object and renders a page. As you can see no actual HTML is being rendered to the page. We are using the power of object-oriented programming and working with a DOM Object that displays content to the user.

We now know that the DOM is an object. What do you know about objects? I think one major thing to not forget about objects is that they have methods!

Example:
document.URL //=> https://www.thefastsaga.com/


Above, we've used dot notation to call the built in URL method on our document object. As you can see the websites URL was returned. Displaying the URL of a website is just one of an infinite amount of things you can do with the power of the Document Object Model.

One last thing, I promise!

the methods and properties provided by the DOM object can be referenced as the application programming interface or more commonly API!

I'll be honest I just had a full circle moment because a year ago if you asked me what an API was much less ask to explain how an API works I would have given you Dom's "why haven't you called your mom" look.

Too review,