Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Basic DOM operations without jQuery

Saturday, August 29th, 2015 by Servage

javascript-badgeToday most websites rely on Javascript, and many of them on jQuery or similar Javascript frameworks that enhance the capabilities of Javascript by making more functionality and effects possible. Entire web apps are written in Javascript, and they are getting very close to real desktop applications. You can utilize jQuery, Prototype, Ember, Angular and many others for rapid development, however, sometimes you want or need to go back to basics, and rely on pure Javascript without all the fuzz from the other frameworks. Sometimes you just need good old Javascript and nothing else. Therefore it is nice to know, that even with regular Javascript you can actually also do lots of basic DOM operations and scripting – without loading the sometimes quite extensive external libraries into your site.

Selecting elements

The Javascript function querySelectorAll is available for any DOM element, and can be used to query elements based on a given selector within the given DOM object. It is similar to the standard jQuery function.

// Select all "div" elements with jQuery:
var divs = $( 'div' );

// Select all "div" elements with pure Javascript:
var divs = document.querySelectorAll( 'div' );

The above selects a collection (multiple elements). The following is an example of selecting one specific element (note that jQuery is always an array, but pure Javascript returns a single DOM element now).

// Select specific element that has id = "container" with jQuery:
var container = $( '#container' );

// Select specific element that has id = "container" with pure Javascript:
var container = document.querySelector( '#container' );

If you have a context you want to search within, you can also do so. Let us use the previously fetched container, and select all “div” elements inside it.

// Select all "div" elements inside the container with jQuery:
var divs = $( 'div', container );

// Select all "div" elements inside the container with pure Javascript:
var divs = container.querySelectorAll( 'div' );

Iterating over elements

In jQuery there is the “each” method which simplifies this process:

divs.each( function( index )
{
	var element = this;
});

In pure Javascript your need to use a “for” loop which essentially does the same, but not as pretty:

for (i = 0; i < divs.length; ++i )
{
	var element = divs[i];
}

Changing element attributes

In jQuery you can set attributes using a method:

$('#container').attr( 'class', 'super-nice' );

In pure Javascript you have a similar method:

document.querySelector('#container').setAttribute( 'class', 'super-nice' );

Pure Javascript vs. jQuery decision

The choice of including jQuery or not depends on the project. Including jQuery generates overhead on the server and the client, but provides useful functionality – but the examples above show that you can come quite far without it. So if unnecessary or maybe not possible for compatibility or legacy reasons, you can still build quite advanced scripts using just pure Javascript.

Basic DOM operations without jQuery, 4.5 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.