× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Wrapping a DOM element in angular.element without using jQuery

Michael Perrenoud
Feb 21, 2015
<p>Let's say you're in a situation where AngularJS is loaded but jQuery isn't. You'd like to get to the jqLite features to do something basic, but you don't have jQuery to query the DOM. One approach would be something like this:</p> <pre><code class="language-javascript">var domElement = document.querySelector('.class-name'); // alternate: document.querySelector('#element-id'); var $domElement; if (domElement) { $domElement = angular.element(domElement); }</code></pre> <p>Now the <code>$domElement</code> is wrapped in jqLite!</p> <h2>Caveats</h2> <p>There are some caveats with this approach. Here are some notes I'd like to highlight from the <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector">MDN documentation</a> for the <code>querySelector</code> API:</p> <blockquote> <ul> <li>Returns <code>null</code> if no matches are found; otherwise, it returns the first matching element.</li> <li>If the selector matches an ID and this ID is erroneously used several times in the document, it returns the first matching element.</li> <li>Throws a <code>SYNTAX_ERR</code> exception if the specified group of selectors is invalid.</li> <li><code>querySelector()</code> was introduced in the Selectors API.</li> <li>The string argument pass to <code>querySelector</code> must follow the CSS syntax.</li> <li>CSS Pseudo-classes will never return any elements, as specified in the <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors API</a></li> <li>To match ID or selectors that do not follow the CSS syntax (by using a colon or space inappropriately for example), you must escape the character with a back slash. As the backslash is an escape character in JavaScript, if you are entering a literal string, you must escape it <em>twice</em> (once for the JavaScript string, and another time for querySelector)</li> </ul> </blockquote> <p>I'd like to just put a few notes in about the caveats that I highlighted in bigger text above:</p> <ul> <li><span style="color:rgb(95, 99, 102)"><strong>the first matching element:</strong> the important part here to understand is that you're <strong>never</strong> going to get back an array of items. The browser API's are not built or required to do so. Also keep in mind that the <code>id</code> attribute was built to be used <strong>once in the DOM</strong>, the browsers <strong>enforce that</strong> when returning elements to you. You always get the <strong>first matching element</strong>.</span></li> <li><span style="color:rgb(95, 99, 102)">CSS Pseudo-classes will never return any elements: this is a big one. This means you can't run a selector like <code>input:first</code> to find the first input element in the DOM. To focus it for example. To get at this element you'll want to leave yourself a little cookie in the DOM by building a custom class named <code>first-input</code> and searching for that instead.</span></li> </ul> <p>Until next time, happy coding! </p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus