what i learned last week: blog on the dom
Tags: javascript, beginners, tutorial
Published: 2021-07-19 17:13:56

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

![Dom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wn5tkpkzurrw338ql1id.jpg)

No, not that Dom. 

Lets start by asking...

![Document Object Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj4rngo8ranz623g3mi3.jpg)

The Document Object Model [(DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) 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](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) 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.  

![DOM tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mucqq6bzfv9retk63ynv.png)

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](https://stackoverflow.com/questions/24974621/what-is-a-node-in-javascript), a node, in this context, is simply an HTML element. 

![nodes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkxla2qisuhq6yw2nrga.png)

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](https://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object) ARE ANY OBJECTS IN THE DOM HIERARCHY** 

![class/object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21ckl7xu8dtdmu8s0xbz.jpg)

Remember, [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1vp6lxw3gehxw8ahc0v.gif)

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`

![view-source](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7brj4e9fazgnhn5vg6p2.png)

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

![HTML document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sq6wpdpdaexf3v4cx11.png)

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!

[Methods](https://www.w3schools.com/js/js_object_methods.asp) are actions that can be performed on objects.

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](https://en.wikipedia.org/wiki/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,

![Document Object Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zot6ypo4l4ieero2s744.jpg)