dom101 v2.2.1

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

Non-DOM utilities

Aliases

Some aliases for DOM functions are also added for convenience.

Not implemented

Some DOM helpers aren't implemented, because they're easy enough to do with plain DOM API:

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