What is DOM?
One of the most important concepts for when we need to interact with the web page we develop.
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:
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:
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.
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!