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.
var 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:
var 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.
