Javascript 1o1 - Working with DOM - 1
Tags: javascript1o1, javascript
Published: 2020-10-04 01:25:58

> This article was  originally posted in my [Hashnode Blog](https://binayak.hashnode.dev/working-with-dom-1)

`DOM` stands for `D`ocument `O`bject `M`odel.
`DOM` is a standard for accessing documents. 

It is a language-neutral platform that allows programs or scripts to change the contents, styles, and structure of documents dynamically.

In this article, we will learn 
How we can access the model object of elements in a document.

1. Through Id

```html
<p id="demo"></p>
<script>
  
let paragraph = document.getElementById("demo");  
//or
let paragraph = document.querySelector("#demo");


</script>
```
> `#` is used before the id to denote we are selecting the elements having id while using `querySelector`

`document.getElementById` is only dedicated to getting elements having `id` but `document.querySelector` & `document.querySelectorAll` can be used to get elements with different attributes too.


2. Through  Class

```html
<p class='para'> First Paragraph </p>
<p class='para'> Second Paragraph </p>

<script>

 let paragraphs = document.getElementsByClassName("para"); //returns HTMLCollection
//or
let paragraphs = document.querySelectorAll('.para'); //returns NodeList

</script>
```
> `.` is used before the class to denote we are selecting the elements having class while using `querySelector` or `querySelectorAll`

Here, I used `querySelectorAll` instead of `querySelector`.

This is because `querySelectorAll` returns all the elements matching the selector specified in the argument. but `querySelector` returns the only first element in the document matching the selector.

For instance 
```html
<p class='para'> First Paragraph </p>
<p class='para'> Second Paragraph </p>

<script>

let paragraph = document.querySelector('.para') 
// returns the paragraph with text "First Paragraph"

</script>
```

Therefore, Only when we are selecting with Id, we use `querySelector`. Otherwise, we use `querySelectorAll`.

> There is more to it with selecting elements with class

For instance

```html
<p class='block'> This is paragraph </p>
<p class='block'> This is paragraph 2 </p>
<h5 class='block'> This is heading </h5>

<script>
let elems = document.querySelectorAll('p.block');
//returns only paragraph with class 'block'
</script>
```


3. Through  Tag Name

```html
<p> Hi </p>
<p> How are you ? </p>

<script>
  let elems = document.getElementsByTagName("p"); // returns HTMLCollection 
  //or 
  let elems = document.querySelectorAll("p"); // returns Nodelist
</script>

```
> Not  using any notation before the argument denotes selecting elements with tag name in `querySelector` or `querySelectorAll`

4. Through Attribute values

```html
<h1 title='heading'> Working with Dom </h1>

<p title='heading'> Attribute Selector </p>


<script>
  let elems = document.querySelectorAll("h1[title='heading']");
// returns NodeList of h1 elements with title 'heading'


  let elems = document.querySelectorAll("[title='heading']");
// returns NodeList of all elements with title 'headiing'
</script>
```

### Conclusion
1. You can Select elements using id, classes, tag, or attributes.
2. `.` is for class. `#` is for id and `[ attributeName = "value"]` is for attributes. They are the selectors for selecting the elements.

3. `querySelectorAll` returns the `NodeList` of elements, `getElementsByClassName` , `getElementsByTagName` returns `HTMLCollection` and `getElementById` & `querySelector` returns the element itself.

4. We can even specify the  type of element when using `querySelector` or `querySelectorAll`.



You may have noticed. I have mentioned a lot about `NodeList` and `HTMLCollection` above in the code. We will be learning about these strangers in the next article.