DOM.JS

Simple, faster and pure javascript library to DOM manipulation.

Event handling
DOM manipulation
Validations
...more

DOM-JS is a lightweight Javascript library to perform DOM manipulations

Version

0.0.1

Installation

You need Gulp installed globally:

$ npm i -g gulp

$ git clone https://github.com/ksankumar/dom.js

<script type="text/javascript" src="lib/dom.min.js"></script>

Tech

We can access the DOM.JS's APIs with help of dom or $ namespace

DOM.JS APIs

ready

dom.ready(function() {
    console.log('dom is ready');
});

dom.ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

on

dom(SELECTOR).on(EVENT, HANDLER);

Attach an event handler function for one or more events to the selected elements

SELECTOR - string

  A selector string to filter the selected elements - SELECTOR should be id(#SELECTOR), class(.SELECTOR) or tag name(div, p, button, etc), should not be a null.

EVENT - string

  Type of the event such as click, hover.etc

HANDLER - function

  A function to execute when the event is triggered

dom('button').on('click', function(){
    alert('clicked');
});

off

dom(SELECTOR).off(EVENT, HANDLER);

Remove an event handler.

SELECTOR - string

  A selector which should match the one originally passed to .on() when attaching event handlers.

EVENT - string

  Type of the event such as click, hover.etc

HANDLER - function

 A handler function previously attached for the event(s) with .on()

dom('button').off('click');

fire

dom(SELECTOR).fire(EVENT);

Trigger an event handler.

SELECTOR - string

  A selector which should match the one originally passed to .on() when attaching event handlers.

EVENT - string

  Type of the event such as click, hover.etc

dom('button').fire('click');

each

dom.each(OBJECT, function(INDEX, ELEMENT){});

Iterate over a object, executing a function for each matched element.

INDEX - integer
ELEMENT - Object

Example

dom('li').each(function(index, element){
    console.log( index + ' : ' + dom(element).text());
});

html

Read or write the HTML content of an element.

<h1 id="h1-title">Hi foo</h1>

Get the html

var html = dom('#h1-title').html();
console.log(html);

Set the html

dom('#h1-title').html('Hello foo!');

The result look like this

<h1 id="h1-title">Hello foo!</h1>

text

Get the combined text contents of an element, including its descendants, or set the text content of the element.

<h1 id="h1-title">Hi foo</h1>

Get the text

var html = dom('#h1-title').text();
console.log(html);

Set the html

dom('#h1-title').text('Hello foo!');

The result look like this

<h1 id="h1-title">Hello foo!</h1>

attr

Modify attributes, such as id, class, alt, title and more.

<a href="#" title="click here">Hello foo!</a>

Get the attribute

var attr = dom('a').attr('title');
console.log(attr);

Set the attribute dom('a').attr('title', 'click me'); The result look like this

<a href="#" title="click me">Hello foo!</a>

data

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

<a href="#" title="click here" data-link="next page link">Hello foo!</a>

Set data

dom('a').data('msg', 'link message');

The result look like this

<a href="#" title="click here" data-link="next page link" data-msg="data message">Hello foo!</a>

Get the data

console.log(dom('a').data('msg'));

The result look like this
data message

console.log(dom('a').data());

The result look like this
Object {link: "next page link", msg: "data message"}

removeAttr

This method to erase an attribute from the element

<a href="#" title="click here" data-link="next page link">Hello foo!</a>

dom('a').removeAttr('title');

The result look like this

<a href="#" data-link="next page link">Hello foo!</a>

append

Insert a new element or an HTML structure to the end of another element's content.

dom('#container').append('<h1>Appended</h1>');

<div id="container">
    <span>content 1</span>
</div>

The result look like this

<div id="container">
    <span>content 1</span>
    <h1>Appended</h1>
</div>

prepend

Insert a new element or an HTML structure to the beginning of another element's content.

dom('#container').prepend('<h1>Appended</h1>');

<div id="container">
    <span>content 1</span>
</div>

The result look like this

<div id="container">
    <h1>Appended</h1>
    <span>content 1</span>
</div>

before

Insert an HTML structure before a given DOM tree element.

dom('.sub-content').before('<h1>Appended</h1>');

<div id="container">
    <span class="sub-content">content 1</span>
</div>

The result look like this

<div id="container">
    <h1>Appended</h1>
    <span class="sub-content">content 1</span>
</div>

after

Insert an HTML structure after a given DOM tree element.

dom('.sub-content').after('<h1>Appended</h1>');

<div id="container">
    <span class="sub-content">content 1</span>
</div>

The result look like this

<div id="container">
    <span class="sub-content">content 1</span>
    <h1>Appended</h1>
</div>

empty

Remove all child nodes of an element from the DOM

dom('.sub-content').empty();

<div id="container">
    <span class="sub-content">content 1</span>
</div>

The result look like this

<div id="container">
    <span class="sub-content"></span>
</div>

remove

Remove an element from the DOM tree.

dom('.sub-content').remove();

<div id="container">
    <span class="sub-content">content 1</span>
</div>

The result look like this

<div id="container"></div>

hasClass

Determine whether any of the matched elements are assigned the given class

alert(dom('#container span').hasClass('sub-content'));

addClass

Adds the specified class(es) to each element in the set of matched elements

<div id="container">
    <span class="sub-content">content 1</span>
</div>

dom('#container span').addClass('sub-class');

The result look like this

<div id="container">
    <span class="sub-content sub-class">content 1</span>
</div>

removeClass

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

<div id="container">
    <span class="sub-content">content 1</span>
</div>

dom('#container span').removeClass('sub-content');

The result look like this

<div id="container">
    <span>content 1</span>
</div>

toggleClass

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument

<div id="container">
    <span class="sub-content">content 1</span>
</div>

dom('#container span').toggleClass('sub-content');

The result look like this

<div id="container">
    <span>content 1</span>
</div>

The second time we applydom('#container span').toggleClass('sub-content'), the result look like this

<div id="container">
    <span class="sub-content">content 1</span>
</div>

parent

Getting the parent DOM node of an element.

dom('.sub-content').parent();

<div id="container">
    <span class="sub-content">content 1</span>
</div>

parents

Getting all parents DOM node of an element.

dom('.sub-content').parents();

<div id="container">
    <span class="sub-content">content 1</span>
</div>

Get the next of an element or retrieve siblings.

dom('#container').next();

<div id="container">
    <span class="sub-content">content 1</span>
</div>

nextAll

Get all preceding siblings of an element, optionally filtered:

dom('#container').nextAll('.sub-content');

<div id="container">
    <span class="sub-content">content 1</span>
</div>

Get the previous of an element or retrieve siblings.

dom('.inner-content').prev();

<div id="container">
    <span class="sub-content">sub content</span>
    <span class="inner-content">inner content</span>
</div>

prevAll

Get all previous siblings of an element, optionally filtered

dom('.inner-content').prevAll();

<div id="container">
    <span class="sub-content">sub content</span>
    <span class="inner-content">inner content</span>
</div>

siblings

Get the all siblings of an element or retrieve siblings that match a given selector.

dom('.li-content').siblings();

<ul id="container">
    <li class="list">List 1</li>
    <li class="list">List 2</li>
    <li class="list li-content">List 3</li>
    <li class="list">List 4</li>
</ul>

children

Getting the children of a DOM element

dom('#container').children();

<ul id="container">
    <li class="list">List 1</li>
    <li class="list">List 2</li>
    <li class="list li-content">List 3</li>
    <li class="list">List 4</li>
</ul>

closest

Get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree

dom('#container').closest(.li-content);

<ul id="container">
    <li class="list">List 1</li>
    <li class="list">List 2</li>
    <li class="list li-content">List 3</li>
    <li class="list">List 4</li>
</ul>

focus

Bind an event handler to the 'focus' JavaScript event, or trigger that event on an element.

dom('#input').focus();

dom('#input').focus(function(){
    console.log('focus');
});

<div id="container">
    <input id="input" placeholder="text here">
</div>

focusIn

The focusin event is sent to an element when it, or any element inside of it, gains focus.

dom('#input').focusIn();

dom('#input').focusIn(function(){
    console.log('focusIn');
});

<div id="container">
    <input id="input" placeholder="text here">
</div>

focusOut

Bind an event handler to the 'focus' JavaScript event, or trigger that event on an element.

dom('#input').focusOut();

dom('#input').focusOut(function(){
    console.log('focus Out');
});

<div id="container">
    <input id="input" placeholder="text here">
</div>

first

Reduce the set of matched elements to the first in the set.

dom('#container li').first();

<ul id="container">
    <li class="list">List 1</li>
    <li class="list">List 2</li>
    <li class="list">List 3</li>
    <li class="list">List 4</li>
</ul>

The result look like this

 <li class="list">List 1</li>

last

Reduce the set of matched elements to the last in the set.

dom('#container li').last();

<ul id="container">
    <li class="list">List 1</li>
    <li class="list">List 2</li>
    <li class="list">List 3</li>
    <li class="list">List 4</li>
</ul>

The result look like this

 <li class="list">List 4</li>

eq

Reduce the set of matched elements to the one at the specified index.

dom('#container li').eq(2);

<ul id="container">
    <li class="list">List 1</li>
    <li class="list">List 2</li>
    <li class="list">List 3</li>
    <li class="list">List 4</li>
</ul>

The result look like this

 <li class="list">List 3</span>

get

Retrieve the DOM elements matched by the jQuery object.

dom('#container li').get();

The result look like this

  <li class="list">List 1</li>
  <li class="list">List 2</li>
  <li class="list">List 3</li>
  <li class="list">List 4</li>

dom('#container li').get(2);

<ul id="container">
    <li class="list">List 1</li>
    <li class="list">List 2</li>
    <li class="list">List 3</li>
    <li class="list">List 4</li>
</ul>

The result look like this

 <li class="list">List 3</li>

css

Get the computed style properties or set CSS properties for an element.

Set style

dom('#container li').css('color','red');

Set styles

dom('#container li').css({'color':'red', 'background':'red'});

<ul id="container">
    <li class="list" style="color:green">List 1</li>
    <li class="list">List 2</li>
    <li class="list">List 3</li>
    <li class="list">List 4</li>
</ul>

The result look like this

<ul id="container">
    <li class="list" style="color:red; background:red">List 1</li>
    <li class="list" style="color:red; background:red">List 2</li>
    <li class="list" style="color:red; background:red">List 3</li>
    <li class="list" style="color:red; background:red">List 4</li>
</ul>

Get styles

console.log(dom('#container li').css('color'));

The result look like this

red

hide

Hide the matched elements.

dom('#container li').hide();

<ul id="container">
    <li class="list" style="color:green">List 1</li>
    <li class="list">List 2</li>
    <li class="list">List 3</li>
    <li class="list">List 4</li>
</ul>

The result look like this

<ul id="container">
    <li class="list" style="display:none;">List 1</li>
    <li class="list" style="display:none;">List 2</li>
    <li class="list" style="display:none;">List 3</li>
    <li class="list" style="display:none;">List 4</li>
</ul>

show

Show the matched elements.

dom('#container li').show();

<ul id="container">
    <li class="list" style="display:none;">List 1</li>
    <li class="list" style="display:none;">List 2</li>
    <li class="list" style="display:none;">List 3</li>
    <li class="list" style="display:none;">List 4</li>
</ul>

The result look like this

<ul id="container">
    <li class="list" style="display:block;">List 1</li>
    <li class="list" style="display:block;">List 2</li>
    <li class="list" style="display:block;">List 3</li>
    <li class="list" style="display:block;">List 4</li>
</ul>

toggle

Toggle an element's display property for rendering it visible or invisible.

dom('#container li').toggle();

<ul id="container">
    <li class="list" style="display:none;">List 1</li>
    <li class="list">List 2</li>
    <li class="list" style="display:none;">List 3</li>
    <li class="list">List 4</li>
</ul>

The result look like this

<ul id="container">
    <li class="list">List 1</li>
    <li class="list" style="display:none;">List 2</li>
    <li class="list">List 3</li>
    <li class="list" style="display:none;">List 4</li>
</ul>

fadeIn

Display the matched elements by fading them to opaque

dom('#container').fadeIn(500);

<ul id="container">
    <li class="list" style="display:none;">List 1</li>
    <li class="list">List 2</li>
    <li class="list" style="display:none;">List 3</lili>
    <li class="list">List 4</li>
</ul>

fadeOut

Hide the matched elements by fading them to opaque

dom('#container').fadeOut(500);

<ul id="container">
    <li class="list" style="display:none;">List 1</li>
    <li class="list">List 2</li>
    <li class="list" style="display:none;">List 3</li>
    <li class="list">List 4</li>
</ul>

trim

Remove white-space characters from the beginning and end of a string.

console.log(dom.trim('  foo '));

The result look like this

foo

parseJSON

Takes a well-formed JSON string and returns the resulting JavaScript value.

dom.parseJSON('{"result":true,"count":1}');

The result look like this

Object {result: true, count: 1}

stringify

Convert JSON object to String

dom.stringify({result: true, count: 1});

The result look like this

'{"result":true,"count":1}'

log

display the log for particular element

dom('#container').log('ul :');

extend

Extend or Merge a JavaScript object with the key/value pairs of another.

dom.extend({'key':'value1'}, {'key':'value2'});

The result look like this

Object {key2: "value2"}

isFunction

Determine whether its function or not

dom.isFunction(function());

The result look like this

true

type

Determine what type of value

dom.type(true);

The result look like this

boolean

isArray

Check whether it's array or not

dom.isArray([1,2,3]);

The result look like this

true

merge

Merge two Array

dom.merge([1,2,3],[2,4,5]);

The result look like this

[1, 2, 3, 2, 4, 5]

clean

The function takes a single element reference as its argument, and removes all those unwanted nodes from inside it.

dom.clean('#container');

<div id="container">
    <ul id="ul-list">
        <li class="list">List 1</li>
        <li class="list">List 2</li>
        <li class="list">List 3</li>
        <li class="list">List 4</li>
    </ul>
</div>

DOM structure.

DIV id="container"
#text:
+ UL id="ul-list"
| + #text:
| + LI class="list"
| | + #text: List 1
| + #text:
| + LI class="list"
| | + #text: List 2
| + #text:
| + LI class="list"
| | + #text: List 3
| + #text:
| + LI class="list"
| | + #text: List 4
| + #text:
+ #text:

The result look like this

DIV id="container"
+ UL id="ul-list"
| + LI class="list"
| | + #text: List 1
| + LI class="list"
| | + #text: List 2
| + LI class="list"
| | + #text: List 3
| + LI class="list"
| | + #text: List 4

Reference

jQuery source viewer

Plain JS

JQuery API

License

MIT

Free Software, Santhosh Kumar Krishnan!