I'm not sure how you took my remarks as a criticism of jQuery, as it's likely because of them that selectors were approached from said angle at all.
Anyway it's pretty simple to emulate the jQuery selectors' syntax elegance.
eg. from a link I posted below. This would produce similar results to jQuery selectors (minus backwards compatibility for older versions of IE).
-- Note if you try to use vanilla JS methods on a jQuery-selected element you will have to target which of the selected elements you want to act upon. It will return undefined for the selected element and throw an error if you try to, for instance `$('p').innerHTML = 'something';`:
class DOM {
constructor ( selector ) {
let elements = document.querySelectorAll(selector);
this.length = elements.length;
Object.assign(this, elements);
}
each ( callback ) {
for (let el of Array.from(this) ) {
callback.call(el);
}
return this;
}
on( eventType, callback ) {
this.each(function() {
this.addEventListener( eventType, callback, false );
});
}
}
let $ = s => new DOM(s);
$('#something').on('click', e => console.log(`Hello, event: ${e}`) );
> I'm not sure how you took my remarks as a criticism of jQuery
I was replying to this statement:
"jQuery selectors were matched in native JS by `document.querySelector()` and `document.querySelectorAll()`"
> it's likely because of them that selectors were approached from said angle at all.
This is true :)
> This would produce similar results to jQuery selectors (minus backwards compatibility for older versions of IE).
It doesn't though. There are many more useful methods in jQuery, and you will eventually need to re-implement many of them. (Even such simple once as `.class()` or `.toggleClass()`, or `.attr()`, or `append()`, and many others).
It seems we're confounding the original question, then. My point more succinctly was, if you use only a select number of methods from jQuery, it would not be hard to emulate the syntax using modern JS methods and wrapping them in a small bit of logic in a much smaller file size than including jQuery itself. If size is an issue -- for some, it is. Current JS has made up for a lot of what jQuery originally was intended to fulfill (and again, most likely because of jQuery). And if it's just a syntactic reference, it's really easy to employ the same standard throughout your app with a pretty simple helper class.
edit: I extended the above example to include some of the methods you mentioned, just for kicks. The append() function was the most difficult, but only because I had to figure out how to grab the child function's selector argument. I just had to bind the initial argument to the object in the constructor. It was a fun little challenge. I'm likely missing some functionality of it, but I was going for quick and dirty implementation as simply as I could make it.
> if you use only a select number of methods from jQuery, it would not be hard to emulate the syntax using modern JS methods and wrapping them in a small bit of logic in a much smaller file size than including jQuery itself.
Question is: but why? :) What you do is basically re-implemeting jQuery with an untested code which is largely an unknown quantity. Whereas jQuery has countless little snippets like "We can't cloneNode fragments that contain checked, in WebKit"[1] any "simple, quick, dirty implementation" will not have that.
It's better to use a "select number of methods from jQuery" directly from jQuery than spend any time re-implementing them anew and missing multiple details that jQuery has accumulated over the years. Even is size is an issue. If it really really is an issue, the best approach is to actually extract relevant code from jQuery and not re-implement it.
My original point was: nothing in DOM APIs matches jQuery functionality. All attempts to prove anything otherwise only reinforce my point.
Anyway it's pretty simple to emulate the jQuery selectors' syntax elegance.
eg. from a link I posted below. This would produce similar results to jQuery selectors (minus backwards compatibility for older versions of IE).
-- Note if you try to use vanilla JS methods on a jQuery-selected element you will have to target which of the selected elements you want to act upon. It will return undefined for the selected element and throw an error if you try to, for instance `$('p').innerHTML = 'something';`: