Vanilla JavaScript

javascript-vs-jquery.md

Vanilla JavaScript

Some vanilla equivalents to jQuery methods.

DOM selectors

jQuery:

$('.item');

JavaScript:

document.querySelectorAll('.item');

To be precise, there are five different ways for it:

1. document.querySelectorAll(selector) -- all matching nodes
2. document.querySelector(selector) -- the first matching node
3. document.getElementById(idname) -- a single node by id
4. document.getElementsByTagName(tagname) -- all nodes by html tag
5. document.getElementsByClassName(class) -- all nodes by class

You can link those to find descendants:

var parent = document.getElementById('distinct');
var kids = parent.getElementsByClassName('item');

DOM traversing

jQuery:

$('.item').parentNode();
$('.item').children();
$('.item').children().first();
$('.item').children().last();
$('.item').next();
$('.item').prev();

JavaScript:

document.querySelector('.item').parentNode;
document.querySelector('.item').children;
document.querySelector('.item').firstElementChild;
document.querySelector('.item').lastElementChild;
document.querySelector('.item').nextElementSibling;
document.querySelector('.item').previousElementSibling;

DOM manipulation

Changing HTML

Append

jQuery:

$('.item').append('<p>Text</p>');

JavaScript:

var something = document.createElement('p');
something.appendChild(document.createTextNode('Text'));
document.querySelector('.item').appendChild(something);

Before & after

jQuery:

$('.item').before('<p>Text</p>');
$('.item').after('<p>Text</p>');

JavaScript:

document.querySelector('.item').insertAdjacentHTML('beforebegin', '<p>Text</p>');
document.querySelector('.item').insertAdjacentHTML('afterend', '<p>Text</p>');

Manage HTML content

jQuery:

$('.item').empty();
$('.item').html('<p>Text</p>');

JavaScript:

document.querySelector('.item').innerHTML = null;
document.querySelector('.item').innerHTML = '<p>Text</p>';

Manage text content

jQuery:

$('.item').text();
$('.item').text('Text');

JavaScript:

document.querySelector('.item').textContent;
document.querySelector('.item').textContent = 'Text';

Remove HTML element

jQuery:

$('.item').remove();

JavaScript:

var element = document.querySelector('.item');
element.parentNode.removeChild(element);

Check if element is empty

jQuery:

if ($('.item').is(':empty'));

JavaScript:

if (!document.querySelector('.item').hasChildNodes());

HTML attributes

Managing attributes

jQuery:

$('.home').attr('href');
$('.home').attr('href', 'http://corpo.org');

JavaScript:

document.querySelector('.home').getAttribute('href');
document.querySelector('.home').setAttribute('href', 'http://corpo.org');

Get real image dimensions

jQuery:

$('img').naturalWidth;
$('img').naturalHeight;

JavaScript:

document.querySelector('img').naturalWidth;
document.querySelector('img').naturalHeight;

Managing classes

jQuery:

$('.item').addClass('active');
$('.item').removeClass('active');
$('.item').toggleClass('active');
$('.item').hasClass('active');

JavaScript for new browsers:

document.querySelector('.item').classList.add('active');
document.querySelector('.item').classList.remove('active');
document.querySelector('.item').classList.toggle('active');
document.querySelector('.item').classList.contains('active');

Managing classes for old browsers

Set class or add to existing in a simple way:

document.querySelector('.item').className = 'active';
document.querySelector('.item').className += ' active';

Small, custom helper functions for checking if element has class (hasClass(el, cl)), adding new class (addClass(el, cl)), removing an existing class (removeClass(el, cl)) or toggling a class (toggleClass(el, cl)):

function hasClass(el, cl) {
    return el.className && new RegExp("(\\s|^)" + cl + "(\\s|$)").test(el.className);
}

function addClass(el, cl) {
    if (!hasClass(el, cl)) { el.className += ' ' + cl; }
}

function removeClass(el, cl) {
    var reg = new RegExp("(\\s|^)" + cl + "(\\s|$)");
    el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
}

function toggleClass(el, cl) {
    if (hasClass(el, cl)) { removeClass(el, cl); } else { addClass(el, cl); }
}

And then it's easy as pie:

hasClass(document.querySelector('.item'), 'active');
addClass(document.querySelector('.item'), 'active');
removeClass(document.querySelector('.item'), 'active');
toggleClass(document.querySelector('.item'), 'active');

Styles

Change style

jQuery:

$('.item').hide();
$('.item').show();
$('.item').css('border-width', '1rem');

JavaScript:

document.querySelector('.item').style.display = 'none';
document.querySelector('.item').style.display = '';
document.querySelector('.item').style.borderWidth = '1rem';

Get style

jQuery:

$('.item').css(display);

JavaScript:

var element = document.querySelector('.item');
getComputedStyle(element)[display];

Get position

jQuery:

$('.item').position().left;
$('.item').position().top;

JavaScript:

document.querySelector('.item').offsetLeft;
document.querySelector('.item').offsetTop;

Events

Click

jQuery:

$('.clickable').on('click', function(e) {
    ...
});

JavaScript:

var elements = document.querySelectorAll('.clickable');
for (var a = 0; a < elements.length; a++) {
    elements[a].addEventListener('click', function(e) {
        ...
    }, false);
}

You can also use one of these simple GlobalEventHandlers events:

1. element.onclick = functionRef -- when clicked, after the mousedown and mouseup
2. element.oninput = functionRef -- when input element value changes
3. window.onload = funcRef -- after all DOM elements and images are loaded
4. element.onscroll = functionRef -- when content of the element is scrolled

Ready

jQuery:

$(document).ready(function(){
    ...
});

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    ...
}, false);

Custom event

jQuery:

$('.item').trigger('foo');

JavaScript:

var element = document.querySelector('.item');
var foo = new Event('customEvent');
element.addEventListener('customEvent', function (e) { ... }, false);
element.dispatchEvent(foo);

With custom data

jQuery:

$('.item').trigger('customEvent', 'foo');

JavaScript:

var element = document.querySelector('.item');
var foo = new CustomEvent('customEvent', {'bar': 'fum'});
element.addEventListener('customEvent', function (e) {
    console.log(e.bar);
}, false);
element.dispatchEvent(foo);

Helpers

Each

jQuery:

$('.item').each(function(i, el){
    ...
});

JavaScript:

var elements = document.querySelectorAll('.item');
for (var a = 0; a < elements.length; a++) {
    ...
}

Index of

jQuery:

var array = ['a','b','c'];
$.inArray('b', array);

JavaScript:

var array = ['a','b','c'];
array.indexOf('b');

Now

jQuery:

$.now();

JavaScript:

Date.now();

Trim whitespace

jQuery:

$.trim(' string   ');

JavaScript:

var string = ' string   ';
string.trim();