Broadly speaking I agree with you, but even IE11 supports classList so the "native" version of your bit is really

    document.getElementById('somediv').classList.remove('class-to-be-removed')

Where the native APIs fall down is that

1. they tend not to be chainable/expression-oriented, you can't just `classList.add('foo').remove('bar').toggle('qux')` because the first two methods return `undefined` and the last one a boolean

2. they don't support set-oriented operations at all, it's a chore of manual iterations

Spot on! Those are probably the two most important blunt-sides of native APIs.

The last thing I'd want to see is a codebase going from 40 lines of code to 400 lines, because "hey, we removed jQuery and writing verbose js is the new cool these days"

I'd be happy if there's a jquery like polyfill library for DOM manipulation, but again - why not just custom jQuery builds and sizzle.js instead of re-inventing jQuery?

P.S I'm not sure IE11 supports classList. Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...

> P.S I'm not sure IE11 supports classList. Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/cla....

It provides basic support for classlist, add/remove/toggle exist and work as you'd expect. It does not have complete supports of all bits of the API:

* it doesn't support the second argument to toggle so you have to use a conditional/ternary with add/remove

* it doesn't support passing multiple classes to add/remove

* it doesn't support replace

IE11 supports classList just fine, except for an argument to toggle. Nothing a little DOMTokenList.prototype change can't fix.

> The last thing I'd want to see is a codebase going from 40 lines of code to 400 lines, because "hey, we removed jQuery and writing verbose js is the new cool these days"

That will only happen if you're incompetent and will not write a few simple helper functions. And probably not even then. Plain DOM API is not that verbose over jQuery. Anyway, just look at what subset of jQuery you use the most and write helpers for that.

Your codebase is already grown by 1000s of lines by using jQuery, so you have quite a head start sizewise if you drop jQuery.

Another tweet says that removing chaining improved readability...

https://twitter.com/mislav/status/1022409388013834240

But this I'd say is very close to BS territory..

It was me, who asked him the question. The answer though isn't satisfactory enough. But again 140 chars is not a good bandwidth for meaningful conversations.

The claim is interesting, but isn't evident enough.

For example, how exactly is

    var element = document.querySelectorAll('.container') 
    element.style.paddingTop = "50px"; 
    element.className = element.className + 'header';

communicating intent better than:

    $('.container').css('padding-top','50').addClass('header')

While I do agree in your comparison the second version looks better. At the same time, and this might be a tad too subjective to have much merit, it feels out of place to me.

Instead, I'd use one of the various approaches where I can create a style = {} object and then apply it to the element, which would just fit better within the rest of my javascript.

(which particular approach to use, .cssText, looping through props, or Object.assign, I'm not sure, but my point is any approach that applies a POJO to the node instead of chaining strikes me as more idiomatic. this is not a hill I'd die on though...)

I wonder how many people will notice that your non-jQuery example actually contains a subtle bug.

Re 2.:

el.querySelectorAll('abc').map(el => ...)...

You may need to copy some methods you'd like to use from Array.prototype to NodeList.prototype though, or use .values() from NodeList everywhere.

That's manual iteration even if it's done via HoF.

Many of jQuery's operations implicitly apply to the entire nodeset regardless of the nodeset's arity.

Fair point, though for dynamic and large DOMs I dislike having to go and check whether I’m touching more than one element sometimes — not always though, sometimes it great to just $(‘#bleh’).hide() or what have you! Depends really

That's completely fair, and there are cases where unknowingly selecting and applying complex operations to many nodes is problematic but I think it's a great baseline/default regardless.

I usually add: const qs = (selector) => [...document.querySelectorAll(selector)]

so that I can tread my results as a normal array.

https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... ;)

[Same Link] You can see how poor the browser support is and how big the polyfill is. There's a chance that the polyfill could be bigger than jQuery's removeClass/addClass implementations.