The Browser and The DOM of Nodes

5 min readSep 15, 2020

Have you ever been browsing the internet and thought to yourself, “Wow, what is the science behind everything I am seeing right now!? “. “How am I able to like and unlike this photo on my Facebook feed!?”. If you answered yes then this is a perfect blog to introduce an understanding of what is happening behind the scenes of your computer screen! If you answered no, well, stick around anyway and learn a few things about web development!

SO, lets start by introducing what DOM stands for and what I mean by “DOM of Nodes”. DOM stands for Document Object Model; It is a cross-platform interface that connects web pages to programming languages. It is represented as a tree that contains all of the HTML on a web page. The branches of this tree each end in a node and each node contains an object. By using DOM methods, we can programmatically manipulate a web page how we the programmer may wish.

Pictured above is an example of a DOM diagram. You can see how the structure of it resembles an upside-down tree. Each “branch” represents the different nodes or elements of the DOM, and each node contains an object (the 4 pets). Below is the HTML code and how it would appear on the browser to the user.

There are three pillars to web development, they include HTML, CSS, and JavaScript. JavaScript can then be broken down into its own three pillars: recognizing events, manipulating the DOM, and communicating with the server. Understanding the DOM and how to manipulate it is the foundation of front-end development.

querySelector()

These are document methods, (if you want to know what I mean by document, check here). They allow programmers to select specific elements of a web page so that they can add some type of functionality to them.

Want to read this story later? Save it in Journal.

In the example above, I took the original My Pets example and decided to alter the styling a bit with a red background to show you how the querySelector() works. I will explain how this was done in a few steps.

Step 1-

The entire page of HTML can be referenced using the keyword document. You can use the dot notation to call the built-in method that belongs to the document. In this case, I wanted to change the background color on a single element in the table, so I used (“td”) as the parameter in the querySelector() method. It is important to remember that querySelector() will return the FIRST element in the list of nodes that have the selector that you are looking for.

         let myPetCollection=document.querySelector(“td”)

Step 2-

Once we retrieve the element, we can save the result of that to a variable so that we can perform the actions that we want. In the code below, I took the variable from step one and used the dot notation again to call different properties that are available to this element on the page. I used .style and .backgroundColor properties to alter the color of the background to the red that you can see.

          myPetCollection.style.backgroundColor=”#F00000"

createElement()

Another cool function that the DOM has is the ability to create new elements on your page without having to write inside the HTML page! To add to our My Pet example, I added a new pet to my list using only the document object!

Step 1-

Start by declaring the document object and using dot notation to call the createElement() method. For the parameters I wrote (“td”) because for this example I am trying to add “more data” to the table.

              let newPet=document.createElement(“td”)

Step 2-

Next, I am able to customize the .innerText property of the newPet variable which is really the new (“td”) element that I created. This is achieved below.

                     newPet.innerText=”snake”

Step 3-

After you create the element, customize the element, the final step is to append it to the document. This is done by using querySelector() to grab the parent element that you want this element to be appended to.

            let tableBlock=document.querySelector(“table”)                     tableBlock.append(newPet)

There are so many different methods and properties that can be used on the document object. You can find a list of these here. Understanding the DOM will result in better ways to access and modify different elements on an HTML page. There will be endless possibilities to your program knowing how to use the DOM. This is an essential tool for front web development and I hope this blog was able to give you a basic understanding!

RESOURCES: