How to access DOM elements in JavaScript

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

Amitav Mishra

JS Curious