DOM manipulation utilities
dom101 is a set of utilities for manipulating the DOM as single files.
aka: Stop using jQuery.
var addClass = require('dom101/add-class');
el = document.createElement('div');
addClass(el, 'active');
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 fully-supported is IE8, with most of the utilities working with even older IE versions.
dom101 loosely follows the conventions of 101.
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).before(newEl) |
before(el, newEl) |
$(el).after(newEl) |
after(el, newEl) |
$(el).on('click', fn) |
on(el, ‘click’, fn) |
$(fn) |
ready(fn) |
$(document).ready(fn) |
ready(fn) |
$(document).height() |
documentHeight() |
$(document).width() |
documentWidth() |
$(el).outerHeight() |
outerHeight(el) |
$(el).outerWidth() |
outerWidth(el) |
$(el).prepend(child) |
prepend(el, child) |
$(el).trigger('click') |
trigger(el, ‘click’) |
$(el).closest('selector') |
closest(el, ‘selector’) |
$(el).is('selector') |
matches(el, ‘selector’) |
jQuery | dom101 |
---|---|
$.each(list, fn) |
each(list, fn) |
$.map(list, fn) |
map(list, fn) |
$.extend(...) |
extend(…) |
$.extend(true, ...) |
deepExtend(…) |
$.isPlainObject(obj) |
isPlainObject(obj) |
Some aliases for DOM functions are also added for convenience.
DOM | dom101 |
---|---|
document.querySelector(...) |
querySelector(…) |
document.querySelectorAll(...) |
querySelectorAll(…) |
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 |
dom101 is available via npm. Perfect for use with browserify.
$ npm install --save dom101
addClass(el, className)
Adds a class name to an element. Compare with $.fn.addClass
.
var addClass = require('dom101/add-class');
addClass(el, 'active');
after(el, newEl)
Inserts a new element newEl
just after el
.
var after = require('dom101/after');
var newNode = document.createElement('div');
var button = document.querySelector('#submit');
after(button, newNode);
before(el, newEl)
Inserts a new element newEl
just before el
.
var before = require('dom101/before');
var newNode = document.createElement('div');
var button = document.querySelector('#submit');
before(button, newNode);
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(dest, src1, [src2 ...])
Extends object dest
with properties from sources src
.
Compare with $.extend(true).
Also consider deep-extend.
var deepExtend = require('dom101/deep-extend');
deepExtend({}, defaults, options);
documentHeight()
Returns the height of the document.
Compare with jQuery’s $(document).height()
.
var documentHeight = require('dom101/document-height');
var height = documentHeight();
documentWidth()
Returns the width of the document.
Compare with jQuery’s $(document).width()
.
var documentWidth = require('dom101/document-width');
var width = documentWidth();
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(dest, src1, [src2 ...])
Extends object dest
with properties from sources src
.
Compare with $.extend.
Also consider object-assign and the built-in Object.assign
.
var extend = require('dom101/extend');
extend({}, defaults, options);
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
this file is only provided for convenience and for tests. it’s not advised to use it.
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(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(el, selector)
Checks if a given element el
matches selector
.
Compare with $.fn.is.
var matches = require('dom101/matches');
matches(button, ':focus');
on(el, event, fn)
Adds an event handler.
var on = require('dom101/on');
on(el, 'click', function () {
...
});
outerHeight(el, includeMargin)
Returns the outer height (height + padding [+margin]) of an element as an integer. Supports IE8+.
If includeMargin
is true, then margins will be part of the computation.
var outerHeight = require('dom101/outer-height');
var height = outerHeight(el);
var fullHeight = outerHeight(el, true); // include margins
outerWidth(el, includeMargin)
Returns the outer width (width + padding [+margin]) of an element as an integer. Supports IE8+.
If includeMargin
is true, then margins will be part of the computation.
var outerWidth = require('dom101/outer-width');
var width = outerWidth(el);
var fullWidth = outerWidth(el); // include margins
prepend(el, child)
Prepends a child
into a parent el
. Compare with $.fn.prepend
.
var prepend = require('dom101/prepend');
prepend(el, child);
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(query)
Convenience function to access document.querySelector
.
var q = require('dom101/query-selector');
addClass(q('#instructions'), 'hidden');
ready(fn)
Executes fn
when the DOM is ready. If the DOM is already ready, the given
callback will be called immediately.
var ready = require('dom101/ready');
ready(function () {
...
});
removeClass(el, className)
Removes a classname.
var removeClass = require('dom101/remove-class');
el.className = 'selected active';
removeClass(el, 'active');
el.className
=> "selected"
remove(el)
Removes an element from the DOM.
var remove = require('dom101/remove');
remove(el);
scrollTop()
Returns the scroll top value.
var scrollTop = require('dom101/scroll-top');
alert(scrollTop());
text(el, [value])
Sets or gets text. Compare with $.fn.text
.
var text = require('dom101/text');
text(el, 'Hello');
text(el)
=> "Hello"
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(el, event)
Triggers an event event
. Only works for native events.
var trigger = require('dom101/trigger');
el = document.querySelector('#button');
trigger(el, 'click');
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