dom101
DOM manipulation utilities
dom101 is a set of utilities for manipulating the DOM as single files.
aka: Stop using jQuery.
var addClass = ; el = document;;
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 = ; ;
after
after(el, newEl)
Inserts a new element newEl
just after el
.
var after = ;var newNode = document;var button = document; ;
before
before(el, newEl)
Inserts a new element newEl
just before el
.
var before = ;var newNode = document;var button = document; ;
closest
closest(el, selector)
Looks for the closest ancestor of element el
that matches selector
.
Compare with $.fn.closest.
var closest = ; ;
deepExtend
deepExtend(dest, src1, [src2 ...])
Extends object dest
with properties from sources src
.
Compare with $.extend(true).
Also consider deep-extend.
var deepExtend = ;;
documentHeight
documentHeight()
Returns the height of the document.
Compare with jQuery's $(document).height()
.
var documentHeight = ; var height = ;
documentWidth
documentWidth()
Returns the width of the document.
Compare with jQuery's $(document).width()
.
var documentWidth = ; var width = ;
each
each(list, fn)
Iterates through list
(an array or an object). This is useful when dealing
with NodeLists like document.querySelectorAll
.
var each = ;var qa = ; ;
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 = ;;
hasClass
hasClass(el, className)
Checks if an element has a given class name.
var hasClass = ; elclassName = 'selected 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 = ; //=> true //=> false
map
map(list, fn)
Iterates through list
(an array or an object).
var map = ;var text = ; ;
matches
matches(el, selector)
Checks if a given element el
matches selector
.
Compare with $.fn.is.
var matches = ; ;
nextUntil
nextUntil(el, selector)
Returns all elements next to element el
, until it reaches selector
or
the end of the sibling list of el
.
on
on(el, event, fn)
Adds an event handler.
var on = ; ;
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 = ;var height = ;var fullHeight = ; // 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 = ;var width = ;var fullWidth = ; // include margins
prepend
prepend(el, child)
Prepends a child
into a parent el
. Compare with $.fn.prepend
.
var prepend = ; ;
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 = ;var qsa = ;
querySelector
querySelector(query)
Convenience function to access document.querySelector
.
var q = ;;
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 = ; ;
removeClass
removeClass(el, className)
Removes a classname.
var removeClass = ; elclassName = 'selected active';; elclassName "selected"
remove
remove(el)
Removes an element from the DOM.
var remove = ; ;
scrollTop
scrollTop()
Returns the scroll top value.
var scrollTop = ;;
text
text(el, [value])
Sets or gets text. Compare with $.fn.text
.
var text = ; ; "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 = ; // toggles on or off:; // with a value:var isSelected = true;;
trigger
trigger(el, event)
Triggers an event event
. Only works for native events.
var trigger = ; el = document;;
Similar projects
- jQuery
- 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