Manipulate DOM Elements Without Writing JavaScript Code

No.js is an extremely lightweight JavaScript library that allows you do DOM manipulations without writing any JavaScript whatsoever. If that idea appeals to you, then read on and let Rob Gravelle demontrate what No.js can do for you!

Up until recently, in order to perform simple DOM manipulations in response to user interactions, you had two choices:

Use plain 'ole vanilla JavaScript.

Use a library like jQuery.

Now, there's a third option: No.js. It's an extremely lightweight JavaScript library that allows you do DOM manipulations without writing any JavaScript whatsoever. All you'll need to do is add HTML attributes within your HTML tags and No.js does the heavy lifting for you. It saves you the trouble of having to write the same old repetitive JavaScript code to add/remove classes, set attributes, or remove elements. It that idea appeals to you, then read on to see what No.js can do for you!

Including No.js in your Pages

To use No.js within your web pages, include a reference to its one script file via your standard <SCRIPT> tag. The docs recommend that you include it at the bottom of your web page:

This would probably be an opportune time to mention that, if you didn't realize it already, even though No.js saves you from writing JavaScript code, No.js itself is written in JavaScript, so the library is not suitable for browsers that have JavaScript turned off or don't support it. Rather, No.js's principal raison d'être is to give you a declarative option for achieving simple DOM manipulations.

There are two ways to download No.js: you can either download it directly as an archive, or, for your node projects, you can use npm to download No.js to your node_modules directory. In either case, here's what the download includes:

A few things to note:

The No.js file in the root is an unminified version of the script, suitable for development.

The dist directory contains the no.min.js minified version of the script.

The tutorial directory contains an HTML page with some examples of the script in action.

The npm package contains an .npmignore file, while the one from the download link contains a .gitignore file.

Alternatively, if you're so inclined, you can dispense with downloading Express entirely and link directly to the remote distribution as follows:

Only the minified version is hosted, so you might still want to download the library if only for the unminified No.js file.

Invoking the No.js Magic

No.js interprets special tag attributes that map to specific actions to take. Tags are earmarked for processing by the inclusion of the "no-js" attribute. The action tag attributes follow the following syntax:

Referencing the Current Element

In the situation where you want to target the same element that's triggering the event, you simply need to add the "-self" suffix to the attribute and exclude the target from the arguments. Here's a slightly more complicated example that reacts to the onfocus and onblur events by toggling the background color between white and powder blue. Unfortunately, you can't use the toggle-class instruction because different events trigger the changes:

Conclusion

The No.js library offers a viable declarative approach to DOM manipulations for developers who are tired of writing repetitive scripting code. Just don't get too ambitious with it. That last example about is about as far as you'd want to push things. Beyond that, it's time to go back to scripting.

Rob Gravelle resides in Ottawa, Canada. His design company has built web applications for numerous businesses and government agencies. Email him.

Rob's alter-ego, "Blackjacques", is an accomplished guitar player, who has released several CDs and cover songs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.