Vanilla JS - Documentation en français

Vanilla JSVanilla JS

Vanilla JS est un framework rapide, léger et multi-plateforme pour créer d'incroyables et puissantes applications JavaScript

Introduction

L'équipe de Vanilla JS maintient le moindre petit octet de code du framework et travaille dur chaque jour pour être sûr qu'il reste léger et intuitif. Qui utilise Vanilla JS ? Content que vous vous le demandiez ! En voici quelques uns :

  • Google
  • Facebook
  • YouTube
  • Yahoo
  • Wikipedia
  • Windows Live
  • Twitter
  • Amazon
  • LinkedIn
  • MSN
  • eBay
  • Microsoft
  • Tumblr
  • Apple
  • Pinterest
  • PayPal
  • Reddit
  • Netflix
  • Stack Overflow

En fait, Vanilla JS est déjà utilisé sur plus de sites que jQuery, Prototype JS, MooTools, YUI, et Google Web Toolkit - réunis !

Télécharger

Prêt à utiliser Vanilla JS ? Choisissez exactement ce dont vous avez besoin !

Options

Taille du fichier : 0 octets0 Ko non minifié, 34 octets0.03 Ko gzippé. (Taille lisibleTaille réelle)
Source sur GitHub / Npm Package

Faites un don Build Passing Version 5.6 Technical Debt Ratio

Témoignages

« Le support natif de HTML5 et les autres technologies modernes on fait de Vanilla JS mon préféré, petit à petit. »
« Vanilla JS est un concentré d'objet, il est taillé pour des applications JavaScript Orientées Objet. »
« Vanilla JS est le framework JavaScript le plus simple et compréhensif que j'ai jamais utilisé. »
« Vous ne trouverez pas plus rapide que Vanilla JS ! »

Commencer avec Vanilla JS

L'équipe de Vanilla JS est fière du fait que c'est le code de framework le plus léger que vous puissiez trouver ; en utilisant notre stratégie de déploiement, vos visiteurs auront déjà chargés en mémoire Vanilla JS avant que la moindre requête n'est été faite à votre site !

Pour utiliser Vanilla JS, mettez juste le code suivant n'importe où dans votre application HTML :

<script src="chemin/vers/vanilla.js"></script>

Quand vous êtes prêt à déployer votre application dans votre environnement de production, optez pour la plus rapide des méthodes, voyez plutôt :

 

C'est tout - pas de code. Vanilla JS est tellement populaire que les navigateurs le chargent automatiquement !

Comparaison de vitesse d'exécution

Voici quelques exemples démontrant ô combien Vanilla JS est vraiment rapide. Quand Vanilla JS réalise 100 opérations, les autres en réalisent :

Retrouver un élément du DOM par ID

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

Retrouver 10 éléments du DOM par tag name

Vanilla JS vs jQuery

Retrouver 10 éléments du DOM par class name

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

Retrouver un élément du DOM avec le sélecteur <#id> .inner span

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

Retrouver 10 éléments du DOM avec le sélecteur <.className> .inner span

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

Performance des sélecteurs Vanilla JS

Les tests sont tous effectués sur le code suivant <section id="vanilla" class="vanilla"><article class="inner"><div class="target" id="target"></div></article></section>.

Passer de jQuery à Vanilla JS

Vous trouverez ici la liste non exhaustive de tâches courantes dans Vanilla JS en comparaison avec (par exemple) jQuery.

Effectivement, lors de la création d'API, il est souvent plus judicieux de développer sans dépendance à jQuery (par exemple) et de lui préférer seulement une dépendance à Vanilla JS.

Légende

Pour bien comprendre les types d'objets représentés, utilisez cette liste :

<div class="example">
  <span>(Text into) Html Element</span>
  <!-- Comment Element -->
  Text Element
  <span>(Text into) Html Element</span>
