Skip to content

A small js util for easy access of DOM elements (no more document.getElementById!)

License

Notifications You must be signed in to change notification settings

shaylh/dominator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DOMinator

If you ever get tired of declaring DOM elements like that:

var formNode, submitButtonNode, nameInputNode, emailInputNode;
window.onload = function(){
    formNode = document.getElementById('form');
    submitButtonNode = document.getElementById('submit');
    nameInputNode = document.getElementById('name');
    emailInputNode = document.getElementById('email');
    console.log(formNode, submitButtonNode, nameInputNode, emailInputNode);
}

You've come to the right place!

introducing: DOMinator

DOMinator gives you easy and worry-less access to DOM elements, without having to declare each and every one of them individually.

example

The code above is replaced by this:

var dominator = Dominator.getInstance();
dominator.initIds('form', 'submit', 'name', 'email');
dominator.onReady(function (dom) {
    console.log(dom.form, dom.submit, dom.name, dom.email);
});

how to use

Include either dominator.js or dominator.min.js in your web page, and you're good to go with var dominator = Dominator.getInstance();

functionality

dominator.initId

Use this function to register a new DOM element, to be accessed later by dominator.dom[id]:

dominator.initId('foo');

dominator.initIds

Similar to dominator.initId, but works on multiple ids passed either as an array or as an open-ended arguments list:

dominator.initIds(['foo', 'bar']);//this works
dominator.initIds('oof', 'rab');//this works too!

dominator.onReady

This function receives a callback which is fired once the document is actually loaded, and DOM initialization is done. The callback is executed with all the DOM elements as the first and only argument. This function may also receive ids to be initialized, as shown:

dominator.initId('foo');
dominator.onReady(function (dom) {
	//dom.foo
});
dominator.onReady('bar', function (dom) {
	//dom.bar
});

dominator.dom

Ue this getter to access DOM elements directly, without the need for dominator.onReady (if for some legacy issues you have to use window.onload:

dominator.initId('foo');
window.onload = function(){
	//dominator.dom.foo
};

tests

DOMinator is fully tested. Local tests can be easily run by:

$ grunt test

build

Minified version can be found under build folder, and is generated by running:

$ grunt build

###Thats it! Let me know if you encounter any issues, and feel free to send me pull requests if you have some bug fixes and/or improvements :)

About

A small js util for easy access of DOM elements (no more document.getElementById!)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published