Javascript 1o1 - Working with DOM - 1

This article was originally posted in my Hashnode Blog

DOM stands for Document Object Model.
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

<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.

1. Through Class

<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

<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

<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>

1. Through Tag Name

<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

1. Through Attribute values

<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.