DOM manipulation functions.
Last updated 3 years ago by rstacruz .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install dom101 
SYNC missed versions from official npm registry.


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');



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.


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')

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)


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') = '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 version

API Reference


addClass(el, className)

Adds a class name to an element. Compare with $.fn.addClass.

var addClass = require('dom101/add-class');

addClass(el, 'active');


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(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(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(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);



Returns the height of the document. Compare with jQuery's $(document).height().

var documentHeight = require('dom101/document-height');

var height = documentHeight();



Returns the width of the document. Compare with jQuery's $(document).width().

var documentWidth = require('dom101/document-width');

var width = documentWidth();


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


this file is only provided for convenience and for tests. it's not advised to use it.



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(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(el, selector)

Checks if a given element el matches selector. Compare with $

var matches = require('dom101/matches');

matches(button, ':focus');


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(el, event, fn)

Adds an event handler.

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.

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.

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.

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.

var each = require('dom101/each');
var qsa = require('dom101/query-selector-all');

qsa('.button').each(el => {
  addClass('el', 'selected');



Convenience function to access document.querySelector.

var q = require('dom101/query-selector');
addClass(q('#instructions'), 'hidden');



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(el, className)

Removes a classname.

var removeClass = require('dom101/remove-class');

el.className = 'selected active';
removeClass(el, 'active');

=> "selected"



Removes an element from the DOM.

var remove = require('dom101/remove');




Returns the scroll top value.

var scrollTop = require('dom101/scroll-top');


text(el, [value])

Sets or gets text. Compare with $.fn.text.

var text = require('dom101/text');

text(el, 'Hello');

=> "Hello"


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


dom101 © 2014+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).  ·  GitHub @rstacruz  ·  Twitter @rstacruz

Current Tags

  • 2.2.1                                ...           latest (3 years ago)

16 Versions

  • 2.2.1                                ...           3 years ago
  • 2.2.0                                ...           3 years ago
  • 2.1.0                                ...           3 years ago
  • 2.0.1                                ...           3 years ago
  • 1.3.0                                ...           4 years ago
  • 1.2.0                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.7.2                                ...           5 years ago
  • 0.7.0                                ...           6 years ago
  • 0.6.0                                ...           6 years ago
  • 0.5.0                                ...           6 years ago
  • 0.4.0                                ...           6 years ago
  • 0.3.0                                ...           6 years ago
  • 0.2.0                                ...           6 years ago
  • 0.1.0                                ...           6 years ago
Maintainers (1)
Today 0
This Week 1
This Month 22
Last Day 1
Last Week 8
Last Month 44
Dependencies (0)
Dev Dependencies (7)

Copyright 2014 - 2017 © |