</div>
  • querySelector(".example") retourne un HTMLElement.
  • querySelector(".example").children retourne une HTMLCollection, chaque item de la collection est un HTMLElement soit deux [span, span].
  • querySelector(".example").childNodes retourne une NodeList, chaque item de la collection est un Node, ici sept [text, span, text, comment, text, span, text].
  • querySelector(".example").childNodes[0] retourne un Node de typeNode 3, soit du texte. (...nodeList[3] est de typeNode 8 soit un commentaire).

.Node #Selecteur

#id

Obtenir un noeud par son ID...

var htmlElement = $("#id")[0];

...avec Vanilla JS

var htmlElement = document.getElementById("id");

.classname #id tagname

Obtenir un noeud avec un sélecteur...

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

...avec Vanilla JS

var htmlElement = document.querySelector("#id .classname tagname");

[.classname #id tagname]

Obtenir plusieurs noeuds avec un sélecteur...

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

...avec Vanilla JS

var nodeList = document.querySelectorAll("#id .classname tagname"); // Not Live (Snapshot)
[].forEach.call(nodeList, function (node) {
    node;
});

[.classname]

Obtenir un noeud par son Tag Name...

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

...avec Vanilla JS

var htmlCollection = document.getElementsByClassName("classname"); // Live
// var nodeList = document.querySelectorAll(".classname"); // Not Live (Snapshot)
[].forEach.call(htmlCollection, function (htmlElement) {
    htmlElement;
});

[name]

Obtenir un noeud par son attribut Name...

$('[name="classname"]').each(function (i, htmlElement) {
    htmlElement;
});

...avec Vanilla JS

var nodeList = document.getElementsByName("name"); // Live
// var nodeList = document.querySelectorAll("[name=name]"); // Not Live (Snapshot)
[].forEach.call(nodeList, function (node) {
    node;
});

[tagname]

Obtenir un noeud par son Tag Name...

$("tagname").each(function (i, htmlElement) {
    htmlElement;
});

...avec Vanilla JS

var htmlCollection = document.getElementsByTagName("tagname"); // Live
// var nodeList = document.querySelectorAll("tagname"); // Not Live (Snapshot)
[].forEach.call(htmlCollection, function (htmlElement) {
    htmlElement;
});

Inverted Loop

Parcourir les noeuds dans leur ordre inverse...

$($(".className").get().reverse()).each(function (i, htmlElement) {
    htmlElement;
});

...avec Vanilla JS

var htmlCollection = document.getElementsByClassName("className"), // Live
    i = htmlCollection.length;
while (htmlElement = htmlCollection[--i]) {
    htmlElement;
}

ATTRIBUTS

Add Class

Ajouter une classe...

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

...avec Vanilla JS

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

Get Attribute

Obtenir un attribut d'un noeud HTML...

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

...avec Vanilla JS

<htmlElement>.getAttribute(<attributeName>);

Get Data

Obtenir une donnée d'un noeud HTML...

$(<htmlElement>).data(<dataName>);

...avec Vanilla JS

<htmlElement>.getAttribute(<"data-" + dataName>);

Get Value

Obtenir la valeur d'un champ de formulaire...

$(<htmlElement>).value();

...avec Vanilla JS

<htmlElement>.value;

Has Class

Vérifier la présence d'une classe...

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

...avec Vanilla JS

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

Remove Attribute

Retirer un attribut...

$(<htmlElement>).removeAttr(<attributeName>);

...avec Vanilla JS

<htmlElement>.removeAttribute(<attributeName>);

Remove Class

Retirer une classe...

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

...avec Vanilla JS

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

Remove Data

Retirer une donnée d'un noeud HTML...

$(<htmlElement>).removeData(<dataName>);

...avec Vanilla JS

<htmlElement>.removeAttribute(<"data-" + dataName>);

Set Attribute

Définir un attribut d'un noeud HTML...

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

...avec Vanilla JS

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

Set Data

Définir une donnée d'un noeud HTML...

$(<htmlElement>).data(<dataName>, <value>);

...avec Vanilla JS

<htmlElement>.setAttribute(<"data-" + dataName>, <value>);

Set Value

Définir la valeur d'un champ de formulaire...

$(<htmlElement>).value(<value>);

...avec Vanilla JS

<htmlElement>.value = <value>;

Toggle Class

Retirer ou ajouter une classe...

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

...avec Vanilla JS

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

AJAX

GET

Enyoyer des informations à une URL par méthode GET...

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

...avec 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

Récupérer des informations au format JSON...

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;
});

