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:
<body>
...
<script src="<PATH TO LIBRARY>/nojs/dist/no.min.js"></script>
</body>
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:
<body>
...
<script src="http://nojs.io/release/0.1.1/no.min.js"></script>
</body>
</html>
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:
on-[eventType]-[action]-[propertyType]="[target] [propertyName(optional)] [propertyValue(optional)]"
Here are the supported values:
- eventType may be pretty much any supported DOM event.
- action can either be “add”, “remove”, “set”, “reset”, “toggle” or “switch”.
- propertyType can be ‘attribute”, “class”, “id”, “text”, “value” or “dom”.
Here are a few examples to illustrate:
Setting an Element’s Style
For simple styling, you can pass values to the style attribute:
<button no-js on-click-set-attribute=".target style color:blue;font-weight:bold;"> Set styles </button> <button no-js on-click-remove-attribute=".target style"> Remove styles </button> <br> <p class="target"> Watch my style change! </p>
Setting an Element’s Class
For more complicated style changes, you can always create a CSS rule and then swap it in and out using No.js:
<style>
.arial-font {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<button no-js on-click-add-class=".class-target arial-font">
Add class
</button>
<button no-js on-click-remove-class=".class-target arial-font">
Remove class
</button>
<button no-js on-click-toggle-class=".class-target arial-font">
Toggle class
</button>
<br />
<p class="class-target">
Watch my font change!
</p>
Setting an Element’s Text
Want to set an element’s text? No problem. Just include the on<event>-set-text attribute, and assign it the target and value:
<button no-js on-click-set-text=".text-target Behold my new text value!">Set text</button> <br /> <p><div class="text-target">Watch my text change!</div></p>
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:
<style>
.focus {
background-color: powderblue;
}
.no-focus {
background-color: white;
}
<input type="text"
no-js on-focus-remove-class-self="no-focus"
on-focus-add-class-self="focus"
on-blur-remove-class-self="focus"
on-blur-add-class-self="no-focus" />
</style>
You can give all of the above examples a try on Codepen.io.
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.
