Post
Ask Question

How To Access DOM Elements Using JavaScript

Introduction

 
JavaScript is widely used to retrieve or modify the content or value of the HTML elements on the webpage, as well as showing, hiding, or applying animations to the various elements in the DOM. But, before you can perform any of these actions you need to first query and select the HTML element from the DOM.
 
JavaScript comes bundled with multiple efficient methods that let you select the elements from the DOM. In this blog post, we'll go over these methods and will learn to utilize them.
 

getElementById method

 
As the method name suggests, this method name selects the elements from the DOM based on the id attribute of the HTML element. It accepts a single parameter in string format which represents the id of the element that needs to be selected. If the element is found in the DOM it returns the Element object the represents the DOM element. If no match is found it simply returns null.
 
Consider the following example,
  1. <div>    
  2.     <a id="home" href="https://www.c-sharpcorner.com">C# Corner</a>    
  3. </div>   
In the above example, to select the anchor tag we could simply use the following JavaScript code.
  1. let href = document.getElementById('home');
The getElementById method will query the and select the anchor tag element will store that element inside the href variable. 
 
Usually, an id is unique within a web page. If more than one element on the HTML page have the same id, the getElementById method will return the first element that contains the id from the document.
 

getElementsByClassName method:

 
The getElementsByClassName method is similar to getElementsById method. However, this method queries the DOM elements based on the class name instead of ID and returns an array-like object called HTMLCollection. If no matching elements are found in the DOM, it'll simply return an empty HTMLCollection.
 
Consider following example,
  1. <div>    
  2.     <a class="link" href="./index.html">Home</a>    
  3.     <a class="link" href="./services.html">Services</a>    
  4.     <a class="link" href="./about.html">About</a>    
  5.     <a class="link" href="./contact.html">Contact</a>    
  6. </div>     
In the above example, we have 4 anchor tags with the class name link. To select these links we could use the following JavaScript code.
  1. let links = document.getElementsByClassName('link'); 
As you can see in the above code, we are using the getElementsByClassName method with the class name link as an argument. This will select all the anchor tags in the example and will add them to an HTMLCollection which will be stored inside the links variable.
 

getElementsByTagName method

 
The getElementsByTagName method queries the DOM elements by tag names and returns an array-like object called HTMLCollection. If no matching elements are found in the DOM, it'll simply return an empty HTMLCollection.
 
Consider the following example,
  1. <div>    
  2.     <a href="./index.html">Home</a>    
  3.     <a href="./services.html">Services</a>    
  4.     <a href="./about.html">About</a>    
  5.     <a href="./contact.html">Contact</a>    
  6. </div>     
In the above example, we want to select the anchor tags using JavaScript. We could easily do that using the following JavaScript code.
  1. let links = document.getElementsByTagName('a');  
The getElementsByTagName method will simply get all the anchor tags from the DOM and will add them to an HTMLCollection object which will be stored inside the links variable.
 

querySelector method

 
The querySelector method accepts a CSS selector in string format as an argument and returns the first matching element from the Document Object Model. 
 
Let's understand this in detail using an example. Consider the following HTML code.
  1. <div>    
  2.     <a class="link" href="./index.html">Home</a>    
  3.     <a class="link" href="./services.html">Services</a>    
  4.     <a class="link" href="./about.html">About</a>    
  5.     <a class="link" href="./contact.html">Contact</a>    
  6. </div>     
We can use the querySelector to select an anchor tag based on its tag name.
  1. let link = document.querySelector('a');  
The above code will select the first anchor that the querySelector method encounters in the DOM.
 
You could also use the querySelector to select the elements based on their class names.
  1. let link = document.querySelector('.link');  
This will select the first anchor with class name as link from the DOM
 
We can also select DOM elements based on their HTML attributes.
  1. let link = document.querySelector('a[href="./about.html"]');  
This will select the anchor tag with a href attribute that points to the about.html page. 
 

querySelectorAll method

 
The querySelectorAll method is very similar to the querySelector method the only difference between the two is querySelectorAll method returns all the elements in the shape of a NodeList Object that match the CSS selector passed to the querySelectorAll method whereas the querySelector method selects only the first element.
  1. <div>    
  2.     <a class="link" href="./index.html">Home</a>    
  3.     <a class="link" href="./services.html">Services</a>    
  4.     <a class="link" href="./about.html">About</a>    
  5.     <a class="link" href="./contact.html">Contact</a>    
  6. </div>     
For the above code, both the following methods will return all the anchor tag elements from the DOM enacapsulated inside a NodeList object.
  1. let anchors = document.querySelectorAll('a');   
  2. let links = document.querySelectorAll('.link');  
For more information,
  1. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
  2. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
  3. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName
  4. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
  5. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll 


Similar Articles