...avec 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 () {
        next(new Error("There was a connection error of some sort."));
    });
}

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

    data;
});

POST

Enyoyer des informations à une URL par méthode POST...

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

...avec 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

Récupérer le contenu d'une URL...

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;
});

...avec 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(>url>, function (err, response) {
    if (err) {
      return err;
    }

    response;
});

ÉFFETS

Animation

Animer une propriété...

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

...avec Vanilla JS

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

            last = +new Date();

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

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

fadeIn(<htmlElement>, 2000, function () {
    this.style.opacity = '';
});

Hide

Cacher un élément...

$(<htmlElement>).hide();

...avec Vanilla JS

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

Show

Afficher un élément...

$(<htmlElement>).show();

...avec Vanilla JS

<htmlElement>.style.display = "";

ÉVÈNEMENTS

Hover

Équivalent du hover CSS en JavaScript...

$(<htmlElement>).hover(<eventHandlerMouseIn>, <eventHandlerMouseOut>);

...avec Vanilla JS

<htmlElement>.addEventListener("mouseenter", <eventHandlerMouseIn>);
<htmlElement>.addEventListener("mouseleave", <eventHandlerMouseOut>);

Load

Attendre que le DOM et les fichiers externes (images, styles, scripts) soient chargés...

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

...avec Vanilla JS

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

Off

Se désabonner d'un évènement...

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

...avec Vanilla JS

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

On

S'abonner à un évènement...

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

...avec Vanilla JS

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

One

S'abonner à un évènement une seule fois...

$(<htmlElement>).one(<eventName>, function () {});

...avec Vanilla JS

<htmlElement>.addEventListener(<eventName>, function callee(event) {
    event.target.removeEventListener(e.type, callee);
});

Ready

Attendre que le DOM soit chargé...

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

...avec Vanilla JS

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

Trigger

Déclencher un évènement...

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

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

...avec Vanilla JS

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

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

FILTRES

Filter

Retirer des noeuds d'une liste d'après des instructions...

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

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);

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

[].forEach.call(nodeList, function (node) {
    node;
});

First

Sélectionner le premier noeud d'une liste...

$(<selector>).first();

...avec Vanilla JS

<htmlCollection>.item(0);
// <htmlCollection>[0]

Has

Quels noeuds contiennent l'élément enfant...

$(<selector>).has(<matchesChildSelector>);

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);
[].filter.call(nodeList, function (node) {
    return node.querySelector(<matchesChildSelector>);
});

Is

Est-ce qu'au moins un noeud correspond...

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

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);
[].some.call(nodeList, function (node) {
    return node.matches(<matchesSelector>);
});

Item

Sélectionner un noeud à l'index souhaité d'une liste...

$(<selector>).eq(<index>);

...avec Vanilla JS

<htmlCollection>.item(<index>);
// <htmlCollection>[<index>]

Last

Sélectionner le dernier noeud d'une liste...

$(<selector>).last();

...avec Vanilla JS

<htmlCollection>.item(<htmlCollection>.length - 1);
// <htmlCollection>[<htmlCollection>.length - 1]

Not

Récupérer les noeuds qui ne correspondent pas...

$(<selector>).not(<matchesSelector>);

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);
[].filter.call(nodeList, function (node) {
    return !node.matches(<matchesSelector>);
});

Slice

Sélectionner une portion de noeuds dans une liste...

$(<selector>).slice(<startIndex>, <endIndex>);

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);
[].slice.call(nodeList, <startIndex>, <endIndex>);

MANIPULATION

Append

Déplacer un noeud dans un autre noeud, à la fin...

