jQuery Selector vs 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 x = 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(). 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 a Array-Like Object . you have to use map or loop and apply functions to do things.

see

The disadvantage of using jQuery is slower and bloat.

back to jQuery Tutorial by Example

JS in Depth
XAH  BUY NOW

JS in Depth

JS Obj Ref

DOM


DOM

Overview

Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc

jQuery

node.js