This article was originally posted in my Hashnode Blog
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.
- 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 usingquerySelector
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.
- 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 usingquerySelector
orquerySelectorAll
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>
- 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
orquerySelectorAll
- 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
- You can Select elements using id, classes, tag, or attributes.
.
is for class.#
is for id and[ attributeName = "value"]
is for attributes. They are the selectors for selecting the elements.querySelectorAll
returns theNodeList
of elements,getElementsByClassName
,getElementsByTagName
returnsHTMLCollection
andgetElementById
&querySelector
returns the element itself.We can even specify the type of element when using
querySelector
orquerySelectorAll
.
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.
Top comments (0)