$(<htmlElement>).append($(<appendHtmlElement>));
// $(<htmlElement>).append(<htmlString>);

...avec Vanilla JS

<htmlElement>.appendChild(<appendHtmlElement>);
// <htmlElement>.insertAdjacentHTML("beforeEnd", "<htmlString>");

Clone

Dupliquer un noeud...

$(<htmlElement>).clone();

...avec Vanilla JS

<htmlElement>.cloneNode(true);

Compare

Comparer deux noeuds du DOM...

var $a = $(<selectorToFirstHtmlElement>).find(<selectorToSecondHtmlElement>);
    $b = $(<selectorToSecondElement>);

$a.is($b);

...avec Vanilla JS

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

(a === b);

Contains

Savoir si un noeud est le fils d'un autre...

$.contains($(<htmlElement>), $(<childHtmlElement>));

...avec Vanilla JS

(<htmlElement> !== <childHtmlElement>) && <htmlElement>.contains(<childHtmlElement>);

Create

Créer un nouveau noeud HTML...

$(<<tagString>>);

...avec Vanilla JS

document.createElement(<tagString>);

Empty

Effacer tout le contenu d'un noeud...

$(<htmlElement>).empty();

...avec Vanilla JS

<htmlElement>.innerHTML = "";

Get HTML

Obtenir le HTML interne d'un élément...

$(<htmlElement>).html();

...avec Vanilla JS

<htmlElement>.innerHTML;

Get Node HTML

Obtenir le HTML d'un élément (lui y compris)...

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

...avec Vanilla JS

<htmlElement>.outerHTML;

Get Text

Obtenir le texte interne d'un objet...

$(<htmlElement>).text();

...avec Vanilla JS

<htmlElement>.textContent;

Index From Parent

Connaître la position d'un noeud dans son parent...

$(<htmlElement>).index();

...avec Vanilla JS

[].slice.call(<htmlElement>.parentNode.children).indexOf(<htmlElement>);

Insert After

Créer un noeud après un noeud...

$(<htmlElement>).after($(<afterHtmlElement>));
// $(<htmlElement>).after(<htmlString>);

...avec Vanilla JS

<htmlElement>.parentNode.insertBefore(<afterHtmlElement>, <htmlElement>.nextElementSibling);
// <htmlElement>.insertAdjacentHTML("afterend", <htmlString>);

Insert Before

Créer un noeud avant un noeud...

$(<htmlElement>).before($(<beforeHtmlElement>));
// $(<htmlElement>).before(<htmlString>);

...avec Vanilla JS

<htmlElement>.parentNode.insertBefore(<beforeHtmlElement>, <htmlElement>);
// <htmlElement>.insertAdjacentHTML("beforebegin", <htmlString>);

Prepend

Déplacer un noeud dans un autre noeud, au début...

$(<htmlElement>).prepend($(<prependHtmlElement>));
// $(<htmlElement>).prepend(<htmlString>);

...avec Vanilla JS

<htmlElement>.insertBefore(<prependHtmlElement>, <htmlElement>.firstChild);
// <htmlElement>.insertAdjacentHTML("afterBegin", "<htmlString>");

Remove

Retirer un noeud du DOM...

$(<htmlElement>).remove();

...avec Vanilla JS

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

Remove Children

Retirer tous les enfants d'un noeud du DOM...

$(<htmlElement>).empty();

...avec Vanilla JS

while (<htmlElement>.firstChild) {
    <htmlElement>.removeChild(<htmlElement>.firstChild);
}
// <htmlElement>.innerHTML = '';

Replace

Remplacer un noeud du DOM par un autre...

$(<htmlElement>).replaceWith($(<newHtmlElement>));

...avec Vanilla JS

<htmlElement>.parentNode.replaceChild(<newHtmlElement>, <htmlElement>);

Set HTML

Définir le HTML interne d'un élément...

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

...avec Vanilla JS

<htmlElement>.innerHTML = <htmlString>;

Set Node HTML

