Roman Shtylman edited this page Dec 24, 2012 · 2 revisions

dom is a small and lightweight library for performing basic dom tasks. It is not meant to be a catch-all utility library or plugin system.


dom will select elements using the builtin querySelector. See the selectors spec for details. (tl;dr; use css style selectors)

// single element by id
var elem = dom('#some-id');

// elements by tag name
var divs = dom('div');

// certain attribute value
var input = dom('input[name=foobar]');

See the selectors page for some more examples.


dom can create a single element or an entire set of elements from an html string.

// single element

// create and entire set of elements
var list = dom('<div id="foobar"><p>hello world</p></div>');

// we can also find within a set of elements
list.find('p').text(); // hello world


If you have existing raw Element objects, you can wrap them for dom access by passing them into the dom function.

var div = document.createElement('div');

// change color with builtin methods
div.style.color = 'blue';

// change color with dom
dom(div).css('color', 'red');

Dom can handle more than one element if you need to operate on several at once.

var d1 = document.createElement('div');
var d2 = document.createElement('div');

// set color to red for both divs
dom([d1, d2]).css('color', 'red');