Скрывание элемента по классу в чистом Javascript: как сделать
Быстрый ответ
Чтобы немедленно скрыть все элементы с определённым классом, используйте нижеприведённую команду:
Array.from(document.querySelectorAll('.yourClass')).forEach(el => el.style.display = 'none');
Вместо .yourClass
укажите нужный вам класс, чтобы сделать соответствующие элементы невидимыми.
[AsideBanner]
Глубже в методы
После того, как мы ознакомились с кратким ответом, давайте пройдёмся более подробно по различным методам сокрытия элементов, с учётом разных условий.
Свойство 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. Это оказывается быстрее и удобнее, чем присваивать стили программно каждый раз.
Полезные материалы
- Document: querySelector() method – Web APIs | MDN — Описание метода
querySelector
. - Element: classList property – Web APIs | MDN — Описание работы с классами элементов с помощью API
classList
. - Meet the Pseudo Class Selectors | CSS-Tricks — Описание псевдоклассов CSS для более точного выбора элементов.
- html – How can I change an element's class with JavaScript? – Stack Overflow — Обсуждение изменения классов элементов с помощью JavaScript на Stack Overflow.
- HTML DOM Element style Property — Инструкция по изменению стилей элемента через JavaScript.
- Convert NodeList to Array — Преобразование NodeList в массив для удобства работы.
- CSS Layout – The display Property — Обзор свойства display в CSS для управления видимостью элементов.