Définir le HTML d'un élément (lui y compris)...

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

...avec Vanilla JS

<htmlElement>.outerHTML = <htmlString>;

Set Text

Définir le texte interne d'un objet...

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

...avec Vanilla JS

<htmlElement>.textContent = <string>;

Unwrap

Retirer le noeud englobant de tous les noeuds enfants...

$(<htmlElement>).unwrap();

...avec Vanilla JS

while (<htmlElement>.firstChild) {
    <unwrapHtmlElement>.insertBefore(<htmlElement>.firstChild, <htmlElement>);
}
<unwrapHtmlElement>.removeChild(<htmlElement>);

Wrap

Entourer un noeud du DOM par un autre...

$(<htmlElement>).wrap($(<wrapHtmlElement>));

...avec Vanilla JS

<htmlElement>.parentNode.insertBefore(<wrapHtmlElement>, <htmlElement>);
<wrapHtmlElement>.appendChild(<htmlElement>);

PARCOURIR

All Next

Obtenir tous les noeuds après...

$(<htmlElement>).nextAll();

...avec Vanilla JS

var nextAll = false;
nextAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return (htmlElement.previousElementSibling === <htmlElement>) ? nextAll = true : nextAll;
});

All Parents

Obtenir tous les noeuds parents au dessus...

var parents = $(<htmlElement>).parents();

...avec Vanilla JS

var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode) {
    parents.push(htmlElement);
}
parents;

All Previous

Obtenir tous les noeuds avant...

$(<htmlElement>).prevAll();

...avec Vanilla JS

var prevAll = true;
prevAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return (htmlElement === <htmlElement>) ? prevAll = false : prevAll;
});

Children

Obtenir les noeuds fils d'un élément...

$(<htmlElement>).children();

...avec Vanilla JS

<htmlElement>.children;

Closest Parent

Obtenir le premier noeud parent correspondant au sélecteur...

$(<htmlElement>).closest(<parentSelector>);

...avec Vanilla JS

