Yogesh Chauhan's Blog

How to get the first element with a class name xyz using JavaScript?

in JavaScript on March 16, 2021

We can use getElementsByClassName to get all the elements with a class name ‘xyz’. We can also use document.querySelector and document.querySelectorAll to get elements with a class name ‘xyz’.

We can use getElementsByClassName(“xyz”)[0] ot get the first element with a class name ‘xyz’.

Here is how to do it:

One more way to do is using the querySelector() method. When we use querySelector() method on multiple elements, it will only return the first element that matches the query.

Here’s how to do it:

There is another way to do it.

We can add a parent element for all those elements with class name ‘xyz’. Then we’ll add id attribute for the parent element whose child element we want to target it and then use the id and class both to target the element.

It’s just a long way but for the sake of the example, let’s check it out.


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 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
What does JSX do in React?ReactHow to create bouncing balls using HTML canvas and JavaScript?HTMLSolution to Precision Problem in JavaScript NumbersJavaScriptWhy it’s not a good idea to create Number objects in JavaScript?JavaScriptThe Difference Between the echo and print Commands in PHPPHPHow can one check to see if a remote file exists using PHP?PHPCreate a menu with a curtain falling animation using CSS and JavaScriptCSSPHP arrays for US states’ full names and abbreviationsPHPAdd animation to your skills bar using CSSCSSWhat’s a Strict mode in JavaScript?JavaScriptUse inline if to make a shorter conditional syntax in ReactReactHow to detect if browser supports WebP format on server side PHP script?PHP