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
youmightnotneedjquery.com — actually takes a bunch of code from here
101
bonzo

Thanks

ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz

dom101

dom101

Why?

Slim builds

Copy-pastable

Semi-legacy support

Reference

Non-DOM utilities

Aliases

Not implemented

Install

API Reference

addClass

after

before

closest

deepExtend

documentHeight

documentWidth

each

extend

hasClass

exports

isPlainObject

map

matches

nextUntil

on

outerHeight

outerWidth

prepend

querySelectorAll

querySelector

ready

removeClass

remove

scrollTop

text

toggleClass

trigger

Similar projects

Thanks

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads