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
• 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