My favorite is this comparison for checking whether an element is hidden:

    $(el).is(':hidden')

vs.

    !(el.offsetWidth || el.offsetHeight || el.getClientRects().length)

DOM API has other problems like lack of chaining which forces you into a very imperative style of programming, e.g.:

    $(".alert").hide();

vs.

    for (const el of document.querySelectorAll(".alert")) {
         el.style.display = 'none';
    }

I've never had a case where I didn't know the reason or mechanism by which an element would be hidden. In my code, I use the `hidden` property. In that case it simplifies from

    $(el).is(':hidden')

to

    el.hidden

It's not quite as succint as your jquery, but you also could have written this.

    document.querySelectorAll(".alert").forEach(el => el.hidden = false);

Is it less imperative? I mean I guess it doesn't have an explicit loop, but I don't really see why that's good or bad.

> I've never had a case where I didn't know the reason or mechanism by which an element would be hidden.

Unfortunately, I usually don't keep the whole codebase in my head (including libraries), so I often don't know the reason.

The more general point is that I don't want to have to know, because the mechanism of how it is hidden is not what I care about.

> It's not quite as succint as your jquery, but you also could have written this.

Yes, it's more than three times as long as the jQuery variant.

Ok, I get it. Fair points. I'm not a jquery hater. In a lot of cases, I'd rather write jquery than react for instance.

jQuery has a fluent interface and often shorter/smaller/more convenient APIs on top of that.

DOM APIs are quite literally 90s era Java-style APIs.

While DOM APIs have pulled in a few niceties over the years, some of them are really anemic (e.g. querySelectorAll does not return a proper Array-like object). Worse is combining them. Almost every API is a single-shot tedious step-by-step chore.