npm install dom101> DOM manipulation utilities
dom101 is a set of utilities for manipulating the DOM as single files.
aka: Stop using jQuery.
``js
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
[npm]: https://www.npmjs.org/package/dom101
[browserify]: https://browserify.org
> addClass(el, className)
Adds a class name to an element. Compare with $.fn.addClass.
`js
var addClass = require('dom101/add-class');
addClass(el, 'active');
`
> after(el, newEl)
Inserts a new element newEl just after el.
`js
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.
`js
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.
`js
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].
[deep-extend]: http://npmjs.com/deep-extend
`js`
var deepExtend = require('dom101/deep-extend');
deepExtend({}, defaults, options);
> documentHeight()
Returns the height of the document.
Compare with jQuery's $(document).height().
`js
var documentHeight = require('dom101/document-height');
var height = documentHeight();
`
> documentWidth()
Returns the width of the document.
Compare with jQuery's $(document).width().
`js
var documentWidth = require('dom101/document-width');
var width = documentWidth();
`
> each(list, fn)
Iterates through list (an array or an object). This is useful when dealingdocument.querySelectorAll
with NodeLists like .
`js
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.Object.assign
Compare with $.extend.
Also consider [object-assign] and the built-in .
[object-assign]: http://npmjs.com/object-assign
`js`
var extend = require('dom101/extend');
extend({}, defaults, options);
> hasClass(el, className)
Checks if an element has a given class name.
`js
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.
`js
var isPlainObject = require('dom101/is-plain-object');
isPlainObject({}) //=> true
isPlainObject([]) //=> false
`
> map(list, fn)
Iterates through list (an array or an object).
`js
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.
`js
var matches = require('dom101/matches');
matches(button, ':focus');
`
> nextUntil(el, selector)
Returns all elements next to element el, until it reaches selector orel
the end of the sibling list of .
`js`
nextUntil(li, 'li:last-child')
> on(el, event, fn)
Adds an event handler.
`js
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.
`js`
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.
`js`
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.
`js
var prepend = require('dom101/prepend');
prepend(el, child);
`
> 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.
`js
var each = require('dom101/each');
var qsa = require('dom101/query-selector-all');
qsa('.button').each(el => {
addClass('el', 'selected');
};
`
> querySelector(query)
Convenience function to access document.querySelector.
`js`
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.
`js
var ready = require('dom101/ready');
ready(function () {
...
});
`
> removeClass(el, className)
Removes a classname.
`js
var removeClass = require('dom101/remove-class');
el.className = 'selected active';
removeClass(el, 'active');
el.className
=> "selected"
`
> remove(el)
Removes an element from the DOM.
`js
var remove = require('dom101/remove');
remove(el);
`
> scrollTop()
Returns the scroll top value.
`js`
var scrollTop = require('dom101/scroll-top');
alert(scrollTop());
> text(el, [value])
Sets or gets text. Compare with $.fn.text.
`js
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,true
this will add the class if it's or remove if it's false.$.fn.toggleClass
Compare with .
`js
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.
`js
var trigger = require('dom101/trigger');
el = document.querySelector('#button');
trigger(el, 'click');
``
* [jQuery] (of course)
* [youmightnotneedjquery.com] — actually takes a bunch of code from here
* [101]
* [bonzo]
dom101 © 2014+, Rico Sta. Cruz. Released under the [MIT] License.
Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]).
> ricostacruz.com ·
> GitHub @rstacruz ·
> Twitter @rstacruz
[MIT]: http://mit-license.org/
[contributors]: http://github.com/rstacruz/dom101/contributors
[jQuery]: http://jquery.com
[browserify]: http://browserify.org
[101]: https://www.npmjs.org/package/101
[youmightnotneedjquery.com]: http://youmightnotneedjquery.com/
[example]: https://github.com/rstacruz/dom101/blob/master/add-class.js
[bonzo]: https://github.com/ded/bonzo