What is JavaScript DOM? (Document Object Model)

DOM is the abbreviation of Document Object Model, know in this post what it is and its main use in web development. Lets see what is JavaScript DOM!

What is DOM?

One of the most important concepts for when we need to interact with the web page we develop.

To update elements, create and even change HTML text by JavaScript we use the DOM.

So we said that we manipulate the Document Object Model with JavaScript.

But despite the strong connection with the JS language, it is not a part of it, we can think of the DOM as an API that can be accessed by JavaScript.

How to view the DOM?

We can check the DOM of a website by accessing the developer tools.

If we’re going to have to change it, it’s good practice to see how it’s built, so knowing how to visualize the DOM is extremely important.

Follow these steps that I performed in Chrome, first right-click on the screen and see the following menu.

obs: Here I performed on our blog, but any site has the same behavior.

In it click Inspect, it should open a menu somewhere in the browser or a separate window, similar to this one:

So these tab Elements contain the real representation of the DOM, we can use JavaScript to access these elements and manipulate them.

We can then say that the DOM represents HTML through elements and objects.

Also, the DOM is created based on the HTML code of our project.

Some people do not consider this the Document Object Model, as it may have some resources inaccessible by it such as pseudo-classes, but you will see that we can follow this structure to access or change the DOM.

So I think it’s a matter of point of view and in my opinion, this view does represent the Document Object Model, but it isn’t the 100% faithful form of it because of the aforementioned details.

How to access the DOM

Let’s access and modify the DOM!

As we’ve already seen its representation on a web page, now it’s time to practice, let’s access the DOM nodes and change it.

I created a simple HTML and our goal is to change the span tag text, see the code:

<!DOCTYPE html>
<html>
<head>
    <title>Accessing the DOM</title>
</head>
<body>
    <p>Let's access the span element: <span id="element"></span></p>
</body>
</html>

Note that in this code we have a p tag with a span inside, which contains an element id.

And this is our result in the browser.:

Legend – Let’s access the span element:

Now look at this code:

<script type="text/javascript">
     var element = document.getElementById("element");
     element.textContent = "Element accessed successfully!";
</script>

Remembering that I added the scripts tags because I created them in the HTML file, but a good practice is to add an external file for JavaScript!

So with this little snippet of code, I can access the span element by its ‘element’ id and then change the content of its text with textContent.

And the result is this:

Caption – Let’s access the span element: element accessed with success!

Well, we made a simple change but the idea is the same for anyone you make involving the DOM.

Here we changed some text, but you could create an element, for example.

I suggest checking some API documentation to know more possibilities of the Document Object Model, I suggest this one.

Conclusion

We saw that the DOM is an API that we can access with JavaScript to make changes to HTML.

We can view the DOM by browser and easily access it via JS.

As this post is just about the API concept, I think it’s important for you to go deeper into the possibilities it brings to web development.

And that’s it for today, until the next post!

What is JavaScript DOM? (Document Object Model)