AngularJS: How to get a DOM element by id

javascript css angularjs dom

42,534

Solution 1

In pure JS you can do document.querySelector('#myID');

Or within angular using angular.element: angular.element(document.querySelector('#myID'));

Solution 2

Instead try angular.element($('#myElement'));

42,534

Author by

Spikee

Updated on September 10, 2020

Comments

Spikee almost 4 years
Sample

Please consider this Plunkr.

What I need

I need to be able to get an element by it's id.

The sample code should be able to assign a css class to any DOM element that exists on the current view.

This should be checked using a source object, provided by the $scope in a controller. This source object may/will have more properties than there are input elements on the view.

So I want to loop through each object key and see if a corresponding DOM element exists. If so, validate it's value.

The question

How do I get an element by id, using AngularJS only (jQuery is NOT allowed!!)?

Specifically for the Plunkr, I need this function to (really) work:
```
self.IsFieldCurrentlyActive = function(field){
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return (inputElement != 'undefined');

  // Sample only
  var idx = field.indexOf('Unused');
  return idx == -1;
};
```
And this one (basically the same):
```
self.GetElementByKey = function(key)
{
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return inputElement;

  // Sample only
  return null;
}
```
Update

Apologies, I forgot to add an important requirement: I can't use any mechanism that assumes unique IDs, because there may be multiple occurrences of the same form (and the same IDs). So, I need to respect the Angular scope.

Thanks!
Daniele Torino almost 9 years

Depending on the browsers that you want support it's better to use document.getElementById(). querySelector is only supported in modern browsers.
Spikee almost 9 years

Sadly this wont work because there may be multiple occurrences of the same form (and the same id), so I need to stay in (Angular) scope.
Spikee almost 9 years

The $('#myElement') part means you're using jQuery right? Sadly that's not an option because I can't guarantee the ID is unique on the view.
Lauromine almost 9 years

An Id should be unique. w3.org/TR/2014/REC-html5-20141028/dom.html#the-id-attribute
Spikee almost 9 years

Like I said, there's no way to guarantee it, and providing a mechanism that would force unique ids would make state-management very hard considering the complexity.
Spikee almost 9 years

Actually, I found a possible solution that would be doable: link.
Mawg says reinstate Monica over 7 years

If your IDs are not unique, your DOM is not valid and browsers may react in unpredictable ways. Fix that first, before addressing this question.
Cliff Armstrong almost 7 years

Old question is old but, for clarity, angular.element() is an AngularJS method, not jQuery. Under the hood angular.element() is actually jqLite. However, if jQuery is loaded before AngularJS it will replace the jqLite implementation with jQuery... making angular.element() be equivalent to jQuery's $() under the hood of angular.
Cliff Armstrong almost 7 years

All that said, not being able to guarantee unique IDs represents a flawed design. And using angular.element() is just as likely to fail due to multiple IDs because it is no more limited to the current angular scope than native js methods.