Yogesh Chauhan's Blog

All different methods for accessing elements in the DOM using JavaScript

in JavaScript on March 16, 2021

There are many different ways to access elements in the HTML DOM using JavaScript.

We can use different HTML attributes like ID, class or just HTML tags to get the elements. Sometimes, we can use combination of ID and class as I have shown an example in this post.

Let’s start accessing elements by each methods one by one.

Method 1: Accessing Elements using ID

This is probably the first method comes to our mind when we want to access HTML elements and do something with it. For e.g. animating the list.

This is probably the easiest way to access an HTML element as well. ID is going to be an unique attribute for each elements (unless you break the rule and add it to more than one element – you’ll get console errors in browsers). Every elements become an unique with those specifically defined ID attribute values for them.

We can use getElementById() method to access that unique element.

getElementById() method is useful when you want to access just one element at a time.

Accessing Elements using ID Example

Method 2: Accessing Elements using Class Name

A class attribute value can be same for multiple elements. Mostly we try to add same class name to same tags. For e.g. if you want all paragraph font-size to 20px then you will add the class in css with that font-size property value and then add that class name to all p tags in HTML. That way you have control over all of your p tags.

We can use getElementsByClassName() method to access all elements with a particular class name.

getElementsByClassName() method is useful when you want to access multiple elements at the same time.

Accessing Elements using Class Name Example

As you have noticed in the example above I have used a for loop to set the style for elements with the same class. That’s because we get an object of elements in return when we use getElementsByClassName(). So, we need to target each element one by one and do something with it.

Method 3: Accessing Elements using Tag Name

This method(getElementsByTagName) is similar to getElementsByClassName() in way that it returns an object of elements. So, we need to loop through the elements and do something with each element.

getElementsByTagName() method is useful when you want to access multiple tags (p tags, a tags etc) at the same time.

Accessing Elements using Tag Name Example

By far, all we have is p tag in our DOM. Let’s target all p tags and add border using getElementsByTagName().

Method 4: Accessing Elements using Query Selectors

There are two Query Selectors methods.

  • querySelector() – used to access a single element
  • querySelectorAll() – used to access multiple elements.

If we try to use querySelector() with multiple elements for e.g. a class or a tag, it will return the first element that matches the query.

We can pass an ID or class of an element(s) or a tag inside those methods. It’s a flexible method as if you want to change the selector from an ID to a class then all you need to do is change the ID value to class value. No need to change the method.

Accessing Elements using Query Selectors Example

Let’s add padding to the first p tag using the ID and also, let’s use querySelector() method on all elements with same class and see what happens.

As you can see, the querySelector() method has changed the first element only and other 2 elements are unchanged even though they have same class name.

Let’s change all those elements with querySelectorAll() method.

The last fiddle above has all the code we used throughout the discussion. Feel free to play with the code and modify it.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
A Quick Comparison of JOIN and Subquery in SQLSQL/MySQLHow to change style of nth-child using jQuery?jQueryCommon Table Expressions (CTE) in PostgreSQLPostgresThe difference between Class declarations and Class expressions in JavaScriptJavaScriptCreate a simple bar chart and column chart using pure CSS gridCSSHow to merge arrays in JavaScript?JavaScript