dom101
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');
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 fully-supported is IE8, with most of the utilities working with even older IE versions.
dom101 loosely 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).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') |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');
after
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
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
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 deep-extend.var deepExtend = require('dom101/deep-extend');
deepExtend({}, defaults, options);
documentHeight
documentHeight()
Returns the height of the document. Compare with jQuery's
$(document).height()
.var documentHeight = require('dom101/document-height');
var height = documentHeight();
documentWidth
documentWidth()
Returns the width of the document. Compare with jQuery's
$(document).width()
.var documentWidth = require('dom101/document-width');
var width = documentWidth();
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 object-assign and the built-in Object.assign
.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
exports
this file is only provided for convenience and for tests. it's not advised to use it.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');
nextUntil
nextUntil(el, selector)
Returns all elements next to element
el
, until it reaches selector
or
the end of the sibling list of el
.nextUntil(li, 'li:last-child')
on
on(el, event, fn)
Adds an event handler.
var on = require('dom101/on');
on(el, 'click', function () {
...
});
outerHeight
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
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
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, [element])
Convenience function to access
document.querySelectorAll
. Unlike the
default version, this always returns an array.If a 2nd parameter
element
is given, it only searches for descendants of
that element.var each = require('dom101/each');
var qsa = require('dom101/query-selector-all');
qsa('.button').each(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. If the DOM is already ready, the given
callback will be called immediately.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 bonzoThanks
dom101 © 2014+, Rico Sta. Cruz. Released under the MIT License.Authored and maintained by Rico Sta. Cruz with help from contributors (listcontributors).
ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz