Vanilla Javascript

list.html

<ul id="myList">
<li>List Item One</li>
<li>List Item Two</li>
</ul>

listTraversal.js

// jQuery Version
var firstElement = jQuery('#myList li:first');
var nextElement = firstElement.next();

// Vanilla Javascript
var firstElement = document.getElementById('myList').getElementsByTagName('li')[0];
var nextElement = firstElement.nextSibling.nextSibling;

looping.js

// jQuery Version
$('#post a').addClass('postLink');

// Vanilla Javascript
var links = document.getElementById('my-element').getElementsByTagName('a');
for (i = 0; i < links.length; ++i) {
  links[0].className = 'postLink';
}

properties.js

// jQuery Version
$('#myElement').data('scale'); // Get
$('#myElement').data('scale', '10'); // Set



// Vanilla Javascript
document.getElementById('my-element').getAttribute('data-scale') // Get
document.getElementById('my-element').setAttribute('data-scale', '10') // Set

select.js

// jQuery Version
var element = $('#my-element');
var links = $('a.mylinks');
var articles = $('article');

// Vanilla Javascript
var element = document.getElementById('my-element');
var links = document.getElementsByClassName('mylinks');
var articles = document.getElementsByTagName('article');