[codazoda]

That's actually a good example. My gut feeling was simply to write the following.

document.getElementsByClassName("my-class")[0].style.display = 'block';

The PlainJS site mentions that it's not quite that simple and suggests writing your own show() and hide() functions if you're avoiding jQuery.

https://plainjs.com/javascript/effects/hide-or-show-an-eleme...

[taco_emoji]

It's like a corollary to Greenspun's Tenth Rule [0], in that anytime I try to do something in vanilla JS, I just end up poorly re-inventing half of JQuery just to do it.

[0] https://en.wikipedia.org/wiki/Greenspun%27s_tenth_rule

[franciscop]

I ended up reinventing most of jQuery: https://umbrellajs.com/

But it was fun and I learned a lot, so there is that.

[collinmanderson]

Right, and that still doesn't handle applying the action to all _all_ items of that class.

It would need to be something like this, though it still doesn't automatically handle inline vs block:

document.querySelectorAll('.my-elements').forEach(function(el){el.style.display = 'block'})

And apparently there are issues even with that: https://css-tricks.com/snippets/javascript/loop-queryselecto...

[kibibu]

Ok, I kinda got sniped on this. Here's a first pass at a micro lib to do it using Proxy object:

    const $ = (() => {
        function listProxy(arr) {
            return new Proxy(arr, {
                set: (t, p, v, r) => {
                    for(let x of t) {
                        x[p] = v;
                    }
                },
                get: (t, p, r) => {
                    if(t.length > 0 && t[0][p] instanceof Function) {
                        return (...args) => { Array.prototype.map.call(t, (x) => x[p](args)) };
                    } else {
                        return listProxy( Array.prototype.map.call(t, (x) => x[p]) );
                    }
                }
            })
        }

        return (sel, root) => {
            if(root === undefined) root = document;
            return listProxy(root.querySelectorAll(sel));
        }
    })();

    // use like this:
    $('.my-elements').className = 'Important'; 
    $('.my-elements').style.color = 'Red';     
    $('.my-elements').classList.add('Another');

demo: https://codepen.io/anon/pen/RxGgNR

[exizt88]

For reference, this is how you do this in jQuery: $('.my-elements').show()

[bijection]

To make that work for all elements of that class, you could rewrite it as

  document.querySelectorAll('.myclass')
    .forEach(el => el.style.display = 'block')

The jQuery is still shorter, but the vanilla js is definitely manageable.

[tracker1]

  Array.from(document.querySelectorAll('.myclass'))
    .forEach(el => el.style.display = 'block')

[collinmanderson]

Though ie11 doesn't have Array.from()

[bonesss]

Hrmmm... maybe someone should make a library that would smooth over browser differences and provide a consistent element selection syntax? Call it JavascriptSelection, or jSelection?

[emergie]

imho 'JavascriptQuery' or 'jQuery' sounds better, oh wait...

[tracker1]

I tend to polyfill older browsers, Array.from is a pretty small one. Sad thing is at a point where it's probably worth it to have 2-3 builds in place... 1 for legacy browsers, one for modern without modules, and one for modules/import/http2 support.

Just haven't taken the time... at least the main app I work on at work doesn't need to support IE11. Latest Edge,, Firefox, Safari and Chrome ... and Chrome is the primary target.

[no_gravity]

Unfortunately, querySelectorAll returns a NodeList, not an Array. So you cannot use forEach() on it.

[hawkice]

NodeList also implements forEach:

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/fo...

[collinmanderson]

It's a very recent addition. IE11 doesn't have it for sure.

[no_gravity]

Not in Edge though.

[hawkice]

The page I linked has a compatibility chart that says Edge 16 has it (no idea if that's a planned release, haven't ever used Edge).

[darepublic]

You can use Array.prototype.forEach.call(nodelist, fn), or Arrays.from(nodelist).forEach

[aplummer]

This comment is actually a fantastic example of why jQuery is so popular.

Missing:

[krapp]

Unfortunately, document.getElementsByClassName isn't universally supported[0], so even if you wanted to do it that way, it still wouldn't be that easy. Never is.

[0]https://caniuse.com/#feat=getelementsbyclassname

[drinchev]

In this specific case jQuery's `show` is just giving you a shortcut to show/hide arbitrary elements.

Try doing this with CSS, please.

    <div class="element"></div>

    .element { display: block; }
    .element.is-hidden { display: none; }

    document.getElementsByClassName("element")[0].classList.add( "is-hidden" );

You should never ask yourself "How can I accomplish that without jQuery", but rather "What would be the best way to do it!"