How to select an element by its class name in AngularJS? Last Updated : 12 Sep, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report Given an HTML document and the task is to select an element by its className using AngularJS. The elements can be selected with the help of a class name using the document.querySelector() method that is used to return the first element that matches a specified CSS selector(s) in the document. Approach: The approach is to use the element of className class1 that will be selected and its background color is changed to green, by using the document.querySelector() method. Example 1: This example illustrates for selecting the element by its class name in AngularJS. HTML <!DOCTYPE HTML> <html> <head> <script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.getClass = function() { var el = angular.element(document.querySelector(".class1")); el.css('background', 'green'); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to select an element by its class in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> <p class="class1"> This is GeeksforGeeks </p> <input type="button" value="click here" ng-click="getClass()"> </div> </div> </body> </html> Output: Example 2: In this example, the 2 elements of same class are selected and some of the CSS is changed. HTML <!DOCTYPE HTML> <html> <head> <script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.getClass = function() { var el = angular.element(document.querySelectorAll(".class1")); el.css({ 'background': 'green', 'color': 'white' }); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to select an element by its class in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> <p class="class1"> This is GeeksforGeeks </p> <p class="class1"> A computer science portal </p> <input type="button" value="click here" ng-click="getClass()"> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Filter an Array based on user input in AngularJS ? P PranchalKatiyar Follow Improve Article Tags : AngularJS HTML-Misc AngularJS-Misc Similar Reads How to bind select element to an object in Angular ? AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of an 4 min read How to Sort an Array based on User Input in AngularJS ? AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. In this article, we will see how to sort an array based o 3 min read How to select first object in object in AngularJS? The main problem that we are dealing with is that for an object of objects reading the object of a particular index position is not as simple as a list. We cannot loop over it using ngFor as an object is not considered an iterable. The importance of this issue may arise when the data received from a 3 min read How to Filter an Array based on user input in AngularJS ? AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. Angular filters can be added in AngularJS to format data. 3 min read How to get original element from ng-click in AngularJS ? In AngularJS, we can get the original DOM element that fired the ng-click event using the event's currentTarget property. Getting the event's currentTarget can be useful when we want to track an element's activity, in this case, whether and how many times a particular element is clicked, or we want 3 min read How to filter by object property in AngularJS? Filtering by object property in AngularJS is the concept of choosing the specific objects from the data array which is based on the individual properties. In creating a web application, this is the most common task that deals with the data that needs to be sorted and then displayed to the user. Deve 6 min read Like