Implementing hasClass with Vanilla JavaScript: From jQuery to Modern DOM APIs

Class Name Detection Methods in Vanilla JavaScript

During the transition from jQuery to vanilla JavaScript in web development, class manipulation remains one of the most fundamental and frequently used functionalities. While jQuery provides the hasClass method to check if an element contains a specific CSS class, vanilla JavaScript offers multiple approaches to achieve the same functionality.

Modern DOM API: classList.contains()

HTML5 introduced the classList API, providing standardized methods for manipulating element class names. The classList.contains() method represents the most direct modern solution for implementing hasClass functionality:

if (document.body.classList.contains('thatClass')) {
    // Execute relevant operations
}

This approach is concise, clear, and fully compliant with modern web standards. Beyond the contains method, classList provides other practical class manipulation methods:

// Add class
document.body.classList.add('thisClass');

// Remove class  
document.body.classList.remove('thatClass');

// Toggle class
document.body.classList.toggle('anotherClass');

Browser Compatibility Considerations

The classList API enjoys broad support in modern browsers: Chrome 8.0+, Firefox 3.6+, IE 10+, Opera 11.50+, Safari 5.1+. For projects requiring support for older browser versions, progressive enhancement strategies or polyfill implementations can extend compatibility.

Traditional Implementation: Regular Expression Matching

Before the advent of the classList API, developers typically used regular expressions for class name detection. This method relies on word boundary matching to ensure precise searching:

var hasClass = function(element, className) {
    return new RegExp('\\b' + className + '\\b').test(element.className);
};

Using the \\b (word boundary) regular expression ensures matching only complete class names, avoiding partial matches. For example, when searching for "thatClass" in the class string "foo thatClass bar", it won't incorrectly match partial occurrences like "thatClassic".

jQuery Source Code Implementation Analysis

jQuery's own hasClass implementation employs a more rigorous approach that accounts for various edge cases:

var className = " " + selector + " ";
if ((" " + element.className + " ").replace(/[\\n\\t]/g, " ").indexOf(" thatClass ") > -1)

This implementation ensures matching accuracy through the following steps:

• Adding spaces before and after both the class name and search string to ensure boundary matching
• Using replace(/[\\n\\t]/g, " ") to handle potential whitespace characters
• Performing exact string matching via indexOf

Building Lightweight Class Manipulation Libraries

When transitioning from jQuery to vanilla JavaScript, building custom micro-frameworks represents common practice. Below is a complete implementation of class manipulation functions:

// Check if class exists
var hasClass = function(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
};

// Add class name
var addClass = function(elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
};

// Remove class name
var removeClass = function(elem, className) {
    var newClass = ' ' + elem.className.replace(/[\\t\\r\\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\\s+|\\s+$/g, '');
    }
};

// Toggle class name
var toggleClass = function(elem, className) {
    if (hasClass(elem, className)) {
        removeClass(elem, className);
    } else {
        addClass(elem, className);
    }
};

Progressive Enhancement and Browser Feature Detection

Modern web development employs progressive enhancement strategies to balance feature richness with browser compatibility. The "Cutting the Mustard" technique detects browser support for modern APIs:

if ('querySelector' in document && 'addEventListener' in window) {
    // Modern browsers: use enhanced features
    document.documentElement.className += 'js';
}

This strategy ensures modern browsers receive full interactive experiences while older browsers maintain access to core content.

Performance Optimization and Practical Recommendations

Transitioning from jQuery to vanilla JavaScript can yield significant performance improvements:

• Reduced library size: Native implementations typically measure only a few KB, compared to jQuery's ~93KB compressed size
• Reduced abstraction layers: Direct DOM API manipulation avoids jQuery's abstraction overhead
• Better memory management: Implementing only required functionality avoids loading unnecessary modules

Practical recommendations for real-world projects:

• Prioritize classList API usage, employing polyfills when necessary for compatibility
• For complex projects, consider building custom micro-frameworks to encapsulate common functionality
• Utilize feature detection to ensure code stability across different browsers
• Regularly monitor web standard developments and promptly adopt new native APIs

Conclusion

Vanilla JavaScript offers multiple methods for implementing hasClass functionality, ranging from modern classList.contains() to traditional regular expression matching. Each approach serves specific use cases. By understanding these implementation principles and browser compatibility considerations, developers can make informed technical choices that maintain functional completeness while enhancing application performance.