DOM for Beginners: 6 minutes tour
Tags: codenewbie, html, webdev, beginners
Published: 2020-12-10 18:58:52


---
title: DOM for Beginners: 6 minutes tour
published: true
description: Here we are going to learn about DOM as a beginner!
tags: #codenewbie #html #webdev #beginners 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1zhm6qe3v9qroothu6ze.png
---

🛎️*I am writing this article to help my brother, Avi with his journey in web development. 
You can find him on [Twitter](https://twitter.com/imavilash) and on Minecraft @avipopo(he is a damn consistent Minecraft player 😍). *

*Representation*
* DOM📑🪨🧩
* HTML🌐
* CSS🎽
* JS/JavaScript🍵📃

##What is DOM📑🪨🧩?
The Document Object Model(DOM) creates a structure or a view of the web page so that other scripts or programming languages can connect to the page for different applications. 

**There are 3 main aspects of developing a website.** 

##HTML🌐
HTML is the language of the web and has a specific set of rules and syntax. 
-   HTML stands for HyperText Markup Language
-   HTML is the standard markup language for creating Web pages
-   HTML describes the structure of a Web page
-   HTML consists of a series of elements
-   HTML elements tell the browser how to display the content
-   HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

##CSS🎽
-   **CSS**  stands for  **C**ascading  **S**tyle  **S**heets
-   CSS describes  **how HTML elements are to be displayed on screen, paper, or in other media**
-   CSS  **saves a lot of work**. It can control the layout of multiple web pages all at once
-   External style sheets are stored in  **CSS files**

## JS🍵📃
- JavaScript is the  **Programming Language**  for the Web.
- JavaScript can update and change both  **HTML**  and  **CSS.**
- JavaScript can  **calculate**,  **manipulate**  and  **validate**  data.



## How does JavaScript🍵📃, a programming language interact with HTML🌐, a markup language😕? 

As HTML is not a programming language, the interaction between HTML and JavaScript is done via the process called DOM. 

DOM refers to the Document Object Model. 

## Why do you need to implement Javascript🍵📃 on your website😖?

Because there are some very important functions of a properly working website that can only exist if JavaScript is implemented properly.

_Example_😮:-
* Animation💨🔜 after you click a button 
* Something happened(event🪃) after you clicked a button
* Creating🗃️ new forms or elements on a static page based on user's inputs without reloading the site on client's device 
* Gathering📂 form input data for further usage. 

etc. 

These are all the common things expected from a well-made website. 

You need JavaScript for that. 

## How does the browser convert an HTML🌐 document into a DOM📑🪨🧩? 

<a href="http://www.mediafire.com/view/bn109r8oi2e8iwq" target="_blank"><img src="https://www.mediafire.com/convkey/389a/bn109r8oi2e8iwq6g.jpg" border="0" alt="Simple, Free Image and File Hosting at MediaFire" /></a>

As you can see, here is an example of how the HTML document looks like while running in a web browser. 

In the picture above you can see on the left is the browser view of the HTML document and on the right side is the actual code. 

You can see that `h1` tag is inside the body tag which helps the browser display the heading in the format we wanted. This is how other tags in this HTML document works. 

Tags are defining how there inner elements or texts should be displayed in the browser.  Differences in the hierarchy of different tags are used for a different way of displaying them on the browser. 

Now when the HTML document is loaded on the browser, another representation of that document is created by the browser known as DOM. 
<a href="http://www.mediafire.com/view/or505apld22fple" target="_blank" id = "DOM_img"><img src="https://www.mediafire.com/convkey/541f/or505apld22fple6g.jpg" border="0" alt="Simple, Free Image and File Hosting at MediaFire" /> </a>
 *Actual representation of HTML to DOM conversion* </a>
 
## In the image below you can see a very basic HTML🌐 document. 
<a href="http://www.mediafire.com/view/lj6f81h0v7z2mep" target="_blank"><img src="https://www.mediafire.com/convkey/e01f/lj6f81h0v7z2mep6g.jpg" border="0" alt="Simple, Free Image and File Hosting at MediaFire" /></a>
There is an `HTML` tag up there. An indented `head` tag. That `head` tag has a `title` tag in it. Again in that same way, `HTML` tag has a `body` tag in it and the `body` tag also has some other tags inside of it. The pattern here is the hierarchy of different tags based on how they are used. 

> The concept DOM📑🪨🧩 uses this hierarchy of tags to create the model for JavaScript's🍵📃 integration. 

1. **D**ocument📃 in DOM refers to the HTML document that we write.

2. **O**bject🪨 in DOM is the tags in the HTML document that we write.

Tags like `head`, `HTML` and `title` tag are all converted into objects by the browser. Because JavaScript🍵📃 doesn't understand those tags. JavaScript🍵📃 understands objects. JavaScrip🍵📃t can work with objects. So after the browser converts the tags into objects, using JavaScript🍵📃 we can easily manipulate the tag, there events and the tag itself.

<a href="http://www.mediafire.com/view/mgxv1hdt1nmii0q" target="_blank"><img src="https://www.mediafire.com/convkey/972e/mgxv1hdt1nmii0q6g.jpg" border="0" alt="" /></a>

3. **M**odel🧩 is created based on the hierarchy of tags been implemented in the HTML document that we write.

Tags are converted into objects in the DOM tree on the right-hand side. those objects are placed based on the tag's hierarchy in the HTML document. 

The HTML document you write is not different than it's DOM version. DOM is a different representation of the same HTML document you made. 
 
 <a href="http://www.mediafire.com/view/gabq4s7lev8m18s" target="_blank"><img src="https://www.mediafire.com/convkey/b33d/gabq4s7lev8m18s6g.jpg" border="0" alt="Simple, Free Image and File Hosting at MediaFire" /></a>

For example in the image above, you can see on the left side that there is a `title` tag with a title name inside of it. 

Normally to change that tag you will need to go back to source code and change it manually from there. But if we want to utilize the DOM representation of the HTML document, we can access the corresponding object of the title tag in the DOM using javascript and then change the inner content of the tag using a function. 

Similarly, you can change colour, add colour and add a background image to any element using the objects in this DOM.

## How can JavaScript🍵📃 use these objects🪨 in the Document Object Model📑🪨🧩?

> So the way it works is that JavaScript🍵📃 looks at this document in terms of nodes▪️. So the concept of nodes▪️ is used over here. 

<a href="http://www.mediafire.com/view/or505apld22fple" target="_blank"><img src="https://www.mediafire.com/convkey/541f/or505apld22fple6g.jpg" border="0" alt="Simple, Free Image and File Hosting at MediaFire" /></a>

The yellow💛 text is the element node, the blue💙 one is the inner `HTML` or `text` node and the green💚 one is the `attribute` node. There are many other nodes but these three are the most basics and the most common ones. 

Again here you can see that a little bit of hierarchy is going on here. The `element` tag is at the top and then there is in the second level, the attributes inside another nested `div element` tag. "My title" is inside a different nested tag. These `elements` are all objects in the DOM. 

> For those who don't know what an object🪨 is, the object🪨 is something which has an attribute and a function that can operate on that attribute. 

Javascript uses methods on these methods to access these nodes for manipulation. 

**We can refer DOM as a JS view too.**

## Fundamental data types📊
As DOM is a model, it has it's own data types and various objects.
* Document
The document is the root object itself that needs to be accessed first to access other objects inside of it. 
* Node
Every object inside a document can be a node. In an HTML document, a node can be an `element` tag, an attribute or a simple text node. 
* Nodelist
A novelist is an array of nodes. This kind of nodes is returned bu the method `document.querySelectorAll()`. As this novelist is an array, items in it are accessed by indexing. 
* Attributes
A returned Attribute node is an object reference that exposes a special interface for attributes. Generally, an Attribute is referred to as simply an attribute we know. Attributes like id and classes are the identifiers and then there are styling that is inline CSS attributes. 

## Core interfaces in DOM📑🪨🧩
This is a small list of common APIs used by JavaScript🍵📃 and XML scripts📃. 
-   `document.querySelector(selector)`
-   `document.querySelectorAll(name)`
-   `document.createElement(name)`
-   `parentNode.appendChild(node)`
-   `element.innerHTML`
-   `element.style.left`
-   `element.setAttribute()`
-   `element.getAttribute()`
-   `element.addEventListener()`
-   `window.content`
-   `window.onload`
-   `window.scrollTo()`

## Obsolete☠️ DOM📑🪨🧩 interfaces
The definitions and explanation in this article are highly simplified for the sake of beginner's ease of understanding. The following interfaces are considered as obsolete. This list will be updated based on any future changes. 
-   `DocumentTouch`
-   `DOMConfiguration`
-   `DOMErrorHandler`
-   `DOMImplementationList`
-   `DOMImplementationRegistry`
-   `DOMImplementationSource`
-   `DOMLocator`
-   `DOMObject`
-   `DOMSettableTokenList`
-   `DOMUserData`
-   `ElementTraversal`
-   `Entity`
-   `EntityReference`
-   `NameList`
-   `Notation`
-   `TypeInfo`
-   `UserDataHandler` Actual representation of HTML to DOM conversion</a>

## Conclusion✊: DOM📑🪨🧩 is not a seperate document, rather it's a representation of what you wrote in that `.html` format

Inspite of being a huge topic, you don't need to learn a hole lot of things about this concept. To use this DOM, you need to utilize some common API methods over those objects in the models. These APIs are common to XML and JavaScript. 
1. Learn the concept of DOM
2. Learn how to use JavaScript
And that's it. That's a you need.

I will be exploring the methods more deeply in another writing. I will link to the article [here]().

## Thank you🙇‍♂️🙏
I am soo happy☺️ that you read all of it and now you are here. We can connect on [Facebook](https://www.facebook.com/arunavaskar/)☹️📘 and [Twitter](https://twitter.com/arunavaskar)🐦. 
You can check out my profile for more of my writings.