IIRC jQuery started out using string parsing to achieve this but its widespread use prompted browser vendors to add the document.querySelector and document.querySelectorAll methods to their browsers.
Probably in older browsers it still uses the old method but for modern browsers it just passes [selctor] in $("[selector]") through document.querySelectorAll; no string parsing necessary.
I think querySelector and querySelectorAll are simply more generic versions of the traditional approach of using getElementById and getElementsByTagName, but it's possible that the greater versatility of $ influenced the later design of querySelector, indeed. Then again, it was not a jab at jQuery, which proved to be a fantastic tool for a decade in the field of web development.
Yes "document.querySelectorAll(selector)" is a bit verbose, but jQuery API is no better, do you know what would "$(selector)" actually do? You can't - it depends on what "selector" is.
The most visible part of jQuery for me was always querying selectors - $('.some > a.selector'); and that certainly was something integrated into HTML/the DOM as document.querySelectorAll('.some > a.selector').
I never used jquery since I never got very seriously into web development until recently but document.querySelector() seems to be about a nice a function for querying DOM elements as you could want.
jQuery first came-out long before browsers had querySelector: it used a 100% JS reimplementation of a CSS selector parser and evaluator, which was eventually spun-off into its own library: Sizzle.js: https://github.com/jquery/sizzle - Surprisingly, jQuery didn't fully remove Sizzle until 2019 ( https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/ ) - if that seems surprisingly recent, don't forget that querySelector wasn't added to the DOM API until 2013 - with only IE11 supporting it: some places were still using even IE6 well past then, so it makes sense for jQuery to support it for so long.
So using newer CSS selector features, like attribute value selectors, will work fine in post-Sizzle jQuery versions.
ha, i just went through this today, querySelectorAll returns a NodeList, which is static rather than live, requiring you to iterate through the list rather than acting on the elements directly.
but it's nice that jquery (as convenient as it is) is no longer a must-have library for dom manipulation.
Of course. My main point wasn't the use of querySelector per se, but the ability to access the exact DOM element(s) you need without crazy querying or traversal.
While the DOM API isn't perfect by any means, and jQuery fills that gap really well, there are still times where the OOP nature of the DOM gets you exactly what you want with minimal faff.
The other problem is the relative obscurity of it thanks to jQuery and crowd-sourced DOM documentation (via MDN).
I guess it's easier to remember $ than queryselectorall . I recently realised most of its methods are now natively supported. I think people who don't use js a lot may not realise that.
jQuery might use querySelectorAll for its selector, but also looks for basic patterns and optimizes them by using things like getElementBy* eg. $("#test") will use getElementById behind the scenes, not querySelectorAll.
I recall reading that element.querySelector(All) was inspired by jQuery. If true, it means jQuery was so much of a success that parts of it were implemented natively in browsers!
(I couldn't confirm this by googling, so if anyone can confirm or deny that this is the case I'd love to know!)
document.querySelector was not available in IE 6 and 7.
Dealing with those versions was where jQuery really earned its spot in the JS universe. It was a lot to remember where all the quirks were and the incantations to work around them.
> jQuery selectors were matched in native JS by `document.querySelector()` and `document.querySelectorAll()`
Funny how the first words of your statement are completely negated by the last half of your statement.
jQuery:
$(<any selector>).anyfunction
This will work regardless of the number of elements returned by the selector: 0, 1, or any number.
The so called matching `document.querySelector()` and `document.querySelectorAll()` cannot come even close to the ease of use of jQuery's selectors.
`document.querySelector` returns one element only. It will be the first element matched, even if you have more.
`document.querySelectorAll` returns a pseudo-array of elements (in reality a NodeList) that lacks most of functionality of arrays, and you cannot apply any DOM functions to it without iterating through the entire list.
jQuery came out in 2006. It took w3c several years after that to come up with something resembling jQuery's selection function. 11 years later there's still not a single method in the entire DOM API that comes even close to jQuery's simplicity and expressiveness.
Probably in older browsers it still uses the old method but for modern browsers it just passes [selctor] in $("[selector]") through document.querySelectorAll; no string parsing necessary.
reply