Dom.js 
A JavaScript library that encapsulate DOM methods and makes more easy DOM manipulations.Quick start
Run the following command in a shell:npm install dom.js --savenode_modules`` folder.Refer to these files by adding a a ``
<script>`` element into your HTML pages:
<script src="node_modules/dom.js/dist/d.min.js"></script>Examples
Creating elements:<body>
<div class="container"></div>
<script>
// find the container element using selector expression.
var container = djs('.container');
// create an h1 element and append into container.
container.create('<h1>Hello World</h1>');
</script>
</body>Creating elements using template literal (ES2015):
<body>
<div class="container"></div>
<script>
// find the container element using selector expression.
let container = djs('.container');
let jedis = [
{name: 'Luke Skywalker'},
{name: 'Yoda'}
];
let jedisHtml = djs`
<ul>
${jedis.map((jedi) => {
// Using $$ to escape the html.
return djs`<li>$${jedi.name}</li>`
})}
</ul>
`
// create the element and append into container.
container.create(jedisHtml);
</script>
</body>API
- Query:- [.find(selector)](#djsfindselector)
- [.findAll(selector)](#djsfindallselector)- [.create(template)](#djscreatetemplate)
- [.remove(node)](#djsremovenode)- [.css(node, cssStyles)](#djscssnodecssstyles)
- [.addClass(node, className)](#djsaddclassnodeclassname)
- [.removeClass(node, classToRemove)](#djsremoveclassnodeclasstoremove)
- [.toggleClass(node, className, force)](#djstoggleclassnodeclassnameforce)
- [.containsClass(node, className)](#djscontainsclassnodeclassname)- [element.find(selector)](#elementfindselector)
- [element.findAll(selector)](#elementfindallselector)- [element.create(template)](#elementcreatetemplate)
- [element.remove()](#elementremove)- [element.css(cssStyles)](#elementcsscsstyles)
- [element.addClass(className)](#elementaddclassclassname)
- [element.removeClass(classToRemove)](#elementremoveclassclasstoremove)
- [element.toggleClass(className, force)](#elementtoggleclassclassnameforce)
- [element.containsClass(className)](#elementcontainsclassclassname)djs(selector):
Description Find an element using query selector.Parameters: - ``
selector``(String): A selector expression to find in the DOM.Return DJS element that represent an element found in the DOM.
Example:
var element = djs('.my-class');djs\`template\`:
Description Create a DJS element and return it.Parameters: - ``
template`` (Template Literal): A HTML Template Literal that represent an element to create.Return DJS element with the element created.
Example:
var element = djs`<h1>Hello World</h1>`;Query
djs.find(selector):
Description Find an element using query selector.Parameters: - ``
selector``(String): A selector expression to find in the DOM.Return DJS element that represent an element found in the DOM.
Example:
var element = djs.find('.my-class');djs.findAll(selector):
Description Find all elements in the DOM using query selector.Parameters: - ``
selector``(String): A selector expression to find in the DOM.Return NodeList that represent an element found in the DOM.
Example:
var elements = djs.findAll('div');Manipulation
djs.create(template):
Description Create a DJS element and return it.Parameters: - ``
template`` (String | Template Literal): A HTML Template Literal or string that represent an element to create.Return DJS element with the element created.
Example:
var element = djs.create(`<h1>Hello World</h1>`);djs.remove(node):
Description Remove the element from the DOM.Parameters: - ``
node``(DJS element | Node)
Return DJS element with the element removed.Example:
var element = djs('body').create('<h1>Hello World</h1>');
djs.remove(element);Styles
djs.css(node, cssStyles):
Description Add to an element the styles from ``cssStyles`` and prefix css properties when it needs.Parameters: - ``
node``(DJS element | Node) A node element to add css styles.
- ``cssStyles``(Object) A object with the CSS Properties to be added.Return DJS element | Node with the element edited. Return ``
null` if it is not a valid node (`null`, `undefined`, `CommentNode`, `TextNode``)Example:
var element = djs.create(`<h1>Hello World</h1>`);
djs.css(element, {
backgrounColor: 'red'
});djs.addClass(node, className):
Description Add to an element the CSS classes passed into ``className``.Parameters: - ``
node``(DJS element | Node) A node element to add css classes.
- ``className``(String | Array) A string or array of classes to be added.Return DJS element | Node with the element edited. Return ``
null` if it is not a valid node (`null`, `undefined`, `CommentNode`, `TextNode``)Example:
var element = djs.create(`<h1>Hello World</h1>`);
djs.addClass(element, ['my-class']);djs.removeClass(node, classToRemove):
Description Remove from an element the CSS class passed into ``classToRemove``.Parameters: - ``
node``(DJS element | Node) A node element to remove the css class.
- ``classToRemove``(String) A string of class to be removed.Return DJS element | Node with the element edited. Return ``
null` if it is not a valid node (`null`, `undefined`, `CommentNode`, `TextNode``)Example:
var element = djs.create(`<h1 class="class-to-remove">Hello World</h1>`);
djs.removeClass(element, 'class-to-remove');djs.toggleClass(node, className, force):
Description Toggle the CSS class passed as ``className`` from an element.Parameters: - ``
node``(DJS element | Node) A node element to toggle the css class.
- ``className``(String) A string of class to be toggled.
- ``force``(Boolean) When is false and class is not into element, the method does not add the class. When the class is into element and is truthy, the methdo does not remove the class.null` if it is not a valid node (`null`, `undefined`, `CommentNode`, `TextNode``)Example:
var element = djs.create(`<h1 class="class-to-remove">Hello World</h1>`);
djs.toggleClass(element, 'class-to-remove');djs.containsClass(node, className):
Description Verify if the ```className`` is into element or not.Parameters: - ``
node``(DJS element | Node) A node element verify if it contains the css class.
- ``className``(String) A string of class to be checked.Return (Boolean) Return ``
true`` when the class is in element otherwise return falseExample:
var element = djs.create(`<h1 class="my-class">Hello World</h1>`);
djs.containsClass(element, 'my-class'); // trueDJS element
Description An DJS element is a Node element that has also the djs methods.Methods
Element query
element.find(selector):
Description Find an element using query selector and ``element`` as the root node.Parameters: - ``
selector``(String): A selector expression to find in the DOM.Return DJS element that represent an element found in the DOM.
Example:
var body = djs('body');
body.find('.my-class');element.findAll(selector):
Description Find all elements in the DOM using query selector and ``element`` as the root node.Parameters: - ``
selector``(String): A selector expression to find in the DOM.Return NodeList that represent an element found in the DOM.
Example:
var body = djs('body');
body.findAll('.my-class');Element manipulation
element.create(template):
Description Create a DJS element, return it and append into ``element``.Parameters: - ``
template`` (String | Template Literal): A HTML Template Literal or string that represent an element to create.Return DJS element with the element created.
Example:
var body = djs('body');
body.create('<h1>Hello World</h1>');element.remove():
Description Remove the element from the DOM.Return DJS element with the element removed.
Example:
var element = djs('body').create('<h1>Hello World</h1>');
element.remove();Element styles
element.css(cssStyles):
Description Add to the ``element` the styles from `cssStyles`` and prefix css properties when it needs.Parameters: - ``
cssStyles``(Object) A object with the CSS Properties to be added.Return DJS element | Node with the element edited.
Example:
var element = djs.create(`<h1>Hello World</h1>`);
element.css({
backgrounColor: 'red'
});element.addClass(className):
Description Add to an element the CSS classes passed into ``className``.Parameters: - ``
className``(String | Array) A string or array of classes to be added.Return DJS element | Node with the element edited. Return ``
null` if it is not a valid node (`null`, `undefined`, `CommentNode`, `TextNode``)Example:
var element = djs.create(`<h1>Hello World</h1>`);
element.addClass(['my-class']);element.removeClass(classToRemove):
Description Remove from an element the CSS class passed into ``classToRemove``.Parameters: - ``
classToRemove``(String) A string of class to be removed.Return DJS element | Node with the element edited. Return ``
null` if it is not a valid node (`null`, `undefined`, `CommentNode`, `TextNode``)Example:
var element = djs.create(`<h1 class="class-to-remove">Hello World</h1>`);
element.removeClass('class-to-remove');element.toggleClass(className, force):
Description Toggle the CSS class passed as ``className`` from an element.Parameters: - ``
className``(String) A string of class to be toggled.
- ``force``(Boolean) When is false and class is not into element, the method does not add the class. When the class is into element and is truthy, the methdo does not remove the class.null` if it is not a valid node (`null`, `undefined`, `CommentNode`, `TextNode``)Example:
var element = djs.create(`<h1 class="class-to-remove">Hello World</h1>`);
element.toggleClass('class-to-remove');element.containsClass(className):
Description Verify if the ```className`` is into element or not.Parameters: - ``
className``(String) A string of class to be checked.Return (Boolean) Return ``
true`` when the class is in element otherwise return falseExample:
var element = djs.create(`<h1 class="my-class">Hello World</h1>`);
element.containsClass('my-class'); // true