
Show HN: Super DOM, manipulate the DOM like it's 2016 - franciscop
https://superdom.site/
======
yladiz
This is actually really cool, and I'd be interested in performance of this
versus something like jQuery. That said, this is really only for really modern
browsers as it uses a proxy which can't be polyfilled. For smaller projects
that aren't as worried about browser compatibility, it seems like a great tool
that allows for very expressive code (you can access dom['a.button'] to get
all of the a.button tags in the dom, for example, or dom.a for all of the a
tags).

------
fiatjaf
I hope no one says this is just a way of creating bloat. I would say to this
people: go complain of jQuery if you have the guts for it.

This thing is beautiful and, at least for small projects, lifesaving.

(or it seems to be.)

------
shakna
I love this.

It feels like how the DOM API should have been implemented.

And minified its about 4kb. Though I hate website bloat, this doesn't feel so
bad.

When it stabilises, I'd definitely use it.

~~~
tveita
> It feels like how the DOM API should have been implemented.

It doesn't look general enough to be a general-purpose API, for instance how
would you look up an attribute on all <class> elements?

I tend to think of APIs like this as "application-grade". You could use it
fine in the context of an application, where you know you will never have a
DOM element named 'class' or any other edge case inputs, but you shouldn't
build abstractions on top of it, because sooner or later a user will have an
element named 'id', 'class' or 'attr', and your code will break.

The DOM API is verbose but explicit and consistent, you can write libraries
like this without worrying much about leaking abstractions due to edge cases.

~~~
shakna
Not sure if it's implemented in superdom but:

    
    
        for(i = 0; i < dom.class.<class>.length; i++) {
          console.log(dom.class.<class>[i].<attr>);
        }
    

The DOM API _isn 't_ consistent, and that's what I hate about it.

Compare:

Creating an element:

    
    
        var newDiv = document.createElement("div");
        body.appendChild(newDiv);
    

Deleting an element:

    
    
        var element = document.getElementById("element-id");
        element.parentNode.removeChild(element);
    

Why does an element know how to remove its children but not itself?

Superdom:

    
    
        delete dom.id.element-id
    

Sure, there are some edge cases and roughness here, but its a library, not
something curated and argued over by the various browsers until something
roughly compliant appears.

------
nenadg
Very natural way of working with DOM. Very beautiful :-).

