YogeshChauhan . com

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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

3 JavaScript methods to use when you want to go back and forth in historyJavaScriptHow different is Handling Events in React vs HTML DOM?ReactHow to add a Line Chart in Angular App?AngularHow to hide and show menu on scroll using JavaScript and CSS?CSSHow to check if radio button is checked or not using JavaScript?JavaScriptHow to create a flip pricing table using CSS and JavaScript?CSS