Skip to content

Instantly share code, notes, and snippets.

@asbjornenge
Last active December 31, 2015 22:29
Show Gist options
  • Save asbjornenge/8053774 to your computer and use it in GitHub Desktop.
Save asbjornenge/8053774 to your computer and use it in GitHub Desktop.
Nanodom.js - a very small dom manipulation library.
define([], function() {
function dom() {}
dom.prototype = new Array;
dom.prototype.append = function(element) { element.map(function(e) { this[0].appendChild(e) }.bind(this)); return this}
dom.prototype.remove = function() { this.map(function(e) {e.parentNode.removeChild(e)}); return this}
dom.prototype.prepend = function(element) { element.map(function(e) { this[0].insertBefore(e, this[0].childNodes[0]) }.bind(this)); return this}
dom.prototype.empty = function(elements) { this.map(function(e) { e.innerHTML = ""}); return this}
dom.prototype.addClass = function(classes) { this.map(function(e) { e.className += ' '+classes}); return this}
dom.prototype.removeClass = function(classes) {
this.map(function(e) {
e.className = e.className.split(' ').reduce(function(prev, cls) {
return (classes.indexOf(cls) < 0) ? prev.concat(cls) : prev;
},[]).join(' ');
})
return this
}
function domify(str) { var d = document.createElement('div'); d.innerHTML = str; return d.childNodes }
return function(selector) {
if (selector instanceof dom) return selector
if (selector instanceof HTMLElement) {var d = new dom(); d.push(selector); return d}
if (typeof selector !== 'string') return
var s, d=new dom(), c=(selector.indexOf('<') == 0);
s = c ? domify(selector) : document.querySelectorAll(selector);
[].slice.call(s).map(function(e) {d.push(e)})
return d
}
})
define(['chai','nanodom'], function(chai, dom) {
var assert = chai.assert;
describe('NANODOM', function() {
it('Can query by css selectors', function() {
var element = dom('#mocha')
assert.equal(element.length, 1)
})
it('Can create dom elements from a string', function() {
var element = dom("<h1>eple</h1>")
assert.equal(element[0].tagName, 'H1')
})
it('Can create nested dom elements from a string', function() {
var element = dom("<div><h1>eple</h1></div>")
assert.equal(element.length, 1)
assert.equal(element[0].childNodes.length, 1)
})
it('Can create sibling dom elements from a string', function() {
var element = dom("<li>one</li><li>two</li>")
assert.equal(element.length, 2)
})
it('Can append to other dom elements', function() {
var element = dom("<h1 class='heading'>eple</h1>")
dom("#mocha").append(element)
var heading = dom('.heading')
assert.equal(heading.length, 1)
heading.remove()
})
it('Can prepend to other dom elements', function() {
var element = dom("<h1 class='heading'>eple</h1>")
dom("#mocha").prepend(element)
assert.equal(dom("#mocha")[0].firstChild, element[0])
element.remove()
})
it('Can empty an element', function() {
var container = dom('<ul id="epleKake"></ul>')
container.append(dom('<li>eple</li>'))
container.append(dom('<li>eple</li>'))
container.append(dom('<li>eple</li>'))
assert.equal(container[0].childNodes.length, 3)
container.empty()
assert.equal(container[0].childNodes.length, 0)
container.remove()
})
it('Can add classes', function() {
var element = dom('<div></div>').addClass('eple');
dom('body').append(element)
assert.equal(dom('.eple').length, 1)
element.remove()
})
it('Can remove classes', function() {
var element = dom('<div class="eple kanon"></div>').removeClass('kanon');
dom('body').append(element)
assert.equal(dom('.kanon').length, 0)
element.remove()
})
})
})
@educastellano
Copy link

What about using the "classList" attribute in addClass() and removeCass()?

e.classList.add('eple')
e.classList.remove('eple')

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment