Most of the times while creating a web application we may need to interact with the DOM elements. The DOM or Document Object Model allows us to dynamically access and manipulate the HTML contents. There are some built in methods available in JavaScript to access HTML DOM. Let’s discuss one by one.
The getElementById Method
This method name is self-descriptive about its action. It fetches the DOM element with the help of the id
attribute.
<p id="para">Some paragraph</p>
const element = document.getElementById('para');
Now you can manipulate this DOM element according to your need. Here we will change the text inside the paragraph.
document.getElementById('para').innerText = "Updated paragraph";
Simple isn’t it? Now let’s move on to another method to access element.
The getElementsByName method
This method fetches elements with the name
attribute and returns a NodeList
. It fetches all the elements that have the specified name
attribute. Let’s see an example to check which radio button is selected.
Male: <input type="radio" name="gender" value="male" /> Female: <input type="radio" name="gender" value="female" />
const elements = document.getElementsByName('gender'); for(let inputEle of elements) { if(inputEle.checked) { console.log(inputEle.value + ' radio button is selected'); } }
As this method returns a NodeList
, we can simply loop through it and can access each element present in it.
The getElementsByClassName method
This method fetches elements with the class
attribute. This method returns a NodeList
of all the elements that has the specified class
attribute.
<div class="header"> <p class="odd"> This is paragraph 1 </p> <p class="even"> This is paragraph 2 </p> <p class="odd"> This is paragraph 3 </p> <p class="even"> This is paragraph 4 </p> </div>
const elements = document.getElementsByClassName('even'); for(let paraElem of elements) { console.log(paraElem.innerText); } //This is paragraph 2 //This is paragraph 4
Here we are accessing all the elements those are having the class as “even” and printing the text inside it.
The getElementsByTagName method
This method fetches elements with the specified tag name. This method returns a NodeList
of all the elements that has the specified tag name.
Let’s see an example to fetch all the img
tag present in DOM.
<div class="header"> <img src="image1.jpg" alt="image" /> <span> <img src="image2.jpg" alt="image" /> </span> <div> <img src="image3.jpg" alt="image" /> </div> </div>
const elements = document.getElementsByTagName('img'); for(let imgElem of elements) { console.log(imgElem.src); } //image1.jpg //image2.jpg //image3.jpg
The querySelector method
This method uses CSS
selectors to access a DOM element and returns the first matched element.
Using id selector:
<p id="para">Some paragraph</p>
document.querySelector('#para').innerText = "Updated";
Using class selector:
<div class="header"> <p class="odd"> This is paragraph 1 </p> <p class="even"> This is paragraph 2 </p> <p class="odd"> This is paragraph 3 </p> <p class="even"> This is paragraph 4 </p> </div>
const element = document.querySelector('.even'); console.log(element.innerText); //This is paragraph 2
To fetch all the matched elements, use querySelectorAll()
method.
const elements = document.querySelectorAll('.even'); for(let paraElem of elements) { console.log(paraElem.innerText); } //This is paragraph 2 //This is paragraph 4
Using tag name selector:
<div class="header"> <img src="image1.jpg" alt="image" /> <span> <img src="image2.jpg" alt="image" /> </span> <div> <img src="image3.jpg" alt="image" /> </div> </div>
const elements = document.querySelectorAll('img'); for(let imgElem of elements) { console.log(imgElem.src); } //image1.jpg //image2.jpg //image3.jpg
And that’s it. Now you have got a clear picture of how to fetch DOM elements. So go ahead and play around with the DOM elements. Happy Coding :).
Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next | Angular | Vue | HTML | CSS