Dom7 - Custom DOM Library

Framework7 doesn't use any third party library, even for DOM manipulation. It has its own custom DOM7 - DOM library that utilizes most edge and high-performance methods for DOM manipulation. You don’t need to learn something new, its usage is very simple because it has the same syntax as well known jQuery library with support of the most popular and widely used methods and jQuery-like chaining.

To start use it there is a Dom7 global window function, but we recommend to assign it to some local variable with more handy name, like $$, but not to "$" to prevent confilicts with other libraries like jQuery or Zepto:

//Export DOM7 to local variable to make it easy accessable
var $$ = Dom7;

Usage Example

Just everything you already know:

$$('.something').on('click', function (e) {
    $$(this).addClass('hello').attr('title', 'world').insertAfter('.something-else');
});

Available Methods

All these methods works almost in the same way and with the same arguments as in jQuery or Zepto:

$$(window).trigger('resize');

//Add "intro" class to all paragraphs
$$('p').addClass('intro');

//Add "big" class from all links with "big" class
$$('a.big').removeClass('big');

<p class="intro">Lorem ipsum...</p>

$$('p').hasClass('intro'); //-> true

<!-- Before -->
<h1 class="small">This is first title</h1>
<h2>This is subtitle</h2>                

$$('h1, h2').toggleClass('small');

<!-- After -->
<h1>This is first title</h1>
<h2 class="small">This is subtitle</h2>                

var isChecked = $$('input').prop('checked');

//Make all checkboxes checked
$$('input[type="checkbox"]').prop('checked', true);

$$('input').prop({
  checked: false,
  disabled: true
})                

<a href="http://google.com">Google</a>

var link = $$('a').attr('href'); //-> http://google.com

//Set all links to google
$$('a').attr('href', 'http://google.com');

$$('a').attr({
  id: 'new-id',
  title: 'Link to Google',
  href: 'http://google.com'
}) 

//Remove "src" attribute from all images
$$('img').removeAttr('src');

<input id="myInput" type="text" value="Lorem ipsum"/>

var inputVal = $$('#myInput').val(); //-> 'Lorem ipsum'

$$('input#myInput').val('New value here');

$$('a').data('user', {
    id: '123',
    name: 'John',
    email: 'john@doe.com'
});  

var user = $$('a').data('user'); 
//-> {id: '123', name: 'John', email: 'john@doe.com'}

<p data-id="123">Lorem ipsum...</p>

var id = $$('p').data('id'); //-> 123

$$('a').removeData('user')

<div id="my-div" data-loop="true" data-animate-pages="false" data-index="0" data-hello="world">
    ...
</div>

var dataset = $$('#my-div').dataset();
/* 
dataset will contain plain object with camelCase keys and with formatted boolean and number types:
{
    loop: true,
    animatePages: false,
    index: 0,
    hello: 'world'
}
*/

$$('a').transform('rotate(90deg)')

$$('p').transition(300)

$$('a').on('click', function (e) { 
  console.log('clicked'); 
});

$$('input[type="text"]').on('keyup keydown change', function (e) { 
  console.log('input value changed'); 
});

$$(document).on('click', 'a', function (e) { 
  console.log('link clicked'); 
});

$$('a').once('click', function (e) { 
  console.log('clicked'); 
});

$$('input[type="text"]').once('keyup keydown change', function (e) { 
  console.log('input value changed'); 
});

$$(document).once('click', 'a', function (e) { 
  console.log('link clicked'); 
});

function clickHandler(){
    console.log('clicked');
}
// Add event listener
$$('a').on('click', clickHandler);
// Remove event listener
$$('a').off('click', clickHandler);                  

function clickHandler(){
    console.log('clicked');
}
// Add event listener
$$(document).on('click', 'a', clickHandler);
// Remove event listener
$$(document).off('click', 'a', clickHandler);

$$('a').transitionEnd(function(){ /* do something */ })

$$('a').animationEnd(function(){ /* do something */ })

var boxWidth = $$('div#box').width();

var outerWidth = $$('div#box').outerWidth(true);

var boxHeight = $$('div#box').height();

var outerHeight = $$('div#box').outerHeight(true);

var coords = $$('.content').offset(); //-> {top: 100, left: 200}
var top = coords.top; //-> 100
var left = coords.left; //-> 200

//hide all paragraphs
$$('p').hide();

//show all paragraphs
$$('p').show();

$$('.content').css('left'); //-> 200px

$$('.content').css('left', '100px');

$$('a').css({
    left: '100px',
    top: '200px',
    color: 'red',
    width: '300px',
    marginLeft: '17px',
    'padding-right': '20px'
});

