Vanilla JS

Vous êtes français ? Le README derrière ce lien vous sera peut-être plus agréable.

Overview

Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications.

Use in Development

Just put the following code:

<script src="path/to/vanilla.js"></script>

Use in Production

The much faster method:

Summary

• Overview
  • Use in Development
  • Use in Production
• Summary
• Speed Comparison
  • Retrieve DOM element by ID
  • Retrieve 10 DOM elements by tag name
  • Vanilla JS vs jQuery
    • Retrieve 10 DOM elements by class name
    • Retrieve DOM element with <#id> .inner span selector
    • Retrieve 10 DOM elements with <.className> .inner span selector
  • Vanilla JS Selector Performances
• From jQuery to Vanilla JS
  • .Selector #Dom
    • #id
    • .classname #id tagname
    • [.classname #id tagname]
    • [.classname]
    • [tagname]
  • AJAX
    • GET
    • JSON
    • POST
    • Request / Response
  • EFFECTS
    • Animation
    • Hide
    • Show
  • ELEMENTS
    • Add Class
    • Append
    • Children
    • Clone
    • Compare
    • Contains
    • Empty
    • Filter
    • Find Children
    • Get Attributes
    • Get HTML
    • Get Node HTML
    • Get Style
    • Get Text
    • Has Class
    • Insert After
    • Insert Before
    • Matches Selector
    • Next
    • Offset from Document
    • Offset from Parent
    • Offset from Viewport
    • Outer Height
    • Outer Width
    • Parent
    • Parent Not Static
    • Prepend
    • Prev
    • Remove Class
    • Remove Class
    • Set Attributes
    • Set HTML
    • Set Node HTML
    • Set Style
    • Set Text
    • Siblings
    • Toggle Class
  • EVENTS
    • Load
    • Off
    • On
    • Ready
    • Trigger
  • UTILS
    • Array Each
    • Change Futur Context
    • Extend
    • Index Of
    • Is Array
    • Map
    • Now
    • Parse HTML
    • Parse JSON
    • Trim

Speed Comparison

Retrieve DOM element by ID

	Code	100 ops Vanilla JS
Vanilla JS	document.getElementById("vanilla");	100
Dojo	dojo.byId("dojo");	92
Prototype JS	$("prototype");	57
jQuery	$("#jquery");	42
MooTools	document.id("mootools");	24

Retrieve 10 DOM elements by tag name

	Code	100 ops Vanilla JS
Vanilla JS	document.getElementsByTagName("div");	100
Prototype JS	Prototype.Selector.select("div", document);	25
jQuery	$("div");	21
jQuery	dojo.query("div");	3
MooTools	Slick.search(document, "div", new Elements);	2

Vanilla JS vs jQuery

Retrieve 10 DOM elements by class name

	Code	100 ops Vanilla JS
Vanilla JS	document.getElementsByClassName("vanilla");	100
jQuery	$(".jquery");	25

Retrieve DOM element with <#id> .inner span selector

	Code	100 ops Vanilla JS
Vanilla JS	document.querySelector("#vanilla .inner span");	100
jQuery	$("#jquery .inner span");	17

Retrieve 10 DOM elements with <.className> .inner span selector

	Code	100 ops Vanilla JS
Vanilla JS	document.querySelectorAll(".vanilla .inner span");	100
jQuery	$(".jquery .inner span");	51

Vanilla JS Selector Performances

All tests are based on <section id="vanilla" class="vanilla"><article class="inner"><div class="target" id="target"></div></article></section> HTML.

Selectionner le noeud <div class="target" id="target"></div>	100 ops Vanilla JS
document.getElementsByTagName("div");	100
document.getElementById("target");	99
document.getElementsByClassName("target");	96
document.querySelector(".vanilla .inner div");	68
document.querySelectorAll(".vanilla .inner div");	35

From jQuery to Vanilla JS

.Selector #Dom

#id

From jQuery

$("#id")[0];

to Vanilla JS

document.getElementById("id");

.classname #id tagname

From jQuery

$("#id .classname tagname")[0];

to Vanilla JS

document.querySelector("#id .classname tagname");</code></pre>
    </blockquote>
</div>

[.classname #id tagname]

From jQuery

$("#id .classname tagname").each(function (i, element) {
    element;
});

to Vanilla JS

var elements = document.querySelectorAll("#id .classname tagname");
[].forEach.call(elements, function (element) {
    element;
});

[.classname]

From jQuery

$(".classname").each(function (i, element) {
    element;
});

to Vanilla JS

var elements = document.getElementsByClassName(".classname");
[].forEach.call(elements, function(element) {
    element;
});

[tagname]

From jQuery

$("div").each(function (i, element) {
    element;
});

to Vanilla JS

var elements = document.getElementsByTagName("div");
[].forEach.call(elements, function(element) {
    element;
});

AJAX

GET

From jQuery

$.ajax({
  type: "GET",
  url: <url>,
  data: <data>
});

to Vanilla JS

var get = new XMLHttpRequest();
get.open("GET", <url>, true);
get.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
get.send(<data>);

JSON

From jQuery

function getJSON(url, next) {
    $.getJSON(url, function (data) {
      next(null, data);
    }).error(function () {
      next(new Error("There was a connection error of some sort."));
    });
}

getJSON(<url>, function (err, data) {
    if (err) {
      return err;
    }

    data;
});

to Vanilla JS

function getJSON(url, next) {
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send();

    request.addEventListener("load", function () {
        if (request.status < 200 && request.status >= 400) {
            return next(new Error("We reached our target server, but it returned an error."));
        }

        next(null, JSON.parse(request.responseText));
    });

    request.addEventListener("error", function () {
        return next(new Error("There was a connection error of some sort."));
    });
}

getJSON(&lt;url>, function (err, data) {
    if (err) {
      return err;
    }

    data;
});

POST

From jQuery

$.ajax({
  type: "POST",
  url: <url>,
  data: <data>
});

to Vanilla JS

var post = new XMLHttpRequest();
post.open("POST", <url>, true);
post.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
post.send(<data>);

Request / Response

From jQuery

function request(url, next) {
    $.ajax({
        type: 'GET',
        url: url,
        success: function(response) {
          next(null, response);
        },
        error: function() {
          next(new Error("There was a connection error of some sort."));
        }
    });
}

request(>url>, function (err, response) {
    if (err) {
      return err;
    }

    response;
});

to Vanilla JS

function request(url, next) {
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send();

    request.addEventListener("load", function () {
        if (request.status < 200 && request.status >= 400) {
            return next(new Error("We reached our target server, but it returned an error."));
        }

        next(null, request.responseText);
    });

    request.addEventListener("error", function () {
        return next(new Error("There was a connection error of some sort."));
    });
}

request(&gt;url>, function (err, response) {
    if (err) {
      return err;
    }

    response;
});

EFFECTS

Animation

From jQuery

function fadeIn($element, speed, next) {
    $element.css("opacity", "0").animate({ opacity: 1 }, speed, next);
}
fadeIn($(<element>), 2000, function () {
  $(this).css("opacity", "");
});

to Vanilla JS

function fadeIn(element, speed, next) {
    var last = +new Date(),
        tick = function () {
            element.style.opacity = +element.style.opacity + (new Date() - last) / speed;

            last = +new Date();

            if (+element.style.opacity < 1) {
                requestAnimationFrame(tick);
            } else if (next) {
                next.call(element);
            }
        };

    element.style.opacity = 0;
    tick();
}

fadeIn(&lt;element>, 2000, function () {
    this.style.opacity = '';
});

Hide

From jQuery

$(<element>).hide();

to Vanilla JS

<element>.style.display = "none";

Show

From jQuery

$(<element>).show();

to Vanilla JS

<element>.style.display = "";

ELEMENTS

Add Class

From jQuery

$(<element>).addClass(<className>);

to Vanilla JS

<element>.classList.add(<className>);

Append

From jQuery

$(<element>).append(<movedElement>);

to Vanilla JS

<element>.appendChild(<movedElement>);
// <element>.insertAdjacentHTML("beforeEnd", "<htmlString>");

Children

From jQuery

$(<element>).children();

to Vanilla JS

<element>.children;

Clone

From jQuery

$(<element>).clone();

to Vanilla JS

<element>.cloneNode(true);

Compare

From jQuery

var $a = $(<element>).find(<otherElement>);
    $b = $(<otherElement>);

$a.is($b);

to Vanilla JS

var temp = document.getElementsByTagName(<element>)[0],
    a = temp.getElementsByTagName(<otherElement>)[0],
    b = document.querySelector(<otherElement>);

(a === b);

Contains

From jQuery

$.contains(<element>, <childrenElements>);

to Vanilla JS

(<element> !== <childrenElements>) && <element>.contains(<childrenElements>);

Empty

From jQuery

$(<element>).empty();

to Vanilla JS

<element>.innerHTML = "";

Filter

From jQuery

$(<element>).filter(function (i, element) {
    return <filterCondition>;
}).each(function (i, element) {
    element;
});

to Vanilla JS

var elements = document.querySelectorAll(<element>);

elements = [].filter.call(elements, function (element) {
    return <filterCondition>;
});

[].forEach.call(elements, function (element) {
    element;
});

Find Children

From jQuery

$(<element>).find(<childrenElements>);

to Vanilla JS

<element>.querySelectorAll(<childrenElements>);

Get Attributes

From jQuery

$(<element>).attr(<attributeName>);

to Vanilla JS

<element>.getAttribute(<attributeName>);

Get HTML

From jQuery

$(<element>).html();

to Vanilla JS

<element>.innerHTML;

Get Node HTML

From jQuery

$("<div>").append($(<element>).clone()).html();

to Vanilla JS

<element>.outerHTML;

Get Style

From jQuery

$(<element>).css(<property>);

to Vanilla JS

getComputedStyle(<element>)[<property>];

Get Text

From jQuery

$(<element>).text();

to Vanilla JS

<element>.textContent;

Has Class

From jQuery

$(<element>).hasClass(<className>);

to Vanilla JS

<element>.classList.contains(<className>);

Insert After

From jQuery

$(<element>).after(<htmlString>);

to Vanilla JS

<element>.insertAdjacentHTML("afterend", <htmlString>);

Insert Before

From jQuery

$(<element>).before(<htmlString>);

to Vanilla JS

<element>.insertAdjacentHTML("beforebegin", <htmlString>);

Matches Selector

From jQuery

$(<element>).is(<selector>);

to Vanilla JS

<element>.matches(<selector>);

Next

From jQuery

$(<element>).next();

to Vanilla JS

<element>.nextElementSibling;

Offset from Document

From jQuery

$(<element>).offset();

to Vanilla JS

var rect = <element>.getBoundingClientRect()
{
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft
}

Offset from Parent

From jQuery

$(<element>).position();

to Vanilla JS

{
    left: <element>.offsetLeft,
    top: <element>.offsetTop
}

Offset from Viewport

From jQuery

$(<element>).offset();

to Vanilla JS

var rect = <element>.getBoundingClientRect()
{
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft
}

Outer Height

From jQuery

$(<element>).outerHeight();

to Vanilla JS

<element>.offsetHeight

Outer Width

From jQuery

$(<element>).outerWidth();

to Vanilla JS

<element>.offsetWidth

Parent

From jQuery

$(<element>).parent();

to Vanilla JS

<element>.parentNode;

Parent Not Static

From jQuery

$(<element>).offsetParent();

to Vanilla JS

(<element>.offsetParent || <element>)

Prepend

From jQuery

$(<element>).prepend(<movedElement>);

to Vanilla JS

<element>.insertBefore(<movedElement>, <element>.firstChild);
// <element>.insertAdjacentHTML("afterBegin", "<htmlString>");

Prev

From jQuery

$(<element>).prev();

to Vanilla JS

<element>.previousElementSibling;

Remove Class

From jQuery

$(<element>).remove();

to Vanilla JS

<element>.parentNode.removeChild(<element>);

Remove Class

From jQuery

$(<element>).removeClass(<className>);

to Vanilla JS

<element>.classList.remove(<className>);

Set Attributes

From jQuery

$(<element>).attr(<attributeName>, <value>);

to Vanilla JS

<element>.setAttribute(<attributeName>, <value>);

Set HTML

From jQuery

$(<element>).html(<htmlString>);

to Vanilla JS

<element>.innerHTML = <htmlString>;

Set Node HTML

From jQuery

$(<element>).replaceWith(<htmlString>);

to Vanilla JS

<element>.outerHTML = <htmlString>;

Set Style

From jQuery

$(<element>).css(<property>, <value>);

to Vanilla JS

<element>.style.<property> = <value>;

Set Text

From jQuery

$(<element>).text(<string>);

to Vanilla JS

<element>.textContent = <string>;

Siblings

From jQuery

$(<element>).siblings();

to Vanilla JS

[].filter.call(<element>.parentNode.children, function (element) {
    return element !== <element>;
});

Toggle Class

From jQuery

$(<element>).toggleClass(<className>);

to Vanilla JS

<element>.classList.toggle(<className>);

EVENTS

Load

From jQuery

$(window).load(function () {
    // I am full loaded.
});

to Vanilla JS

window.addEventListener("load", function () {
    // I am full loaded.
});

Off

From jQuery

$(<element>).off(<eventName>, <eventHandler>);

to Vanilla JS

<element>.removeEventListener(<eventName>, <eventHandler>);

On

From jQuery

$(<element>).on(<eventName>, <eventHandler>);

to Vanilla JS

<element>.addEventListener(<eventName>, <eventHandler>);

Ready

From jQuery

$(document).ready(function () {
    // I am ready to be manipulate.
});

to Vanilla JS

document.addEventListener("DOMContentLoaded", function () {
    // I am ready to be manipulate.
});

Trigger

From jQuery

var event = jQuery.Event("click");
event.test = true;

$(<element>).click(function (event) {
    event.test; // undefined by click, true by trigger.
});
$(<element>).trigger(event);
// $(<element>).trigger("click"); // Shortcut without test property.

to Vanilla JS

var event = document.createEvent("HTMLEvents");
event.initEvent("click", true, false);
event.test = true;

<element>.addEventListener("click", function (event) {
    event.test; // undefined by click, true by trigger.
});
<element>.dispatchEvent(event);

UTILS

Array Each

From jQuery

$.each(<array>, function (i, item) {
    (item === array[i]); // true
});

to Vanilla JS

<array>.forEach(function (item, i) {
    (item === array[i]); // true
});

Change Futur Context

From jQuery

$.proxy(<fn>, <context>);

to Vanilla JS

<fn>.bind(<context>);

Extend

From jQuery

$.isArray(<array>);

to Vanilla JS

function extend(first) {
    var extended = first || {};

    for (var i = 1; i < arguments.length; i++) {
        if (!arguments[i]) {
            continue;
        }

        for (var key in arguments[i]) {
            if (arguments[i].hasOwnProperty(key)) {
                extended[key] = arguments[i][key];
            }
        }
    }

    return extended;
}

var object = extend(&lt;object1>, &lt;object2> ..., &lt;objectN>)

Index Of

From jQuery

$.inArray(<item>, <array>);

to Vanilla JS

[].indexOf(<item>);

Is Array

From jQuery

$.isArray(<array>);

to Vanilla JS

Array.isArray(<array>);

Map

From jQuery

$.map(<array>, function (item, i) {
    return <operations>;
});

to Vanilla JS

<array>.map(function (item, i) {
    return <operations>;
});

Now

From jQuery

$.now();

to Vanilla JS

Date.now();

Parse HTML

From jQuery

$.parseHTML(<htmlString>);

to Vanilla JS

function parseHTML(htmlString) {
    var body = document.implementation.createHTMLDocument().body;
    body.innerHTML = htmlString;
    return body.children;
}

parseHTML(<htmlString>);

Parse JSON

From jQuery

$.parseJSON(<jsonString>);

to Vanilla JS

JSON.parse(<jsonString>);

Trim

From jQuery

$.trim(<string>);

to Vanilla JS

<string>.trim();