var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode) {
    (htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : "";
}
parents[0];
// <htmlElement>.closest(<parentSelector>); // More fast but not supported by IE/EDGE

Find Children

Trouver des noeuds enfants dans un noeud...

$(<htmlElement>).find(<childrenSelector>);

...avec Vanilla JS

<htmlElement>.querySelectorAll(<childrenSelector>);

First Child

Sélectionner le premier enfant d'un noeud...

$(<htmlElement>).children().first();

...avec Vanilla JS

<htmlElement>.firstChild();

Last Child

Sélectionner le dernier enfant d'un noeud...

$(<htmlElement>).children().last();

...avec Vanilla JS

<htmlElement>.lastChild();

Matches Selector

Savoir si un noeud peut-être trouver avec un sélecteur...

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

...avec Vanilla JS

<htmlElement>.matches(<selector>);

Next

Obtenir le noeud immédiatement après...

$(<htmlElement>).next();

...avec Vanilla JS

<htmlElement>.nextElementSibling; // HTMLElement
// <htmlElement>.nextSibling; // Node

Next Until

Obtenir tous les noeuds suivant jusqu'à croiser le noeud du sélecteur (non inclus)...

$(<htmlElement>).nextUntil(<nextSelector>);

...avec Vanilla JS

var htmlElement = <htmlElement>,
    nextUntil = [],
    until = true;
while (htmlElement = htmlElement.nextElementSibling) {
    (until && htmlElement && !htmlElement.matches(<nextSelector>)) ? nextUntil.push(htmlElement) : until = false;
}
nextUntil;

Parent

Obtenir le noeud parent immédiatement au dessus...

$(<htmlElement>).parent();

...avec Vanilla JS

<htmlElement>.parentNode;

Parents

Obtenir tous les noeuds parent correspondant au sélecteur...

var parents = $(<htmlElement>).parents(<parentsSelector>);

...avec Vanilla JS

var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode) {
    (htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : "";
/* // More fast alternative but not supported by IE/Edge
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
    parents.push(htmlElement); */
}
parents;

Parents Until

Obtenir tous les noeuds parents précédent le noeud parent correspondant au sélecteur...

var parents = $(<htmlElement>).parentsUntil(<parentsSelector>);

...avec Vanilla JS

var htmlElement =  <htmlElement>,
    parentsUntil = [],
    until = true;
while (htmlElement = htmlElement.parentNode) {
    (until && htmlElement.matches && !htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : until = false;
/* // More fast alternative but not supported by IE/Edge
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
    (until) ? parents.push(htmlElement) : until = false; */
}
parentsUntil;

Previous

Obtenir le noeud immédiatement avant...

$(<htmlElement>).prev();

...avec Vanilla JS

<htmlElement>.previousElementSibling; // HTMLElement
// <htmlElement>.previousSibling // Node

Previous Until

Obtenir tous les noeuds précédent jusqu'à croiser le noeud du sélecteur (non inclus)...

$(<htmlElement>).prevUtil(<previousSelector>);

...avec Vanilla JS

var htmlElement = <htmlElement>,
    previousUntil = [],
    until = true;
while (htmlElement = htmlElement.nextElementSibling) {
    (until && htmlElement && !htmlElement.matches(<previousSelector>)) ? previousUntil.push(htmlElement) : until = false;
}
previousUntil;

Siblings

Obtenir la liste des noeuds voisins...

$(<htmlElement>).siblings();

...avec Vanilla JS

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

STYLES

Get Style

Obtenir une propriété d'une règle CSS...

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

...avec Vanilla JS

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

Get Scroll Left

Obtenir la position de la barre de défilement horizontal...

$(<htmlElement>).scrollLeft();

...avec Vanilla JS

<htmlElement>.scrollLeft;

Get Scroll Top

Obtenir la position de la barre de défilement vertical...

$(<htmlElement>).scrollTop();

...avec Vanilla JS

<htmlElement>.scrollTop;

Inner Height

Obtenir la hauteur d'un élément en incluant la marge interne sans la bordure...

$(<htmlElement>).innerHeight();

...avec Vanilla JS

<htmlElement>.clientHeight

Inner Width

Obtenir la largeur d'un élément en incluant la marge interne sans la bordure...

$(<htmlElement>).innerWidth();

...avec Vanilla JS

<htmlElement>.clientWidth

Offset from Document

Obtenir les coordonnées d'affichage du noeud par rapport aux bords de la page...

$(<htmlElement>).offset();

...avec Vanilla JS

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

Offset from Parent

Obtenir les coordonnées d'affichage du noeud par rapport aux bords du premier noeud parent...

$(<htmlElement>).position();

...avec Vanilla JS

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

Offset from Viewport

Obtenir les coordonnées d'affichage du noeud par rapport aux bords de la partie visible de la fenêtre...

$(<htmlElement>).offset();

...avec Vanilla JS

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

Outer Height

Obtenir la hauteur d'un élément en incluant la marge interne et la bordure...

$(<htmlElement>).outerHeight();

...avec Vanilla JS

<htmlElement>.offsetHeight

Outer Width

Obtenir la largeur d'un élément en incluant la marge interne et la bordure...

$(<htmlElement>).outerWidth();

...avec Vanilla JS

<htmlElement>.offsetWidth

Parent Not Static

Obtient le premier noeud parent qui n'est pas en position: static s'il existe...

$(<htmlElement>).offsetParent();

...avec Vanilla JS

(<htmlElement>.offsetParent || <htmlElement>)

Set Style

Définir une propriété CSS dans l'attribut style...

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

...avec Vanilla JS

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

Set Scroll Left

Définir la position de la barre de défilement horizontal...

$(<htmlElement>).scrollLeft(<distance>);

...avec Vanilla JS

<htmlElement>.scrollLeft = <distance>;

Set Scroll Top

Définir la position de la barre de défilement vertical...

$(<htmlElement>).scrollTop(<distance>);

...avec Vanilla JS

<htmlElement>.scrollTop = <distance>;

UTILES

Array Each

Lister les éléments d'un tableau...

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

...avec Vanilla JS

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

Change Futur Context

Définir le contexte d'execution qui sera utilisé à l'instanciation de la fonction...

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

...avec Vanilla JS

<fn>.bind(<context>);

Extend

Étendre un objet avec d'autres objets...

<object> = $.extend(<extendingObject>, <object>);

...avec Vanilla JS

Object.keys(<object>).forEach(function (key) {
    <object>[key] = (<extendingObject>[key]) ? <extendingObject>[key] : <object>[key];
});
<object>;

Index Of

Trouver la position d'un élément dans un tableau...

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

...avec Vanilla JS

<array>.indexOf(<item>);

Is Array

Savoir si un élément est un tableau...

$.isArray(<array>);

...avec Vanilla JS

Array.isArray(<array>);

Map

Transformer un tableau en un autre suivant des opérations sur chaque élément...

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

...avec Vanilla JS

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

Now

Retourner le timestamp courant...

$.now();

...avec Vanilla JS

Date.now();

Parse HTML

Transformer une chaine de caractère en objet HTML...

$.parseHTML(<htmlString>);

...avec Vanilla JS

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

parseHTML(<htmlString>);

Parse JSON

Transformer une chaine de caractère en objet JSON...

$.parseJSON(<jsonString>);

...avec Vanilla JS

JSON.parse(<jsonString>);

Parse XML

Transformer une chaine de caractère en objet XML...

$.parseXML(<htmlString>);

...avec Vanilla JS

function parseXML(htmlString) {
    return (new DOMParser()).parseFromString(htmlString,"text/xml");
}

parseXML(<htmlString>);

Serialize Array

Récupérer tous les champs de formulaire dans un Array JSON...

$.serializeArray(<form>);

...avec Vanilla JS

function serializeArray(form) {
    var field, length, output = [];

    if (typeof form === "object" && form.nodeName === "FORM") {
        var length = form.elements.length;
        for (i = 0; i < length; i++) {
            field = form.elements[i];
            if (field.name && !field.disabled && field.type !== "file" && field.type != "reset" && field.type != "submit" && field.type != "button") {
                if (field.type === "select-multiple") {
                    length = form.elements[i].options.length;
                    for (j = 0; j < length; j++) {
                        if(field.options[j].selected)
                            output[output.length] = { name: field.name, value: field.options[j].value };
                    }
                } else if ((field.type !== "checkbox" && field.type !== "radio") || field.checked) {
                    output[output.length] = { name: field.name, value: field.value };
                }
            }
        }
    }

    return output;
}
serializeArray(<form>);

Serialize String

Récupérer tous les champs de formulaire dans un Array JSON...

$.serialize(<form>);

...avec Vanilla JS

function serialize(form) {
    var field, length, output = [];

    if (typeof form === "object" && form.nodeName === "FORM") {
        var length = form.elements.length;
        for (var i = 0; i < length; i++) {
            field = form.elements[i];
            if (field.name && !field.disabled && field.type !== "file" && field.type !== "reset" && field.type !== "submit" && field.type !== 'button') {
                if (field.type === "select-multiple") {
                    length = form.elements[i].options.length;
                    for (var j=0; j < length; j++) {
                        if (field.options[j].selected) {
                            output[output.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].value);
                        }
                    }
                } else if ((field.type !== "checkbox" && field.type !== "radio") || field.checked) {
                    output[output.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
                }
            }
        }
    }

    return output.join("&").replace(/%20/g, "+");
}
serialize(<form>);

Trim

Transformer une chaine de caractère en objet JSON...

$.trim(<string>);

...avec Vanilla JS

<string>.trim();

PLUS

Je vais maintenir cette liste au fur et à mesure que j'utiliserai moi-même Vanilla JS. Vous pouvez l'alimenter en postant dans les commentaires.

Pour aller plus loin

Pour plus d'informations à propos de Vanilla JS :