Inside my directive I want to access a id from my DOM. I integrated jQuery in my project, But the problem is two way I can access my desired DOM:
var myEl = angular.element('#divID'); And
var myEl = angular.element(document.querySelector('#divID')); My question is what is the difference between them?
The reason that angular.element('#divId'); is working is that angular.element is a reference to jQuery (as long as jQuery is also included in the project before Angular, otherwise the default is jQuery lite which comes with some limitations). The standard behavior when jQuery(queryString) is called is to return a jQuery-wrapped element list of element(s) matching the passed in queryString.
document.querySelector is a native browser API. Over time, browsers have implemented more and more APIs. One of jQuery's goals is compatibility with many browsers, and it allowed one to select elements with a query selector before many browsers had implemented the native document.querySelector.
As you can see at http://caniuse.com/#feat=queryselector - document.querySelector is now supported natively by all major browsers.
However, in your case, there is a third and arguably more efficient option since you avoid the browser having to parse the '#divID' string:
var myEl = angular.element(document.getElementById('divID')); // note no # 
var myEl = angular.element( '#divID'); is working
find() method in jQuery accepts any kind of selectors, in jQlite you can only provide elements tagsThe reason why it's working also in the first way is that you included jQuery before AngularJS, so actually when you call angular.element angular returns to you an instance of $, and you are able to use angular.element with selectors too.
Otherwise AngularJS has a built-in version of jQuery that is jQlite, and you need to pass the HTML element inside angular.element in order to get back a jQlite object, that is a standard jQlite object with some more properties added by AngularJS.
This snippet includes jQuery after AngularJS. In this case that selector doesn't work.
console.log(angular.element('#test'));<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"> ciao </div>This snippet includes jQuery before instead, and the selector actually works:
console.log(angular.element('#test'));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div id="test"> hello </div>p.s. I don't know if it is an issue with the actually code snippet engine here in stack overflow, because I usually use angular.element passing the HTML element, but I noticed a really decrease of performances using directly the selector with angular.element. The following snippet will use the angular.element passing the HTML even if jQuery is included before AngularJS, and it seems to run really really faster than the previous one. You can compare them. But again, maybe it just depends on the current snippet engine in SO
console.log(angular.element(document.querySelector('#test')));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div id="test"> hello </div>
angular.element( '#divID');. Are you sure that you really retrieve the element correctly?angular.elementis equivalent tojQuerybecause angular is built on top of jQuery.