Скрывание элемента по классу в чистом Javascript: как сделать

Быстрый ответ

Чтобы немедленно скрыть все элементы с определённым классом, используйте нижеприведённую команду:

Array.from(document.querySelectorAll('.yourClass')).forEach(el => el.style.display = 'none');

Вместо .yourClass укажите нужный вам класс, чтобы сделать соответствующие элементы невидимыми.

Глубже в методы

После того, как мы ознакомились с кратким ответом, давайте пройдёмся более подробно по различным методам сокрытия элементов, с учётом разных условий.

Свойство display

Когда требуется полностью спрятать элемент и освободить его место на странице, используйте свойство display:

let elements = document.querySelectorAll('.appBanner');
elements.forEach(e => e.style.display = 'none'); // Таким образом, они исчезают, не оставляя после себя никаких следов.

Подробнее об этом расскажет наш спикер на видео

HTMLCollections и обычный цикл

При использовании getElementsByClassName, которое возвращает HTMLCollection, возможно применение обычного цикла для настройки стилей элементов:

let banners = document.getElementsByClassName('appBanner');
Array.from(banners).forEach(banner => banner.style.visibility = 'hidden'); // Скажем заклинание невидимости!

Поддержка ES6 и цикл for...of

В окружениях, где поддерживается ES6, рекомендуется использование цикла for...of:

for (let el of document.querySelectorAll('.appBanner')) {
    el.style.visibility = 'hidden'; // Сначала вы видите меня, потом – нет.
}

Виден ли элемент?

Свойство visibility представляет собой альтернативу display и позволяет сделать элементы невидимыми, сохраняя при этом их изначальное пространство:

document.querySelectorAll('.appBanner').forEach(el => el.style.visibility = 'hidden'); // Элементы куда-то исчезли.

Визуализация

Оценим, как в действительности происходит сокрытие элементов HTML с помощью чистого JavaScript:

Представим группу эмодзи, которые демонстрируют это на деле:

document.querySelectorAll('.shy-emoji').forEach(emoji => emoji.style.display = 'none');

До: 😊😟😂😓😊😝😓😂😊😝😓
После: 😊😂😊😝😊😝 (застенчивые эмодзи скрылись!)

Застенчивые эмодзи научились становиться незаметным!

Учёт вопросов совместимости браузеров

Обратите внимание на совместимость ваших JavaScript-решений в различных окружениях:

• В старых версиях браузеров или окружениях без поддержки ES6 рекомендуется использовать обычный цикл for:

var elements = document.querySelectorAll('.appBanner');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none'; // Они исчезают прямо перед нашими глазами.
}

• В WebView Objective-C рекомендуется придерживаться базовых методов JavaScript, учитывая специфику исполнения кода.

Специфические случаи, скрытые проблемы и подходы к их решению

В динамических приложениях новые элементы могут добавляться после выполнения скрипта. Для отслеживания таких изменений используйте MutationObservers и применяйте стили к новым элементам по мере их добавления.

Также стоит удостовериться, что селекторы не конфликтуют со служебными словами JavaScript или с другими библиотеками.

Давайте улучшим нашу технику сокрытия

Чтобы сделать процесс сокрытия элементов ещё эффективнее, следуйте следующим рекомендациям:

• Если один селектор используется многократно, вы можете кэшировать его.
• Применяйте classList для добавления класса элементу, который уже имеет стили для сокрытия в CSS. Это оказывается быстрее и удобнее, чем присваивать стили программно каждый раз.

Полезные материалы

1. Document: querySelector() method – Web APIs | MDN — Описание метода querySelector.
2. Element: classList property – Web APIs | MDN — Описание работы с классами элементов с помощью API classList.
3. Meet the Pseudo Class Selectors | CSS-Tricks — Описание псевдоклассов CSS для более точного выбора элементов.
4. html – How can I change an element's class with JavaScript? – Stack Overflow — Обсуждение изменения классов элементов с помощью JavaScript на Stack Overflow.
5. HTML DOM Element style Property — Инструкция по изменению стилей элемента через JavaScript.
6. Convert NodeList to Array — Преобразование NodeList в массив для удобства работы.
7. CSS Layout – The display Property — Обзор свойства display в CSS для управления видимостью элементов.