Tools.JS is a minimalist JavaScript framework/library to create web applications. Tools.JS is for developers who prefer Vanilla JavaScript. While plain JS is often good enough, basic operations can be quite verbose. Tools.JS offers a collection of utility functions that allow for a shorter notation.

Download version 0.9
For more details see: ToolsJS on github.

Query Selectors

Instead of having to type document.querySelector(All) all the time, you can use the functions: qs() (query selector) and qsa() (query selector all). Note that Tools.JS assigns the document object to letter D. So instead of document you can write just D.


qs(D, '.myelement');

DOM manipulation

To create a new DOM element use ce()/wrp():

//create a link
a = ce('a');

//create html...
wrp('<a href="#"></a>');

Use the functions html()/txt()/attr() to get/set (depending on the number of arguments) innerHTML, innerText and attributes respectively:

//set innerHTML of h1 tag
html( qs( D, 'h1' ) 'Title' );

//get href of a link
var h = attr( mylink, 'href' );

dat() works just like attr() but prefixes the specified key with data- so you can set data attributes.

classmod() can be used to modify the class list of a node: it accepts a list of class names to be added and a list of class names to be removed, both are optional.

classmod( node, ['show'], ['hide'] );

Use mv() to move a node in the DOM tree, rm() to delete it and cp() to copy it (cpr() to copy recursively). ls() can be used to list the child nodes under a specific node. The function mv() accepts a position parameter (0 = append as last child, 1 = append as sibling, 2 insert before ).

//add task to list
mv( task, qs('ul') );

Batch operations

To apply DOM manipulations to a set of nodes instead of just one use each()/bat()/xd()/xf(). The following example illustrates how to open all links in new windows:

//Using each():
each(qsa(D,'a'), function(a){
	attr(a, 'target', '_blank');

//Using bat():
bat('attr', qsa(D,'a'), 'target', '_blank');

//Using xd() (xf for frame 0):

I/O Functions

Given a dataURI show() opens a new browser window displaying the object in the dataURI by registering an object url. If 2nd argument 'noopen flag' is set, no window will be opened and the blob object will be returned instead.

//display pdf
show( pdfdata );

fread() reads a file object. Mode 0 = read as text (default) Mode 1 = read as data url:

fread(upload, func, 1);

download() downloads a string as a file in the browser.

download( 'hello', 'test.txt', 'text/plain' );

rq() sends an async request to server.

//alert this page
rq( '', alert );

//post data
rq('/post', callback, [1,2,3]);