Last active
December 31, 2015 22:29
-
-
Save asbjornenge/8053774 to your computer and use it in GitHub Desktop.
Nanodom.js - a very small dom manipulation library.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | |
}) | |
}) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What about using the "classList" attribute in addClass() and removeCass()?