What is DOM?! and how to manipulate it using JavaScript?
Tags: javascript, webdev
Published: 2020-07-03 09:28:44

When I first started my path on web development, The one thing which I kept on hearing from every Instructor was the word **DOM** but I was never able to understand it properly, like is it the HTML markup of a web page, or is it the code of the web page which is available on the DevTools of the browser, or is it something else.

Follow this post if you are also wondering the same thing!

# What is DOM?

The [W3C(World Wide Web Consortium)](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html) defines DOM as - 

>_Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated._

In simple words, The DOM is an API that is loaded by the browser to represent the HTML code present on a web page as a tree of **objects** or a **node tree**.

![Structure of DOM](https://dev-to-uploads.s3.amazonaws.com/i/o7qhyd711p9pprwwpndb.png)

Each **node** or **object** in this tree is an HTML element that can be added, updated, or deleted dynamically by using a scripting language such as JavaScript.

---

# What is DOM manipulation?

DOM manipulation means changing the way of how elements in a web page are added, updated, or removed by the browser.

>Always remember that all the HTML elements in the DOM are defined as `objects`.

We can manipulate the DOM by using `DOM methods` and `DOM properties`

>The DOM methods are the actions that can be performed on the `HTML elements`, whereas, DOM properties are values of these `HTML elements` that we can set or change

Example - 

```html
<html>
 <body>
  <p id="demo"></p>
  <script>
    let element = document.getElementById("demo");
    element.innerHTML = "I am being inserted to the web page by JavaScript dynamically";
  </script>
 </body>
</html>
```
Output-

![Output](https://dev-to-uploads.s3.amazonaws.com/i/4zk4pf514kwygbqlptnt.png)

In the above code, `getElementById` is a DOM method and `innerHTML` is DOM property

>* `getElementById` DOM method is used to find the HTML elements by ID.
* `innerHTML` DOM property is used get or change the HTML elements values.

In this example, the `getElementById` finds the HTML element with `id="demo"` and then stores it in a variable `element`. After that, we are using the `innerHTML` DOM property to dynamically modify the content of the HTML element that is stored inside the `element` variable(i.e. the `<p>` tag)

>You may be wondering that in the `let element = document.getElementById("demo");` line what is `document`? well, `document` is an object that is the owner(parent) of all other objects present on the web page.

## Some more DOM methods -
* `.getElementsByClassName(name)` - gets the elements by class name
* `.getElementsByTagName(name)` - gets the elements by tag name
* `.createElement(element)` - creates an element
* `.removeChild(element)` - removes an element
* `.appendChild(element)` - Adds an HTML element

## Some more DOM properties - 
* `.id` - gets the id of an element
* `.className` - gets the class of an element
* `.clientHeight` - gets the height of an element
* `.attributes` - gets the assigned attributes of the element

You can find all the DOM methods and properties [here](https://developer.mozilla.org/en-US/docs/Web/API/Element)

If you want a more detailed and in-depth explanation (including a small project🤩) of this then you can check out the video explanation of the same [here](https://youtu.be/09WlqjKT0_8).

Also, If you find this post helpful then please like and share this
post and also help me get 3k subscribers on my [YOUTUBE CHANNEL](https://www.youtube.com/channel/UCmI1-o9-wJG_Vd0orE-44RQ).

Thank You, and you are #awesome💙😊