dom101

dom101

DOM manipulation utilities as single-files.
aka: Stop using jQuery.

var addClass = require('dom101/add-class');

el = document.createElement('div');
addClass(el, 'active');

Why?

If you're writing a frontend library, it's best to avoid a dependency on jQuery. This means having to write your own DOM manipulation code, though.

To speed you along, I've packaged all that typical DOM manipulation code into many single-use JS files.

• Slim builds: you can use browserify to make your final bundle and it will only bundle the functions it needs, instead of bundling a monolithic jQuery.

• Copy-pastable: if you don't want to include dom101 as a dependency, each file (example) stand on their own and can be easily pasted into your project.

• Semi-legacy support: Minimum browser supported is IE8.

dom101 follows the conventions of 101.

Reference

jQuery	dom101
$(el).addClass('...')	addClass(el, '...')
$(el).hasClass('...')	hasClass(el, '...')
$(el).removeClass('...')	removeClass(el, '...')
$(el).toggleClass('...')	toggleClass(el, '...')
$(el).remove()	remove(el)
$(el).text()	text(el)
$(el).text('...')	text(el, '...')
$(el).on('click', fn)	on(el, 'click', fn)
$(fn)	ready(fn)
$(document).ready(fn)	ready(fn)
$(el).prepend(child)	prepend(el, child)
$(el).trigger('click')	trigger(el, 'click')
$(el).closest('selector')	closest(el, 'selector')
$(el).is('selector')	matches(el, 'selector')

Non-DOM utilities

jQuery	dom101
$.each(list, fn)	each(list, fn)
$.map(list, fn)	map(list, fn)
$.extend(...)	extend(...)
$.extend(true, ...)	deepExtend(...)
$.isPlainObject(obj)	isPlainObject(obj)

Aliases

Some aliases for DOM functions are also added for convenience.

DOM	dom101
document.querySelector(...)	querySelector(...)
document.querySelectorAll(...)	querySelectorAll(...)

Not implemented

Some DOM helpers aren't implemented, because they're easy enough to do with plain DOM API:

jQuery	DOM
$('...')	document.querySelectorAll('...')
$(el).attr('tabindex')	el.getAttribute('tabindex')
$(el).attr('tabindex', 3)	el.setAttribute('tabindex', 3)
$(el).css('border-radius', '3px')	el.style.borderRadius = '3px'
$(el).html()	el.innerHTML
$(el).html('...')	el.innerHTML = '...'
$(el).parent()	el.parentNode
$(el).clone()	el.cloneNode(true)
$(el).children()	el.children
$el.find('...')	el.querySelectorAll('...')
$el.blur()	el.blur()
$el.focus()	el.focus()
$el.append(child)	el.appendChild(child)
$el.prop('checked')	el.checked
$el.prop('checked', true)	el.checked = true
$el.prop('disabled')	el.disabled
$el.prop('disabled', true)	el.disabled = true

Install

dom101 is available via npm. Perfect for use with browserify.

$ npm install --save dom101

API Reference

addClass

addClass(el, className)

Adds a class name to an element. Compare with $.fn.addClass.

var addClass = require('dom101/add-class');

addClass(el, 'active');

closest

closest(el, selector)

Looks for the closest ancestor of element el that matches selector. Compare with $.fn.closest.

var closest = require('dom101/closest');

closest(input, 'label');

deepExtend

deepExtend(dest, src1, [src2 ...])

Extends object dest with properties from sources src. Compare with $.extend(true).

Also consider [node-extend] for more complicated cases. [node-extend]: http://npmjs.com/node-extend

var deepExtend = require('dom101/deep-extend');
deepExtend({}, defaults, options);

each

each(list, fn)

Iterates through list (an array or an object). This is useful when dealing with NodeLists like document.querySelectorAll.

var each = require('dom101/each');
var qa = require('dom101/query-selector-all');

each(qa('.button'), function (el) {
  addClass('el', 'selected');
});

extend

extend(dest, src1, [src2 ...])

Extends object dest with properties from sources src. Compare with $.extend.

Also consider [node-extend] for more complicated cases. [node-extend]: http://npmjs.com/node-extend

var extend = require('dom101/extend');
extend({}, defaults, options);

hasClass

hasClass(el, className)

Checks if an element has a given class name.

var hasClass = require('dom101/has-class');

el.className = 'selected active';
hasClass(el, 'active') //=> true

isPlainObject

isPlainObject(obj)

Checks if obj is an object created with {} or new Object. Compare with $.isPlainObject.

var isPlainObject = require('dom101/is-plain-object');

isPlainObject({}) //=> true
isPlainObject([]) //=> false

map

map(list, fn)

Iterates through list (an array or an object).

var map = require('dom101/map');
var text = require('dom101/text');

map(qa('.button'), function (el) {
  return text(el);
});

matches

matches(el, selector)

Checks if a given element el matches selector. Compare with $.fn.is.

var matches = require('dom101/matches');

matches(button, ':focus');

on

on(el, event, fn)

Adds an event handler.

var on = require('dom101/on');

on(el, 'click', function () {
  ...
});

prepend

prepend(el, child)

Prepends a child into a parent el. Compare with $.fn.prepend.

var prepend = require('dom101/prepend');

prepend(el, child);

querySelectorAll

querySelectorAll(query)

Convenience function to access document.querySelectorAll.

var each = require('dom101/each');
var qa = require('dom101/query-selector-all');

each(qa('.button'), function (el) {
  addClass('el', 'selected');
});

querySelector

querySelector(query)

Convenience function to access document.querySelector.

var q = require('dom101/query-selector');
addClass(q('#instructions'), 'hidden');

ready

ready(fn)

Executes fn when the DOM is ready.

var ready = require('dom101/ready');

ready(function () {
  ...
});

removeClass

removeClass(el, className)

Removes a classname.

var removeClass = require('dom101/remove-class');

el.className = 'selected active';
removeClass(el, 'active');

el.className
=> "selected"

remove

remove(el)

Removes an element from the DOM.

var remove = require('dom101/remove');

remove(el);

scrollTop

scrollTop()

Returns the scroll top value.

var scrollTop = require('dom101/scroll-top');
alert(scrollTop());

text

text(el, [value])

Sets or gets text. Compare with $.fn.text.

var text = require('dom101/text');

text(el, 'Hello');

text(el)
=> "Hello"

toggleClass

toggleClass(el, className, [value])

Adds or removes a class name to an element. If value is provided, this will add the class if it's true or remove if it's false. Compare with $.fn.toggleClass.

var toggleClass = require('dom101/toggle-class');

// toggles on or off:
toggleClass(el, 'active');

// with a value:
var isSelected = true;
toggleClass(el, 'selected', isSelected);

trigger

trigger(el, event)

Triggers an event event. Only works for native events.

var trigger = require('dom101/trigger');

el = document.querySelector('#button');
trigger(el, 'click');

Similar projects

• jQuery (of course)
• youmightnotneedjquery.com — actually takes a bunch of code from here
• 101
• bonzo

Thanks

dom101 © 2014+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz