The DOM is a tree structure that represents the HTML of the websites. And every element of this HTML is called a node

More specifically, to understand node it's important to understand DOM which stands for Document Object Model. DOM is a tree-like structure where all the elements, attributes, text, etc.. are in a hierarchical structure. And each individual element present in this DOM is known as Node.

Refer to the below diagram 👀

The topmost node is the HTML which has two child head & body. Further body is the parent node for h1 & ul & head is the parent node for the title & the meta tags.

• Every node has a node type, node name & node value property.

• Most commonly 4 types of nodes are present

  • Document node
  • Element node
  • Text node
  • Comment node

Important

Any new line or space are valid characters (like numbers & letters) and they are considered as part of the DOM

With 2 exceptions

1. spaces & new lines before head are ignored.

2. spaces & new lines after body are removed & placed inside body element.

---

DOM API

Though it sounds like a heavy jargon word to understand it's extremely easy and simple. To understand this let's take a couple of steps back and traverse to DOM

NOTE: After going through the below points you'll get the key to understanding DOM & DOM-API mechanism.

• DOM is the browser's visual representation of the page (website).

• Browser gives us access to this structure (DOM) via DOM-API.

• DOM API gives us many methods to access DOM.

• Finally, we use JavaScript to execute these methods.

In a nutshell, we can say Browser uses DOM to talk with JavaScript.

DOM is NOT just designed for Javascript

---

How to access DOM ❓

✍️

To access DOM typically we have 5 ways.

• document.getElementById() - returns element object.
  • This was historically the most common method.
  • It returns 1 element with the id we specify.
  • id has to be unique within a page.

• document.getElementsByClassName() - returns HTML collection
  • Returns the collection of all the elements in the document that contains the specified class name as an HTML collection.

• document.getElementByTagName() - returns HTML collection
  • Returns the collection of all the elements in the document that contain the specified tag name as an HTML collection.

• document.querySelector() - returns element object.

  • This function takes 1 argument being the CSS selector for the element we wish to find.

  • This returns the 1st element it finds.

• document.querySelectorAll() - returns NodeList.

  • This is quite similar to the querySelector method but the only difference is it doesn't return a single element

  • Instead, what gets returned is an array-like collection of node elements.

    To have a better understanding of document.querySelectorAll() check the diagram below 🖼️

---

How to create an element through DOM manipulation ❓

✍️ The most common way to create an element is createElement

createElement

Adds an HTML element to the DOM

SYNTAX: document.createElement('p');

• This will create a para tag to the HTML file.

• The above syntax is nothing but DOM manipulation.

        let newPara = document.createElement('p');

        // Adding text to this newly created element

        newPara.textContent = "I am a brand new para";

In order to add newPara to the DOM, we need to perform the below steps

1. Find a parent :

   • let's grab the parent

       let bodyElement = document.querySelector('body);
     

     1. Attach it to the parent :

          bodyElement.appendChild(newPara);
     

   💪

Now, we have learned how to create a new element and add it to the HTML element.

Congrats! you have just unlocked the integral concept of doing DOM manipilation

We could have used innerHTML instead of textContent ❓

YES, but it has some disadvantages.

• innerHTML exposes our site to possible cross-site scripting as inline JS can be added to an element.

• textContent is safer as it scripts out the HTML tag.

  NOTE: we could have used other methods as well instead of appendChild() like insertBefore.

  ---

removeChild()

• Whenever we want to remove any element this DOM API method comes into an action.

NOTE: We can also implement a new method provided by DOM API which is remove().

---

Before I sign out 🖐️

Thanks a ton to read this article. It took plenty of time for me to first make a proper understanding of DOM, DOM API, and DOM manipulation then simplify it in simple words which may save you time. I hope this article comes in very handy for your day-to-day development & learning process. Definitely would give you a better understanding of DOM.

Let's connect.

You will find me active on

• Twitter
• LinkedIn
• Github