Something that comes up often when building front-end web applications is the need to change the classes applied to an element. For some time elements have had a className attribute which allows you to retrieve a string containing the class names separated by spaces. This is useful, but it doesn’t provide a simple way of managing the classes on an element.

Many JavaScript libraries have implemented their own helper methods for managing classes. For example, jQuery has addClass(), removeClass(), hasClass(), and toggleClass() methods.

In this post you’re going to learn how to manage classes using the classList API. This is part of the native JavaScript implementation in modern web browsers. The main advantage of using this native API is that it doesn’t require that you include a library like jQuery in your project.

The classList Object

Every HTML element has an object called classList that contains a list of the classes applied to the element, as well as methods for managing those classes.

myEle.classList;

First and foremost, classList is a DOMTokenList which contains the classes applied to an element and a property called length that represents the total number of classes.

{
        0: "column-half",
        1: "wiki-column",
        2: "text-content",
        length: 3
    }

The classList object also has five methods that can be used for managing classes. These are:

• add (class)
• contains (class)
• item (index)
• remove (class)
• toggle (class)

Each of these methods should be called directly on the classList object.

Lets take a look at each of these methods in a little more detail.

Adding Classes

The add() method is used to apply a new class to an element.

myEle.classList.add('treehouse');

To avoid duplication, the class will only be added if it doesn’t already exist.

Removing Classes

The remove() method is used to drop a class from an element.

myEle.classList.remove('treehouse');

Toggle Classes

The toggle() method will add a class to an element if it’s not already present, or remove the class if it is.

myEle.classList.toggle('treehouse');

Checking if a Class Exists

You can check to see if a certain class is applied to an element using the contains() method. This method will return true if the specified class is present, and false if it’s not.

var present = myEle.classList.contains('treehouse');

You could use this method as the condition for an if/else statement, as shown in the example below.

if (myEle.classList.contains('treehouse')) {
        // Class exists!
    } else {
        // Class not found.
    }

Finding a Class by its Index in classList

The item() method is used to retrieve a class name using the index of the class in the classList. If nothing exists at the specified index the method will return null.

var index = myEle.classList.item(0);

This method can come in handy if you need to loop through each of the classes applied to an element.

for (var i = 0; i < myEle.classList.length; i++) {
        var class = myEle.classList.item(i);
    }

Browser Support

Browser support for the classList API is good. Keep in mind that this feature was only added to Internet Explorer in version 10, so you may need to use an alternative if you need to support older versions of IE.

Support on mobile browsers is also very good.

Source: http://caniuse.com/#feat=classlist

BONUS: Finding Elements By Class

Whilst we’re on the topic of classes, lets take a look at a couple of methods that can be used to find elements using class names.

getElementsByClassName

The getElementsByClassName method will return a list of elements that have the specified class.

var elements = document.getElementsByClassName('treehouse');

You can also specify multiple class names by separating them with a space. In which case, all of the classes will need to be present on an element for it to be returned.

var elements = document.getElementsByClassName('treehouse mike frog');

Browser support for getElementsByClassName

querySelectorAll

The querySelectorAll method uses CSS selector syntax to find elements. You can match classes by preceding the class name with a dot, and IDs by using a pound-sign (#). Elements can be matched by just using the name of the tag.

var classEle = document.querySelectorAll('.treehouse');
    var idEle = document.querySelectorAll('#treehouse');
    var tagEle = document.querySelectorAll('div');

You can combine multiple selectors to create more complex queries just as you would in CSS.

var element = document.querySelectorAll('#main.treehouse');

The querySelectorAll method will return a list of all the elements that match your query. If you just wish to return a single element you can use the querySelector method. This will return the first element that matches the query.

Browser support for querySelectorAll

Summary

In this post you’ve learned how to use native JavaScript methods to manage the classes applied to HTML elements. A big advantage to using these methods over those provided by a JavaScript library like jQuery is that you don’t have the additional overhead of having to load an external library.

We’re starting to see more and more of the best features from jQuery (and other libraries) find their way into web browsers. Many of these libraries were initially developed to patch-up the basic JavaScript implementations in older browsers, so it’s nice to see this process coming full-circle.

Further Reading

• MDN: classList Documentation
• MDN: DOMTokenList Documentation
• Can I use… classList

The post Manipulating Classes Using The classList API appeared first on Treehouse Blog.

Smart fridges have never been good enough to make a difference. But a team of Korean scientists hope to change that with a new approach to the problem of making kitchen coolers clever.

You may not have heard of nonces yet, but they can be of great use in securing Web applications. Rob Gravelle shows how they work and their usage in protecting against malicious or duplicate requests that could cause undesired consequences to your web site.

UMBC’s Mobile Pervasive and Sensor Systems Laboratory is looking for subjects who live in Baltimore City to interview for a study about what influences their energy use at home. The study is part of an NSF-sponsored Green Home Study project that aims to make it easier for off-grid and grid-tied home residents to make smart choices about managing energy.

After the massive success of PSDTUTS, it seemed like a good idea to branch out into tutorials on other subjects. Since one of the most requested types of tutorials has always been for web development, that seemed like a logical place to go. And so today I’m happy to be launching NETTUTS!

So here at NETTUTS we’ll be tackling pretty much any subject to do with building websites including:

• Complete step by step website builds
• HTML and CSS techniques
• Flash effects and techniques
• Javascript and AJAX
• Dreamweaver and other tools
• … And general web development skills

As we did with PSDTUTS I’m going to have a slow start to the site with just one or two tutorials a week and then ramping up over a few months to daily tutorials and a plus membership system.

So today there isn’t much to see, but bookmark the site, add the feed to your RSS reader and get ready for a whole new series of spoonfed tutorials!

Google’s purchase of smart-thermostat maker Nest makes a lot of sense, and could help it compete against Apple.

Google made a giant bet on the so-called Internet of things Monday by announcing that it plans to pay $3.2 billion in cash for smart thermostat and smoke alarm maker Nest Labs–a move that may be as much a talent grab as an effort to position itself as a leader in the market for Internet-connected gadgets.