Javascript DOM
Tags: javascript, html
Published: 2021-08-02 12:31:19

This Post will cover the basics of selecting elements and manipulating elements in the DOM.
<h1>What is DOM </h1>
DOM stands for Document Object Model. It is an object oriented representation of a web page.

DOM represents the HTML or XML documents as tree of nodes .
![1 ZVg2USWwvFeRcnT2It99QQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylo2rbodj1ju7a5ydfc2.png)
 
Let's understand the above image.
<li>Document is the root node.</li>
<li>Root node has one child which is the HTML element.</li>
<li>Each document can have only one document element.</li>
<li>HTML node have two child node elements HEAD and BODY </li>
<li>Similarly HEAD and BODY have their child nodes TITLE ,Script and h1 respectively</li>
<li>At bottom we have text node which is just a text</li><br>

let's see how we can select and manipulate these nodes.

<h1>1. <u>Selecting elements</u></h1>
We'll dicuss 4 ways to select an HTML element

1. getElementById
2. getElementByName
3. getElementByClass
4. QuerySelector

<b>getElementById</b>

![html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vhb875zr3j4hxp2v1jl.PNG)

Div is a HTML element. It has an id attribute, id is used to uniquely identify an element in the DOM.

To select an element by its id we use document.getElementById() method.
  
![jscorrect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb0ohnnq28s5k9i70hmi.PNG)

getElementById() returns an element object if an id exists. If there is no element with that id then it will return null.

Once the element is selected we can manipulate it ,add styles to it.

<b>getElementByName</b>
![html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdpkevt62w2kpm25hcpx.PNG)
 
Some elements in HTML have name attribute. Unlike id, name doesn't have to be unique.

Multiple elements can have same name value.
![js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u61j8ew03uj8rtsbje6h.PNG)

to access element by name we use getElementByName().This will return a NodeList.

<b>getElementByClass</b>
![htmlclass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p008fd9rbiguiv745t0.PNG)

HTML elements can have class attribute.To access the element by class we use getElementByClass().This will return HTML collection 
 ![jsclass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rsug9jis3q7ttprq0e9.PNG)
 
<b>querySelector</b>
It can be used to select elements with id or class.
To select an element by id we use '#' and for class we use '.'

![selectorjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdpii2p08mr6vyu3s6s0.PNG)
![selectorid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2twx48q7atr1q9vwfcx9.PNG)
 
<h1>2. <u>Manipulating elements</u></h1>
Now that we know how to select an element from the DOM in manupulating elements we will see how to add or remove an element from the DOM.

<b>Adding new element to the DOM</b>
To add a new element in the DOM we have to follow 3 steps .

step 1. creating the new element.
step 2. creating the text node.
step 3. adding element into the DOM.

let's see how to write javascript for above 3 steps.
<li>To create an element we use document.createElement(HTMLtag)</li>
<br/>


<li>To add a text in it we can use innerHTML="some text" or textContent="some text" (difference between textContent and innerHTML will be discussed later).
<br/>
<br/>

<li>To add element into the DOM we use document.body.append() or we can also use document.body.appendChild(). The only difference between append and appendChild is append can add text as well as html tag as a node in the DOM but appendChild will only append html tags.</li>

![addele](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yivg4ob0obgt7pu5m9vk.PNG)
 
In DOM and style inspector you'll be able to see the div element has been added in the body and inside div element text is added.
![console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pq4yqajcinjbve3od3d.PNG)
 
<b>Removing elements from the DOM</b>
To remove an element we first have to select it by its id,class or name.

In the below image you can see that there is a span with id bye.

![Capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5b1wcnmjsb2e2nwsrgm.PNG)
to select and then remove the span below is tha javascript code.

 
![Capture2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su3vzxbkjle29wgtm1ro.PNG)
 To remove we use remove().This will remove the element from the DOM.

✌️