Before we see why the DOM manipulation is not a javascript. Let's first understand DOM and DOM manipulation.
What is DOM?
DOM stands for 'Document Object Model'. It is a structured representation of an HTML document that allows javascript to access HTML elements and styles to manipulate them and it is a structured representation of an HTML document.
The DOM allow us to use javascript to access HTML elements and styles to manipulate them, for example, we will be able to change the text in HTML attributes and also to change CSS styles from our javascript so we can say that the DOM is a connection point between HTML document and JavaScript.
The DOM is automatically created by the browser as soon as the HTML page loads and it is stored in a tree structure like this one.
In this tree, each HTML element is one object, so let’s now take a look at this DOM structure in a little bit more detail and to illustrate this here is a very simple document and its DOM tree.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Hello, this is <a href="#">HTML</a> </p>
</body>
</html>
So as I already mentioned this is a tree structure that looks a bit like a family tree and we use it to turn them, child element, parent element, sibling element and so more when we talk about DOM manipulation and DOM structure.
Anyway as you can see for each element in the HTML here is one element node in the DOM tree and we can access and manipulate each element using JavaScript.
So the DOM always starts with a document object right at the very top and this document is a special object that we have access to in JavaScript and this object serves as an entry point into the DOM.
Remember how we use the document.queryselector() method to select an element so that it means the queryselector method is available on the document of the object and that’s why we say that document is the entry point to the DOM. Because we need it to starts selecting elements.
The first child element of the document is usually the HTML element because that’s usually the root element in all HTML documents. Now moving ahead HTML elements have usually to child elements head and body and so, of course, you can also find them here in the DOM tree and as you can see they are adjacent elements so they are siblings in our DOM as well. As we keep going deeper into the nested HTML structure we keep adding more and more children to the DOM tree. So inside the head and body, you have more child elements.
But the DOM tree has more than just HTML element nodes, it also has the nodes for all the text itself, comments and others stuff. Because basically, the rule is that whatever is in the HTML document also has to be in the DOM. And so as you can see the DOM is a complete representation of the HTML document. So that we can manipulate it in complex ways.
And with this, you should have a good overview of how the DOM works and what it looks like.
What is DOM manipulation?
Manipulating DOM is accessing the objects in the DOM tree and changing the values that belong to them. This also includes the styling of those elements. And how we access these objects that we have seen above.
Why DOM manipulation !== JavaScript?
Many beginners believe that the DOM and all the methods and properties that we can use to manipulate a DOM such as document.queryselector() and lots of other stuff are part of javascript, however, this is not the case. Remember the javascript is actually just a dialect of the ECMA script specification, and all this DOM related stuff is not there in JavaScript.
But now you might ask DOM is not a part of JavaScript then how does this all work? To understand this we need to have no web APIs.
What are web APIs?
The DOM and the DOM methods are part of something called the web APIs. The web APIs are like libraries that the browser implements and we can access them from our JavaScript code.
For now, what you need to know is web APIs are the libraries that are also written in javascript and that are automatically available to us to use. So all this happens behind the scenes we don’t have to import all to do anything to use them. And there is an officially DOM specification that browsers implement which is the reason why DOM manipulation works the same on all browsers.
Now, besides the DOM there are tons of other APIs like timers and fetch and many more we will talk about them in upcoming posts.
DOM
- Stands for Document Object Model.
- Allows us to access HTML elements using javascript.
- Browser creates it for us automatically when the page loads.
DOM Manipulation
Accessing objects in the DOM tree and changing values that belong to it.
Why DOM Manipulation !== Javascript?
The DOM and the DOM methods are part of something called the web APIs.
I hope 🤞 now you know why DOM Manipulation !== Javascript.
Thank you!