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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
ALTER DATABASE in PostgreSQLPostgresHow to install PuTTY on a MacOS?MiscellaneousHow to create a new HTML element programmatically using JavaScript?HTMLCSS align-items property examplesCSSHow to change CSS with JavaScript?CSSWhy does MOV matter in IT or any kind of projects?Miscellaneous