GitHub - ksankumar/dom.js: JavaScript, DOM, DOM manipulation

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:

$ 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(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(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

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

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

isFunction

Determine whether its function or not

dom.isFunction(function());

The result look like this

type

Determine what type of value

The result look like this

isArray

Check whether it's array or not

The result look like this

merge

Merge two Array

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

The result look like this

clean

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

<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!