# Introduction to Document Object Model
#### Definition
Dom is a tree structure in which every HTML element is arranged in heirarchical order.
#### Example
```htmlembedded
Document
This is heading 2
This is heading 1
This is Paragraph
```
#### Output
#### DOM tree visualization of above example
**Note:**
* We will be uisng javascript to put the interactivity in our web apps or websites.
* JavaScript is used to put interactivity in DOM elements.
#### Question
On clicking the button append hello to the page.
#### Solution
**Step 1:** Slecting html element
To select oe identify a particular html element we have methods.
* getElementById
* QuerySelector
* QuerySelectorAll
**Code:** Using getElementById
```htmlembedded
Document
```
**Output:**
**Code:** Using getElementsByClassName
```htmlembedded
Document
```
**Output:**
**Code:** Using querySelector by ID
```htmlembedded
Document
```
**Output:**
**Code:** Using querySelector by class
```htmlembedded
Document
```
**Output:**
**Code:** Using querySelector by elements
The document method querySelector() returns the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
```htmlembedded
Document
```
**Output:**
**Step 2:** hello should get appended
**What is an event?**
Anything that happens depending on some other thins is an event. Let's say you are clicking on button then something will happen (hello is getting printed).
**Method - addEventListener:** We can add any event to any of our elements with using addEventListener method.
```javascript
Document
```
**Output:**
#### Append Hello DOM Tree
#### Question
Fix the list by inserting the missing element using querySelectorAll and insertBefore
#### Solution
**Step 1:** creating node list
**Note:** Node list is an array like structure which will have your elements in indexed form stored.
```javascript
Document
1
2
3
4
5
6
8
9
10
```
**Output:**
**Step 2:** adding element
```javascript
Document
1
2
3
4
5
6
8
9
10
```
**Output:**
#### Question
Fix the mathmatical problem using JS
#### Solution
```javascript
Document
2 + 2 = 22
```
**Output:**
#### Question
Write a script which fetches the data-color attribute of the card and double clicking on them and attahces the fetched class to that card and also changes the data-color attribute to "used"
#### Solution
**classList:** An element can have multiple classes attached to it and all of those classes are collected in a structure called classList.
Example:
```javascript
Our card
```
The classList for this div will be - [card, test, blue]
```javascript
Document
```
**Output:**
