How to Use getElementById and querySelector in AngularJS

1. What Is document.getElementById Function in AngularJS
2. What Is document.querySelector() Function in AngularJS
3. What Is angular.element Function in AngularJS
4. When $(target) Works but angular.element('appBusyIndicator') Doesn’t Work in AngularJS

When creating web applications, there are situations where a particular section of the web page performs in a specific way when an action is taken. For instance, we might need a particular picture on the web page to change or flip after a few seconds or click a button.

There are three functions on Angular that are best used to manipulate web page elements; these are angular.element, document.getElementById, and querySelector().

When we call these functions for DOM manipulation, some problems are commonly encountered, but before we dive into that, let us familiarize ourselves with the meaning of these functions.

What Is document.getElementById Function in AngularJS

The document.getElementById function lets you specifically select an HTML id and manipulate them to one’s liking. It is the most supported function, and it loads the fastest compared to other DOM manipulation functions.

What Is document.querySelector() Function in AngularJS

While the document.getElementById function targets a specific id, the document.querySelector() function targets the CSS elements in a web page, for instance the a and p tags in the HTML.

This function loads slower than the former and is less supported, but it is better used for complex HTML manipulations. If the need arises where more than one CSS element is targeted, the document.querySelectorAll() function will be called instead.

What Is angular.element Function in AngularJS

Angular.element helps your code on multi-frameworks. This function becomes handy when we have a code to work on other frameworks like React and Vue.

When $(target) Works but angular.element('appBusyIndicator') Doesn’t Work in AngularJS

Now that we have an idea of the three functions and what they can do let’s look at the problems we will likely encounter.

Code arrangements like below work perfectly in Angular.

$(target).fadeIn('fast')

But this would not work.

angular.element('#appBusyIndicator').fadeIn('fast')

This problem occurs because the angular.element function cannot work entirely. While it is an Angular function, it needs to wrap a jQuery code snippet before it comes alive.

Like this:

var myElement = angular.element( document.querySelector( '#some-id' ) );

As explained above, we wrapped document.querySelector() with the angular.element to get the function to work.

Unable to Access the Contents of an Element in AngularJS

There are instances where we want to get the original value in an element when users have made an input. It’s mostly because the Angular framework usually wraps the element with its properties.

We can access these properties in two ways:

1. We can use the $document method like this.

var target = $document('#appBusyIndicator');

2. The second method utilizes the Angular element; the joy of this method is that it targets specific elements.

var targets = angular.element(document).find('div');
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

These methods are versatile as you can apply them to target elements in a div, a CSS class, or spin controls.