Don’t be scared of JavaScript Document Object Model manipulation (DOM)
By: Jhonatan Sarrazola
Tags: Javascript Answers, Javascript Api, Javascript Development, Javascript Tips, JavaScript

Photo by Michelle Tresemer on Unsplash

“What is DOM?” this was a question I asked myself in my first touch with this technology, and I had no idea or experience with this topic. I really freaked out in my first project using DOM, but what does the Document Object Model is useful for together with JavaScript, and how can we learn it quickly and easily? I am going to try to walk you through this topic in the most concise way, but even so, the most understandable way.

What is the Document Object Model (DOM)?

“The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.” ~ Jonathan Robie, Texcel Research.

DOM together with JavaScript allows programmers to access and play with HTML and XML elements, making them change within a specific time, with clicks, their position, or make them disappear. As this article is about JavaScript DOM manipulation, we are going to focus on HTML elements and the Basic JavaScript methods we can use with DOM.

Photo by Ilya Pavlov on Unsplash

So what is DOM useful for together with JavaScript?

As I said before, DOM allows us to access the elements of an HTML document, but how does DOM can access them?

DOM can access different elements by their attributes. Here is where we find another functionality for IDs, Classes, and Types that HTML adds to its components.

For instance, if we want to access an HTML div element that has an ID attribute of “container” (<div id=”container”></div>), we can access it by typing in a JavaScript element:

const div = document.getElementById(‘container’);

And here is where JavaScript enters the game. We can make another element appear inside this element by creating another element:

const h1 = document.createElement(‘h1’);

And then adding:

div.appendChild(h1);

That is going to make the h1 element appear inside the div element.

Yes! JAvaScript DOM manipulation is as simple as that. By using the syntax we used above, JavaScript can access that element, store it in a variable, and start playing and manipulate that element with a bunch of possibilities using the different JavaScript methods available: you can even change the styles sheet! As I said, there is a bunch of other possibilities, and this is what professional front-end developers use every single day with the different existing frameworks.

(You can find Basic JavaScript methods in https://devdocs.io/)

Photo by Clem Onojeghuo on Unsplash

Now, how can we learn about JavaScript DOM manipulation?

There is a lot of documentation about this topic on the web, even on YouTube, but I am going to show you the pages I used to learn the little number of things I learned by myself. The first and most important skill you need to have is self-learning: this is the most important skill developers need because you are not always going to find someone who is going to explain to you every little thing with patience and the easy way. Most of the time you will have to look for a lot of information and absorb what can be useful for you, and then, try to put together all of that and understand what you have got.

Knowing this, let’s start with the best source of information in the entire world -> Google! Google is always going to be your best friend. Whatever question you have, try to find it on Google. Then we have Stack Overflow: here you can make questions, but the most important is that a lot of people could have had the same problem you are facing, so there could be already answers to your questions. Those two sources are the most important ones as a developer, and now, let’s continue with the most important ones for this article:

The first ones (because there are two) must be https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction and https://www.w3schools.com/js/js_htmldom.asp. Those two pages helped me and continue helping me with almost all of the basic problems I had to face when I knew anything about this topic. It is a good practice to try to read the documentation before trying to do something with it, but it is more important to follow the steps by yourself because the best way to learn is by building stuff.

The second source is https://devdocs.io/. This page does not only have information about DOM but also about DOM Events, JavaScript methods, HTML, CSS, and HTTP, so it is a complete guide that will walk you through the front-end learning.

To summarize this article, I have to tell you that the best practice in web development is trying new things. JavaScript DOM manipulation can sometimes be a complex topic, and you will have to handle a different amount of new challenging subjects, but the best thing one can do is to stay straight against those scary things and face them. After all, challenging task come with a lot of knowledge.

Work hard to achieve that goal you established when you started this career!