Starting in Javascript: The DOM

Hello everyone,

My name is Marco Upia and I am an aspiring software engineer. Currently, I am enrolled in the Flatiron BootCamp course to pursue this career path. Although I had been wanting to switch to this field for a while, I finally mustered up the courage to take a deep dive into it and start the learning process.

A bit of backstory before pursuing software engineering, I worked various odd part-time jobs. My most recent job was as a full-time manager at a popular Japanese restaurant where I learned valuable skills such as managing and operating an establishment. However, after reflecting on my career goals, I realized that software engineering is where my passion lies. This realization led me to enroll in this boot camp, and I am excited to see where this journey takes me.

Now on to the main topic of this blog, The DOM! What is the DOM? Talking about this is more so for my understanding making sure I have a grasp of this particular concept of web development. The DOM is short for Document Object Model and it is a web API, I suppose I should also go over very quickly what an API is. I say very quickly because my understanding of an API is very recent and not too technical. An API stands for application programming interface it's a way for two programs or more to communicate with each other and the API is the middle-man.

The DOM is an API and what does that mean, meaning the DOM is are middle-man. Now what does DOM help us communicate with, when it comes to web development nowadays it requires HTML, CSS, and Javascript to have interactive and responsive webpages, it's vital these three can communicate with each other. To do so the DOM would load the HTML into its Document structure to display it like a tree which allows us to manipulate it with Javascript and CSS.

The DOM is a tree? What does it mean to display the contents of HTML into a tree, is that starting with the HTML tag as the top or in this case the root of a tree and every other HTML element branching out like a tree would. So in essence it would be an upsidedown tree structure (refer to the image). Now the HTML tags themselves have a different name and well most of the document model is structured like this called nodes.

Nodes are everything from the whole page to the smallest element. The body, headers, paragraphs, and image elements to name a few are all nodes. Starting from the HTML considered the root Node and branching out into other Nodes having a parent-child relationship.

Manipulation! Now that we have a sense of the DOM, Developers can interact with the DOM using programming languages like JavaScript. This allows them to access, modify, delete, or add elements and content dynamically. And by dynamically we mean the page doesn't have to reload and all the changes happen in front of the user in real-time. For example, changing the text of a paragraph or adding a new element to the page can be done using DOM manipulation.

An understanding of the DOM is important for developers to make webpages interactive otherwise the end user would just see a plain webpage full of text with barely any user input. Think of it as a bridge between the structure of a web page and the programming code.

This guide was simply to offer a beginner's introduction to the DOM. However, it's important to continue learning to fully grasp its concepts. Mastery of the DOM is essential for any developer.

With that, I leave you till the next blog!