Use jQuery's selector engine on vanilla DOM nodes

There are cases when you need to select DOM elements without jQuery, such as:

• when jQuery is not available
• when your code is is extremely performance-sensitive
• when you want to operate on an entire HTML document (which is hard to represent as a jQuery collection).

To select descendants of a vanilla DOM element (i.e. not a jQuery collection), one option is to use your browser's native querySelector Show archive.org snapshot and querySelectorAll Show archive.org snapshot functions.

Copyvar container = document.body.querySelector('.container');
var openTasks = container.querySelectorall('.task.open');

While these functions are supported on all modern browsers Show archive.org snapshot , they won't understand jQuery's non-standard but awesome selectors Show archive.org snapshot such as :has Show archive.org snapshot or :visible Show archive.org snapshot .

What you can do instead is to use Sizzle Show archive.org snapshot , the selector engine that is embedded into jQuery. jQuery.find (or $.find) is an alias for the Sizzle(...) function Show archive.org snapshot , which you can use to select descendants from a vanilla DOM node:

Copyvar container = $.find('.container', document.body)[0];
var openTasks = $.find('.task.open', container);

Note that Sizzle returns vanilla DOM nodes in a vanilla Javascript array. It does not return jQuery collections.