underdom

Underdom is a minimalist helper library to make writing vanilla javascript DOM manipulation just a bit easier with some chaining while still making it completely compatible with the vanilla DOM API.

Why ?

Sprinkle in the convenience of chaining common DOM methods in 855 bytes

Before (one element)

var el = document.createElement('div');
    el.style.display = 'inline-block';
    el.style.padding = '10px';
    el.className = 'blocky';
    el.setAttribute('data-showing', '1');
    el.addEventListener('click', function(e) {
        console.log('clicked', e);
    })
    document.body.appendChild(div);

After

var el = document.createElement('div')
    ._css({display: 'inline-block', padding: '10px'})
    ._attr({class: 'blocky', 'data-showing': '1'})
    ._on('click', function(e) {
        console.log('clicked');
    })
    ._appendTo(document.body);

Before (multiple elements)

var el1 = document.createElement('div');
for (var i=0; i<10; i++) {
    var subel = document.createElement('div');
    subel.style.display = 'inline-block';
    subel.style.padding = '10px';
    subel.style.width = '33%';
    subel.textContent = 'Box ' + (i+1);
    el1.appendChild(subel);
}
[].slice.call(el1.getElementsByTagName('div')).forEach(function(subel){
    subel.style.width = '50%';
})

After (multiple elements)

var el1 = document.createElement('div');
for (var i=0; i<10; i++) {
    // no variable created
    document.createElement('div')
    ._css({display: 'inline-block', padding: '10px', width: '33%'})
    ._text('Box '+(i+1))
    ._appendTo(el1);
}
el1.getElementsByTagName('div')._css({width: '50%'})

Where it shines!

underdom really shines when you are creating a lot of elements and trying to do things with them -- check this out!

document.body._html('')
for(i =0; i< 10; i++){
    document.createElement('div')._css({padding: '4px 10px'})
    ._append(
        document.createElement('label')
        ._append(
            document.createElement('input')._attr({type: 'checkbox'})._css({display: 'inline-block', 'vertical-align':'top'})._on('change', function(e){
                console.log('Option', (i+1), 'changed')
                e.target.parentNode.parentNode._css({'background-color': e.target.checked ? 'red' : 'blue'})
            })
        )
        ._append(
            document.createElement('span')._text('Option '+(i+1))._css({display: 'inline-block', 'vertical-align':'top'})
        )
    )
    ._appendTo(document.body)
}

Methods

Each of these methods returns the DOM node so they can be chained

| name | arguments | description | example | | --- | --- | --- | --- | | css | css | sets the style properties of the node(s) using an object with each style property as the key, similar to jquery but only supports objects | document.querySelectorAll('span')._css({background: 'red', 'font-size': '12px'}) | attr | attr | sets the attribute properties of the node(s) using an object with each attribute name as the key, similar to jquery but only supports objects | document.getElementsByTagName('input')._css({checked: true, 'data-color': 'blue'}) | text | text | sets the .textContent of the node(s) | document.getElementsByClassName('items')._text('Hello') | html | html | sets the .innerHTML of the node(s) | document.querySelectorAll('div[data-color="blue"]')._html('<span>hi</span>') | appendTo | target | appends the element to the target DOM node(s) | document.createElement('div')._html('<span>hi</span>')._appendTo(document.body) | append | child | appends child to the node(s) | document.body._append(document.createElement('div')._text('hello')) | on | ev, fn | does document.addEventLisenter(ev, fn) to the node(s) | document.getElementsByTagName('input')._on('change', function(e){ console.log('checked', e.target.checked); })

How to use this?

Option 1. paste the minified code into your project

Node.prototype.appendTo=function(t){return t.appendChild(this),this},Node.prototype.append=function(t){return this.appendChild(t),this},Node.prototype.text=function(t){return this.textContent=t||"",this},Node.prototype.html=function(t){return this.innerHTML=t||"",this},Node.prototype.css=function(t){for(var o in t)this.style.setProperty(o,t[o]);return this},Node.prototype.attr=function(t){for(var o in t)t[o]||0===t[o]?"boolean"==typeof t[o]?this[o]=t[o]:this.setAttribute(o,t[o]):this.removeAttribute(o);return this},Node.prototype.on=function(t,o){return this.addEventListener(t,o),this},NodeList.prototype.__proto__=Array.prototype;var methods=["css","attr","appendTo","append","text","html"];methods.forEach(function(t){NodeList.prototype[t]=HTMLCollection.prototype[t]=function(o,e){for(var r=this.length-1;r>=0;r--)this[r][t](o,e);return this}});

Option 2. RawGit

<script src="https://cdn.rawgit.com/pleaseshutup/underdom/master/dist/underdom.min.js"></script>

Option 3: ???

I don't ever use front-end bundlers so I need to be educated

License

MIT