What's the Difference Between jQuery Selector and DOM querySelectorAll()?

By Xah Lee. Date: . Last updated: .

What is the Difference Between jQuery Selector and DOM querySelectorAll()?

As of , all major browsers have querySelectorAll() method. For example:

let myList = document.querySelectorAll("span.x, span.y");

[see DOM: Get Elements by ID, Tag, Name, Class, CSS Selector]

So, why use jQuery?

• Internet Explorer 8 or before does not fully support querySelectorAll(css_selector) [see CSS Selector Syntax]

• The array-like object returned by $(…) is more powerful than the array-like object (a NodeList) returned by querySelectorAll(…). [see JS: Array-Like Object], because:

jQuery selector returns a special jQuery object. This object, has methods that work with html elements. All of them work on the result, by simply using the dot syntax of property access (aka chaining), and they apply to each element without needing to use map or for loop.

querySelectorAll(…) return a HTMLCollection, which is not a true JavaScript array, so you can't use array methods on them directly, such as querySelectorAll(…).map(…). [see JS: Array-Like Object to Array] [see DOM: NodeList vs HTMLCollection]

The disadvantage of using jQuery is speed and bloat.

back to jQuery Tutorial by Example

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc