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.
DOM elements getElementById getElementsByClassName JS Methods