var links = $$('a');
var divs = $$('div');
links.add('p').addClass('blue');
links.add(divs).addClass('red');

var redLinks = $$('a').filter(function(index, el) {
    return $$(this).hasClass('red');
})

Utilities

Dom7.each

A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties

var fruits = ['Apple', 'Orange', 'Pineapple', 'Bannana'];
$$.each(fruits, function (index, value) {
    alert(index + ': ' + element); 
});          
 
//This produces 4 alerts:
0: Apple
1: Orange
2: Pineapple
3: Bannana

var person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
};
$$.each(person, function (key, value) {
    alert(key + ': ' + value);
});
 
//This produces 3 alerts:
firstName: John
lastName: Doe
age: 25          

Dom7.parseUrlQuery

var query = $$.parseUrlQuery('http://google.com/?id=5&foo=bar');
console.log(query); //-> {id: 5, foo: 'bar'}

Dom7.isArray

var fruits = ['Apple', 'Orange'];
console.log($$.isArray(fruits)); //-> true

Dom7.unique

var fruits = ['Apple', 'Orange', 'Apple'];
console.log($$.unique(fruits)); //-> ['Apple', 'Orange'];

Dom7.serializeObject

var params = {foo: 'bar', id: 5};
console.log($$.serializeObject(params)); //-> 'foo=bar&id=5'

Dom7.toCamelCase

var hypensCaseString = 'hello-my-world';
var camelCaseString = $$.toCamelCase(hypensCaseString);
console.log(camelCaseString); //helloMyWorld

Dom7.dataset

<div id="my-div" data-loop="true" data-animate-pages="false" data-index="0" data-hello="world">
    ...
</div>

var dataset = $$.dataset('#my-div');
/* 
dataset will create plain object with camelCase keys and with formatted boolean and number types:
{
    loop: true,
    animatePages: false,
    index: 0,
    hello: 'world'
}
*/          

Dom7.requestAnimationFrame

var animId;
function anim() {
  var left = parseInt($$('#anim').css('left'), 10) + 1;
  $$('#anim').css({left: left + 'px'})
  animId = $.requestAnimationFrame(anim);
}
animId = $.requestAnimationFrame(anim);

Dom7.cancelAnimationFrame

$.cancelAnimationFrame(animId);

Dom7.removeDiacritics

var text = $$.removeDiacritics('ÁÓL');
console.log(text); //-> 'AOL'

Ajax

Let's look at the list of available parameters

$$.ajax({
  url: 'somepage.html',
  statusCode: {
    404: function (xhr) {
      alert('page not found');
    }
  }
})

Ajax Events

Each Ajax request produces global Ajax events on document, so you can always intercept and handle them:

For example:

$$(document).on('ajax:complete', function (e) {
  var xhr = e.detail.xhr;
  console.log('request performed');
});

Shorthand Methods

Dom7.get

$$.get('blog-post.php', {foo:'bar', id:5}, function (data) {
  $$('.articles').html(data);
  console.log('Load was performed');
});

Dom7.post

$$.post('auth.php', {username:'foo', password: 'bar'}, function (data) {
  $$('.login').html(data);
  console.log('Load was performed');
});

Dom7.getJSON

$$.getJSON('items.json', function (data) {
  console.log(data);
});

Ajax Setup

// After the following setup all XHR requests will have additional 'Autorization' header
$$.ajaxSetup({
    headers: {
        'Authorization': 'sometokenvalue'
    }
})

Original Request Parameters

Each of Ajax methods returns plain XHR object, which is also available in callbacks. This default XHR object extended with the following properties:

Animation

$$('#animate-me').animate(
    /* CSS properties to animate, e.g.: */
    {
        'margin-left': 100,
        'width': 200,
        'height': 300,
        'opacity': 0.5
    },
    /* Animation parameters */
    {
        // Animation duraion in ms, optional (default to 300)
        duration: 300,
        // Animation easing, optional (default to 'swing'), can be also 'linear'
        easing: 'swing',
        /* Callbacks */
        // Animation begins, optional
        begin: function (elements) {
            console.log('animation began');
        },
        // Animation completed, optional
        complete: function (elements) {
            console.log('animation completed');
        },
        // Animation in progress, optional
        progress: function (elements, complete, remaining, start) {
            /* Where
            complete - The call's completion percentage (as a decimal value)
            remaining - How much time remains until the call completes (in ms)
            start - The absolute time at which the call began (in ms)
            */
            console.log('animation in progress');
        }
    }
);

It also supports chaining que:

$$('#animate-me')
    .animate(
        {
            'margin-left': 100,
            'width': 200,
            'height': 300,
            'opacity': 0.5
        }
    )
    .animate(
        {
            'width': 50,
            'height': 50
        }
    );