JavaScript

Methods to access/get elements in the DOM | explained with examples

JavaScript is the most commonly used scripting language to change the elements of a webpage, truth be told, no scripting language can directly interact with the HTML elements. The scripting language interacts with the DOM (document object model) and the DOM interacts with the HTML elements because DOM is a language-neutral application interface (API).

In this post, we are going to learn about different methods that we can use in JavaScript that will help us alter the HTML elements using the DOM interface.

Access\ Get Methods

JavaScript provides us with 5 different methods through which we can interact with DOM to access an element on the webpage. These methods are namely:

  • getElementById(id)
  • getElementsByClassName(className)
  • getElementsByTagName(tagName)
  • querySelector(css_Selector)
  • querySelectorAll(css_Selector)

Usage of access\get methods

To demonstrate the use of these get\access methods we need to first set-up an HTML file and link a javascript file using the following line:

<script type="module" src="script.js"></script>

Now, we need to set-up elements inside our HTML file, we can do that by using the following lines:

<center>

<div id="demoID">I have the ID "demoID"</div>

<br />

<div class="test">I have the class "test"</div>

<div class="test">I also have the class "test"</div>

<br />

<article>I have the tag "article"</article>

<article>I also have the tag "article"</article>

<br />

<div id="querySelect">I have the query as "querySelect"</div>

<br />

<div class="querySelectAll">I have the query as "querySelectAll"</div>

<div class="querySelectAll">

I also have the query as "querySelectAll"

</div>

</center>

As you can see, we have some <div> with id, some with classes and we have used an <article> tag as well. Executing this HTML file will give us the following output:

Accessing an element by using its ID

The first method that we are going to test is the getElementByID(), we are going to access the element with the ID “demoID” and we are going to change its style using the following lines of code in our javascript file:

var demoID = document.getElementById("demoID");

demoID.style.backgroundColor = "yellow";

After running the file we get the following output on our browser:

As you can see we were able to access the element by using its ID and then change the style of the element by using javascript.

Accessing elements using their class name

The getElementByClassName() method returns multiple elements having the same class name. We can access elements using their class name with the following line of code:

var testClass = document.getElementsByClassName("test");

Since we have 2 elements with the class name “test” that is why our variable “testClass” is of the type array and if we want to change attributes of the elements inside the array we have to refer to them using their array indexes like

testClass[0].style.border = "2px solid green";

testClass[1].style.border = "2px solid brown";

Upon executing we get the following output:

Accessing elements using their Tag Name

To select elements using their tag name we use the method getElementByTagName(), in our example, to select the elements with the tag name “article” we use the following line:

var tagSelect = document.getElementsByTagName("article");

Again, we have two elements with the same tag name “article” therefore we are going to manually change their attributes using their array indexes:

tagSelect[0].innerHTML = `I have changed my text`;

tagSelect[1].innerHTML = `I have also changed my text`;

If we run the file now, we get the following output on our browser:

As you can see, we have changed the text of the elements with the tag name “article”.

Accessing an element using Query selector

We can select elements by using a query selector, to do that we use the method document.querySelector(), and if we want to select an element with a specific id, we use the “#” symbol in the query selector as

var querySelect = document.querySelector("#querySelect");

After we have accessed the element we can change its border with the following line:

querySelect.style.border = "1px solid red";

You will get the following result on your browser:

Accessing an element using all query selectors

We can select all the elements with the same query using the querySelectorAll() method. Append the following line in the javascript file:

const demoQueryAll = document.querySelectorAll(".querySelectAll");

To change the attributes of both the elements accessed by this querySelectorAll(), use the following lines of code:

demoQueryAll.forEach((query) => {

query.style.border = "1px solid green";

});

You will get the following results on your browser:

That is it for accessing elements using all the methods offered by JavaScript.

Conclusion

There are 5 main methods provided by javascript that help us access\get elements of an HTML webpage with the help of the DOM interface. In this post, we learned about all 5 methods, implemented all those methods by changing the attributes of the elements that we accessed. We need the DOM interface to do all these alterations because no scripting language can directly access the HTML elements rather the DOM works as an API for the scripting language.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.