JavaScript

How to get elements from the DOM in JavaScript

JavaScript is used to add interactivity to a static HTML page; but to add interactivity it needs to access the HTML elements present in the DOM. JavaScript offers a number of methods to access the HTML elements present in DOM. Here we will discuss most of them in great detail:

How to access a DOM element by its ID using JavaScript

One of the most common methods to access an element in HTML DOM is getElementById() which accesses an element based on the value of its ID attribute. The value of the ID attributes are supposed to be unique and no two elements on a single HTML page should have similar IDs. Even if there are multiple elements that have the same ID, the getElementById() method returns only one element (the first element with that ID in the HTML file).

Now we will take a look at an example to better understand how the getElementById() method works.

Note: The browser console is used for the demonstration of examples in this article.

The following HTML file will be used for this example; The JavaScript will be added within the <script> tags which are specifically used to embed JavaScript code directly inside an HTML file.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Accessing DOM Elements in JavaScript</title>

<style>

body { max-width: 500px; }

p { padding: 5px; border: 2px solid black; }

</style>

</head>

<body>

<h1>How to get Elements in JavaScript from the DOM?</h1>

<h2>How to access a DOM element by its ID?</h2>

<p id="example-id">getElementById()</p>

<script>

</script>

</body>

</html>

In the above given HTML file we have a paragraph with a unique id i.e. example-id. If we want to access this paragraph element, we can use the getElementById() method:

<script>

const paragraph = document.getElementById('example-id');

console.log(paragraph);

</script>

We can now use the newly created paragraph variable to manipulate the example-id element directly from JavaScript e.g if we want to change the background and text-color of the paragraph then:

<script>

const paragraph = document.getElementById('example-id');

paragraph.style.color = 'white';

paragraph.style.backgroundColor = 'black';

</script>

How to access DOM elements by their class

The getElementsByClassName() method can be used to get multiple elements that have the same class attribute value. To show how the getElementsByClassName() method works we will modify our HTML file in the following way:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Accessing DOM Elements in JavaScript</title>

<style>

body { max-width: 500px; }

p { padding: 5px; border: 2px solid black; }

</style>

</head>

<body>

<h1>How to get Elements in JavaScript from the DOM?</h1>

<h2 class="example-class">How to access DOM elements by their class?</h2>

<p class="example-class">getElementsByClassName()</p>

<script>

const sameClassElements = document.getElementsByClassName('example-class');

console.log(sameClassElements);

</script>

</body>

</html>

The getElementsByClassName() method returns all the elements that have a specific class in the form of an array. So if we want to modify only one of the elements present inside the returned array we will need to access it with its index number:

<script>

const sameClassElements = document.getElementsByClassName('example-class');

sameClassElements[0].style.color = 'blue';

</script>

We can use a for loop if we want to apply the same changes to all the elements of the array:

<script>

const sameClassElements = document.getElementsByClassName('example-class');

for (let index = 0; index < sameClassElements.length; index++) {

sameClassElements[index].style.color = 'blue';

}

</script>

How to access DOM elements by their Tag

JavaScript also provides the getElementsByTagName() method which can be used to access all the elements that have the same HTML tag:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Accessing DOM Elements in JavaScript</title>

</head>

<body>

<h3>How to get Elements in JavaScript from the DOM?</h3>

<ul>

<li>getElementById() method</li>

<li>getElementsByClassName() method</li>

<li>getElementsByName() method</li>

<li>getElementsByTagName() method</li>

<li>querySelector() method</li>

<li>querySelectorAll() method</li>

</ul>

<script>

const sameTagElements = document.getElementsByTagName('li')

console.log(sameTagElements);

</script>

</body>

</html>

We can again use a loop to apply the same changes to all the elements present within the new array:

<script>

const sameTagElements = document.getElementsByTagName('li')

for (let index = 0; index < sameTagElements.length; index++) {

sameTagElements[index].style.fontFamily = 'sans-serif';

}

</script>

How to access DOM elements by using the Query Selectors methods

JavaScript also has the querySelector() and the querySelectorAll() methods which can be used to access HTML DOM elements. To access a single element we can use the querySelector() method; if there are multiple elements with the same ID or Class then the querySelector() method returns the first element:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Accessing DOM Elements in JavaScript</title>

</head>

<body>

<h3>How to get Elements in JavaScript from the DOM?</h3>

<p id="example">getElementById() method</p>

<p class="example">getElementsByClassName() method</p>

<p>getElementsByName() method</p>

<p>getElementsByTagName() method</p>

<p>querySelector() method</p>

<p>querySelectorAll() method</p>

<script>

const paragraphOne = document.querySelector('#example');

const paragraphTwo = document.querySelector('.example');

console.log(paragraphOne);

console.log(paragraphTwo);

</script>

</body>

</html>

The # sign is the selector for the ID attribute whereas the . sign is the selector for the class attribute.

The querySelectorAll() method returns an array containing all the DOM elements with a specific class name or an ID:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Accessing DOM Elements in JavaScript</title>

</head>

<body>

<h3>How to get Elements in JavaScript from the DOM?</h3>

<p id="example-id">getElementById() method</p>

<p id="example-id">getElementsByClassName() method</p>

<p id="example-id">getElementsByName() method</p>

<p id="example-id">getElementsByTagName() method</p>

<p id="example-id">querySelector() method</p>

<p id="example-id">querySelectorAll() method</p>

<script>

const paragraphs = document.querySelectorAll('#example-id');

console.log(paragraphs);

</script>

</body>

</html>

We can perform different methods such as .forEach() method on the arrays returned by the querySelectorAll(). These methods do not work with the arrays returned by getElement methods.

Conclusion

Accessing HTML DOM elements and making them interactive through JavaScript is the most basic yet an essential part of any Front-end Develoepr’s work. Here we have listed the five most common methods used in JavaScript for accessing DOM elements.

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.