Will the real DOM manipulator 

please stand up



the best thing since JavaScript

the DOM API and XHR requests in IE

From this

function getElementsByClass(searchClass,node,tag) {

	var classElements = new Array();

	if ( node == null )

		node = document;

	if ( tag == null )

		tag = '*';

	var els = node.getElementsByTagName(tag);

	var elsLen = els.length;

	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

	for (i = 0, j = 0; i < elsLen; i++) {

		if ( pattern.test(els[i].className) ) {

			classElements[j] = els[i];




	return classElements;


to this


Using jQuery for like...everything

Standing on our own

Let's talk browser support

  • know your audience/stats

  • communicate like a human

  • users vs developers -> people

Selecting stuff

querySelector and querySelectorAll

var el = document.querySelector('#mySingleElement');console.log(el); // <div id=​"mySingleElement">​</div>​
var els = document.querySelectorAll('.els');console.log(els); // [div.els, div.els]

Looping stuff

decrementing while loop

var elsL = els.length;while(elsL--){    console.log(els[elsL]); // cool, but lets use array functions});


els.forEach(function(el){    console.log(el); // ace?});

Looping stuff

Not quite...

Uncaught TypeError: Object #<NodeList> has no method 'forEach'

Looping stuff

"Arrays. Lots of arrays" - Neo

var _each = Array.prototype.forEach;
_each.call(els, function(el){
    console.log(el); // <div class="els"></div>

Event listeners

$('.els').on('click', function(){

_each.call(els, function(el){
el.addEventListener('click', function(){ this.style.display = 'none'; });});

Managing classes

$('.els').on('click', function(){

_each.call(els, function(el){
el.addEventListener('click', function(){ this.classList.add('danger', 'foo'); this.classList.remove('alert'); this.classList.toggle('show');


Old, horrendous JavaScript way

var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    try {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xhr = false;



$.ajax({    url: '/api/users/',    type: 'POST',    data: {        name: 'eduardo saverin',        job: 'CFO'    },    success: function(user){        console.log(user);    }});


Nice, concise way

var xhr = new XMLHttpRequest();xhr.open('POST', '/api/users/', true);xhr.send({    name: 'eduardo saverin',    job: 'CFO'});xhr.onreadystatechange = function(){    if(xhr.readyState == 4){        console.log(xhr.responseText);    }}



File Uploading

document.querySelector('#file-input').addEventListener('change', function(){    var file = this.files[0];    var formData = new FormData();    formData.append('file', file);        var xhr = new XMLHttpRequest;    xhr.open('POST', '/fileProcessor', true);    xhr.send(formData);});

Like, real use case stuff

Animating some tiles with jQuery

function setAnimationDelay() {    $( ".square" ).each(function( index ) {        var intValue = $(this).attr('data-anim-int')*1000;        $(this).text(intValue);        var el = this;
setInterval(function() { $(el).toggleClass('active'); },intValue); });}

Like, real use case stuff

Animating some tiles with JavaScript (OMG SAME LINE COUNT BRO)

var _each = Array.prototype.forEach;
function setAnimationDelay(){ _.each.call(document.querySelectorAll('.square'), function(el){ var intValue = el.getAttribute('data-anim-int') * 1000; el.innerHTML = intValue; setInterval(function(){ el.classList.toggle('active'); }, intValue); });}

This is all great, but like...why?

It's easy to write unoptimised jQuery (* I have this in production)
$('.myEls').each(function(){    $(this).click(function(){        $('#myEl').addClass('danger').not(':first-child').slideDown();        $('#myEl').removeClass('success').not(':first-child').slideUp();

Imagine trying to write all that in JavaScript?

This is all great, but like...why...again?

Reinventing the wheel?

Moment.js = Abstracts a specific part of JavaScript
jQuery = Covers a large part of JS, ie. loops -> control flow

With jQuery, I feel like I'm always "prototyping".

With JavaScript, it feels more like writing software.

In it's defence: jQuery is the balls

  • Performant
  • Tested to the hilt
  • Excellent community
  • Low barrier to entry

When is it appropriate?

  • When you're shimming too much

  • When you *have* to support older browsers

  • Prototyping

Most excellent resources

That's all folks!

Will the real DOM manipulator please stand up

By benhowdle89

Will the real DOM manipulator please stand up

  • 3,074
Loading comments...

More from benhowdle89