Correct Methods to Hide Elements by Class Name in Pure JavaScript

Problem Analysis

In JavaScript development, hiding elements by class name is a common requirement. Many developers attempt to use code like document.getElementsByClassName('appBanner').style.visibility='hidden', but this results in errors because document.getElementsByClassName returns an HTMLCollection object, not a single element.

Characteristics of HTMLCollection

HTMLCollection is an array-like object containing all elements matching the specified class name. Unlike individual elements, HTMLCollection does not have a style property, so directly setting style properties on it will fail. This is a common misunderstanding among beginners.

Solutions

Method 1: Using Subscript Access

The simplest solution is to access the first element in the HTMLCollection using subscript notation:

document.getElementsByClassName('appBanner')[0].style.visibility = 'hidden';

This method is suitable when you only need to manipulate the first matching element.

Method 2: Using forEach Loop

If you need to manipulate all matching elements, you can use querySelectorAll with forEach:

[].forEach.call(document.querySelectorAll('.appBanner'), function (el) {
  el.style.visibility = 'hidden';
});

This method utilizes the array's forEach method to iterate through all matching elements.

Method 3: Using for...of Loop

In environments supporting ES6, you can use the more concise for...of syntax:

for (let el of document.querySelectorAll('.appBanner')) el.style.visibility = 'hidden';

Method 4: Using display Property

Another common approach is to use the display property:

var appBanners = document.getElementsByClassName('appBanner');
for (var i = 0; i < appBanners.length; i++) {
    appBanners[i].style.display = 'none';
}

The main difference between display: none and visibility: hidden is that the former completely removes the element from the document flow, while the latter only hides the element but preserves its space.

Best Practices Using CSS Classes

While inline styles work, using CSS classes to control element visibility is a better practice. This approach offers better performance and more flexible control.

Defining CSS Classes

.toggle-content {
  display: none;
}
.toggle-content.is-visible {
  display: block;
}

JavaScript Implementation

// Show element
var show = function (elem) {
  elem.classList.add('is-visible');
};

// Hide element
var hide = function (elem) {
  elem.classList.remove('is-visible');
};

// Toggle element visibility
var toggle = function (elem) {
  elem.classList.toggle('is-visible');
};

HTML Structure

<div class="toggle-content is-visible">Visible by default</div>
<div class="toggle-content">Hidden by default</div>

Performance Considerations

The CSS class method performs better than directly modifying inline styles because browsers can optimize the application of CSS classes more effectively. Additionally, this approach provides clearer separation between styles and behavior, making maintenance easier.

Compatibility Considerations

When choosing an implementation method, consider the browser compatibility of your target environment:

• getElementsByClassName is supported in all modern browsers
• querySelectorAll is supported in IE8+
• for...of requires ES6 support
• classList is fully supported in IE10+

Conclusion

Hiding elements by class name in pure JavaScript can be achieved through various methods. Understanding the characteristics of HTMLCollection is crucial, and the choice of method depends on specific requirements, performance needs, and browser compatibility considerations. The CSS class approach is generally the best practice, offering superior performance and maintainability.