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, Angular, React, Vue, 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 6.0 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 proche de la spécification ECMAScript 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 HTTP n'est été faite à votre serveur !

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 l'embarque déjà !

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');](http://codepen.io/MachinisteWeb/pen/RWeqaB)
Dojo 92 [dojo.byId('dojo');](http://codepen.io/MachinisteWeb/pen/yYQjxp)
Prototype JS 57 [$('prototype');](http://codepen.io/MachinisteWeb/pen/yYQjEP)
jQuery 42 [$('#jquery');](http://codepen.io/MachinisteWeb/pen/EVOLLe)
MooTools 24 [document.id('mootools');](http://codepen.io/MachinisteWeb/pen/gaQzQr)

Retrouver 10 éléments du DOM par tag name

100 ops Vanilla JS Code
Vanilla JS 100 [document.getElementsByTagName('div');](http://codepen.io/MachinisteWeb/pen/BoGVzd)
Prototype JS 25 [Prototype.Selector.select('div', document);](http://codepen.io/MachinisteWeb/pen/LpXrOG)
jQuery 21 [$('div');](http://codepen.io/MachinisteWeb/pen/BoGVmJ)
Dojo 3 [dojo.query('div');](http://codepen.io/MachinisteWeb/pen/dYQKJX)
MooTools 2 [Slick.search(document, 'div', new Elements);](http://codepen.io/MachinisteWeb/pen/qOQKxO)

Vanilla JS vs jQuery

Retrouver 10 éléments du DOM par class name

100 ops Vanilla JS Code
Vanilla JS 100 [document.getElementsByClassName('vanilla');](http://codepen.io/MachinisteWeb/pen/ZbmRMN)
jQuery 17 [$('.jquery');](http://codepen.io/MachinisteWeb/pen/jbQKeQ)

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');](http://codepen.io/MachinisteWeb/pen/PPxaVQ)
jQuery 33 [$('#jquery .inner span');](http://codepen.io/MachinisteWeb/pen/YyRvgQ)

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');](http://codepen.io/MachinisteWeb/pen/gaQKJv)
jQuery 51 [$('.jquery .inner span');](http://codepen.io/MachinisteWeb/pen/ojQyrZ)

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

100 ops Vanilla JS Selectionner le nœud `
`
100 [document.getElementsByTagName('div');](http://codepen.io/MachinisteWeb/pen/PPxdWo)
99 [document.getElementById('target');](http://codepen.io/MachinisteWeb/pen/xwQaEz)
96 [document.getElementsByClassName('target');](http://codepen.io/MachinisteWeb/pen/epQLBG)
68 [document.querySelector('.vanilla .inner div');](http://codepen.io/MachinisteWeb/pen/qOQMRJ)
35 [document.querySelectorAll('.vanilla .inner div');](http://codepen.io/MachinisteWeb/pen/epQLve)

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 Text (Node) de typeNode 3, soit du texte. (...nodeList[3] est de typeNode 8 soit un Comment (commentaire)).

.Selecteur De #Nœud

#id

Obtenir un nœud par son identifiant...

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

...avec Vanilla JS

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

.classname #id tagname

Obtenir un nœud 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 nœuds 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 nœud par par son nom de classe...

$('.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 nœud 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 nœud par son nom de balise...

$('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;
});

Parcour inversé

Parcourir les nœuds 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 nœud HTML...

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

...avec Vanilla JS

<htmlElement>.getAttribute(<attributeName>);

Get Data

Obtenir une donnée d'un nœud 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 nœud HTML...

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

...avec Vanilla JS

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

Set Attribute

Définir un attribut d'un nœud HTML...

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

...avec Vanilla JS

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

Set Data

Définir une donnée d'un nœud 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

fetch(<url>, {
    method: 'GET',
    body: <data>
});

/* // IE fallback 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) {
    fetch(url)
        .then(function (data) {
            if (data.status >= 200 && data.status < 300) {
                return data;
            } 
            next(new Error('We reached our target server, but it returned an error.'));
        })
        .then(function (data) {
            next(null, data.json());
        })
        .catch(function () {
            next(new Error('There was a connection error of some sort.'));
        });
}

/* // IE fallback 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

fetch(<url>, {
    method: 'POST',
    body: <data>
});

/* // IE fallback 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) {
    fetch(url)
        .then(function (response) {
            if (response.status >= 200 && response.status < 300) {
                return response;
            } 
            next(new Error('We reached our target server, but it returned an error.'));
        })
        .then(function (response) {
            next(null, response);
        })
        .catch(function () {
            next(new Error('There was a connection error of some sort.'));
        });
}

/* // IE fallback 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...

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

...avec Vanilla JS

<htmlElement>.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>, <eventHandler>);

...avec Vanilla JS

<htmlElement>.addEventListener(<eventName>, <eventHandler>, { once: true });

/* // IE fallback <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 nœuds 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 nœud d'une liste...

$(<selector>).first();

...avec Vanilla JS

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

Has

Quels nœuds 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 nœud 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 nœud à l'index souhaité d'une liste...

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

...avec Vanilla JS

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

Last

Sélectionner le dernier nœud d'une liste...

$(<selector>).last();

...avec Vanilla JS

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

Not

Récupérer les nœuds 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 nœuds 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 nœud dans un autre nœud, à la fin...

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

...avec Vanilla JS

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

Clone

Dupliquer un nœud...

$(<htmlElement>).clone();

...avec Vanilla JS

<htmlElement>.cloneNode(true);

Compare

Comparer deux nœuds 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 nœud est le fils d'un autre...

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

...avec Vanilla JS

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

Create

Créer un nouveau nœud HTML...

$('<' + <tagString> + '>');

...avec Vanilla JS

document.createElement(<tagString>);

Empty

Effacer tout le contenu d'un nœud...

$(<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 nœud dans son parent...

$(<htmlElement>).index();

...avec Vanilla JS

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

Insert After

Créer un nœud après un nœud...

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

...avec Vanilla JS

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

Insert Before

Créer un nœud avant un nœud...

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

...avec Vanilla JS

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

Prepend

(Dé)placer un nœud dans un autre nœud, au début...

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

...avec Vanilla JS

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

Remove

Retirer un nœud du DOM...

$(<htmlElement>).remove();

...avec Vanilla JS

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

Remove Children

Retirer tous les enfants d'un nœud du DOM...

$(<htmlElement>).empty();

...avec Vanilla JS

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

Replace

Remplacer un nœud 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 nœud englobant de tous les nœuds enfants...

$(<htmlElement>).unwrap();

...avec Vanilla JS

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

Wrap

Entourer un nœud 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 nœuds 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 nœuds 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 nœuds 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 nœuds fils d'un élément...

$(<htmlElement>).children();

...avec Vanilla JS

<htmlElement>.children;

Closest Parent

Obtenir le premier nœud parent correspondant au sélecteur...

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

...avec Vanilla JS

<htmlElement>.closest(<parentSelector>);

/* // IE fallback var htmlElement = <htmlElement>, parents = []; while (htmlElement = htmlElement.parentNode) { (htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : ''; } parents[0]; */

Find Children

Trouver des nœuds enfants dans un nœud...

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

...avec Vanilla JS

<htmlElement>.querySelectorAll(<childrenSelector>);

First Child

Sélectionner le premier enfant d'un nœud...

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

...avec Vanilla JS

<htmlElement>.firstChild();

Last Child

Sélectionner le dernier enfant d'un nœud...

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

...avec Vanilla JS

<htmlElement>.lastChild();

Matches Selector

Savoir si un nœud peut-être trouver avec un sélecteur...

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

...avec Vanilla JS

<htmlElement>.matches(<selector>);

Next

Obtenir le nœud immédiatement après...

$(<htmlElement>).next();

...avec Vanilla JS

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

Next Until

Obtenir tous les nœuds suivant jusqu'à croiser le nœud 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 nœud parent immédiatement au dessus...

$(<htmlElement>).parent();

...avec Vanilla JS

<htmlElement>.parentNode;

Parents

Obtenir tous les nœuds parent correspondant au sélecteur...

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

...avec Vanilla JS

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

/* // IE fallback var htmlElement = <htmlElement>, parents = []; while (htmlElement = htmlElement.parentNode) { (htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : ''; } parents; */

Parents Until

Obtenir tous les nœuds parents précédent le nœud parent correspondant au sélecteur...

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

...avec Vanilla JS

var htmlElement =  <htmlElement>,
    parentsUntil = [],
    until = true;
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
    (until) ? parents.push(htmlElement) : until = false;
}
parentsUntil;

/* // IE fallback var htmlElement = <htmlElement>, parentsUntil = [], until = true; while (htmlElement = htmlElement.parentNode) { (until && htmlElement.matches && !htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : until = false; } parentsUntil; */

Previous

Obtenir le nœud immédiatement avant...

$(<htmlElement>).prev();

...avec Vanilla JS

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

Previous Until

Obtenir tous les nœuds précédent jusqu'à croiser le nœud du sélecteur (non inclus)...

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

...avec Vanilla JS

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

Siblings

Obtenir la liste des nœuds 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 nœud 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 nœud par rapport aux bords du premier nœud parent...

$(<htmlElement>).position();

...avec Vanilla JS

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

Offset from Viewport

Obtenir les coordonnées d'affichage du nœud 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 nœud 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> = Object.assign(<object>, <extendingObject>);

/* // IE fallback (not deep) 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(<xmlString>);

...avec Vanilla JS

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

parseXML(<xmlString>);

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 une QueryString...

$.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 :

Lire dans une autre langue