JavaScript DOM explained with examples
Tags: javascript, html, css, beginners
Published: 2020-10-25 12:01:51

### Table of Contents


[What is DOM?](#ch1)
[Why is DOM important?](#ch2)
[DOM nodeTypes](#ch3)
[Properties of DOM](#ch4)
[Accessing/Modifying Elements](#ch5)

### What is DOM?  <a name="ch1"></a>

When you open a website in your browser, the browser builds something call [Document Object Module](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) (referred to as DOM ).

DOM is a tree-like structure of an HTML page. All the tags in an HTML page are represented as nodes in the DOM tree. The browser uses this DOM to draw a page on the screen.

>**Definition:** DOM is an [object-oriented](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS) representation of a webpage, which can be modified with a scripting language such as JavaScript.

#### HTML Code
![HTML code](https://dev-to-uploads.s3.amazonaws.com/i/sy0126xbmtzunf22691j.png)


#### Output
![Output](https://dev-to-uploads.s3.amazonaws.com/i/9yp8zzg9cyrlf98s2mjw.png)


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




###Why is DOM important?  <a name="ch2"></a>
JavaScript and other scripting languages use this DOM to read and modify pages. Whenever there is a change on DOM it is immediately reflected on the page.DOM is very important for building interactive and dynamic webpages.

###DOM nodeTypes  <a name="ch3"></a>

Nodes in the document are referred to as elements although not all nodes are elements. Each DOM node has a nodeType which contains a code that identifies the type of the node.

For example : 
if you run **document.nodeType** in your browser console (ctrl+shift+j in chrome) on HTML page you get **9** as output. Which is the nodeType value of document.

more node type values can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)




###Properties of DOM <a name="ch4"></a>

JavaScript provides you with links using which you can traverse through the tree. JS provides many properties to traverse the DOM. Some of them are explained with examples below.

**Siblings**: Using nextElementSibiling and previousElementSibiling we can access the previous and next siblings of the node respectively.



#####Code - siblings


![Code - Siblings](https://dev-to-uploads.s3.amazonaws.com/i/14qr4fpik0c4n5eb7c7h.png)


#####Output


![siblings output](https://dev-to-uploads.s3.amazonaws.com/i/fohm3ustncp68mtpfni7.png)



**Children**: Using properties lastElementChild, firstElementChild and children we can get the required child of the current node 

##### Code - children


![children code](https://dev-to-uploads.s3.amazonaws.com/i/2nkwi0q19iuyhkzl88x4.png)


##### Output 


![child output](https://dev-to-uploads.s3.amazonaws.com/i/o1fcvkkfcgyjkw5o3p9w.png)

There are many other properties such as nodeValue, baseURI, etc which you can refer to [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)

(Note: Using nextSibling or lastChild will give text output because the whitespace between the lines of code is treated as a text element. So it's better to use nextElementSibiling or lastElementChild )

###Accessing/Modifying Elements <a name="ch5"></a>

Using JavaScript we can add, modify, or delete elements of the HTML and its attributes.

**Accessing Elements**: The element in the DOM can be accessed using the following methods

1. getElementById(): returns an element with the given Id. Each element has a unique id so it only returns one element always.

2. getElementsByTagName(): returns the total number of elements present with the given tag.

3.getElementsByClassName(): returns the total number of elements present with the given class name.

4.querySelector(): returns only the first element present with the given query name.

5.querySelectorAll(): returns the total number of elements present with the given query name.

In querySelector parameters should be passed as follows

tag   - 'tag'
class - '.name'
id    - '#id"    

##### Code - elements


![Elementss code](https://dev-to-uploads.s3.amazonaws.com/i/ip6e0ncyzzkpr9bz46gi.png)

##### Output 


![element output](https://dev-to-uploads.s3.amazonaws.com/i/3vnxh17l6ztrcj0181xz.png)

**Adding Elements**:
In order to add elements to the DOM you first need to create an element using **createElement()** method.
After creating an element we append using the **appendChild()** to the parent element to which we want to add the created element.

##### Code


![adding element code](https://dev-to-uploads.s3.amazonaws.com/i/yxedzloyc1cw3dz47yp4.png)


##### Output


![adding element output](https://dev-to-uploads.s3.amazonaws.com/i/86ku21dqu2u1ccam6xph.png)


(PS: This is my first article any feedback is very helpful to me, so please take a few seconds to give feedback. If there are any mistakes please post in the comments. Thank You.)