HTML-классы и идентификаторы необходимы для запуска JavaScript на наших страницах. В этой быстрой статье будет показано, как легко настроить таргетинг на них и использовать их с JavaScript.
В конце статьи вы найдете пример того, как применить это к реальной ситуации, связанной с прослушивателем событий.
Выбор классов HTML с помощью JavaScript
Чтобы выбрать конкретный HTML-класс с помощью JavaScript, нам нужно настроить его таргетинг, а затем сохранить как переменную.
Вот как выглядит наш HTML-элемент:
Вот одна строка JavaScript, которая нам нужна для нацеливания на этот элемент и сохранения его как переменной:
Давайте разберем это:
const vanillaDescription =: эта переменная объявляется, чтобы мы могли повторно использовать ее в другом месте нашего кода.
документ: указывает коду просмотреть документ (т. е. всю страницу).
.querySelector: это метод, который мы запускаем, чтобы указать нашему коду просмотреть документ и найти первый элемент, соответствующий конкретному селектору, который мы ищем. В данном случае мы ищем конкретный класс.
Примечание. Если мы хотим найти все элементы с этим классом, мы можем вместо этого использовать .querySelectorAll.
(‘.vanillaCupcake’): так мы сообщаем нашему методу (.querySelector), что нужно искать. В этом случае нам нужен конкретный класс. Мы должны поставить перед классом точку (чтобы сказать, что мы ищем класс). Он должен быть заключен в кавычки и круглые скобки.
Выбор идентификаторов HTML с помощью JavaScript
Чтобы выбрать HTML-идентификатор с помощью JavaScript, нам нужно указать на него, а затем сохранить как переменную.
Вот как выглядит наш HTML-элемент:
Вот одна строка JavaScript, которая нам нужна для нацеливания на этот элемент и сохранения его как переменной:
Давайте разберем это:
const chocolateDescription =: эта переменная объявляется, чтобы мы могли повторно использовать ее в другом месте нашего кода.
документ: указывает коду просмотреть документ (т. е. всю страницу).
.getElementByID: это метод, который мы запускаем, чтобы указать нашему коду просмотреть документ и найти первый элемент с конкретным идентификатором, который мы ищем.
Примечание. Помните, что в HTML идентификаторы уникальны. Мы никогда не должны повторно использовать ID. Если нам нужно получить несколько элементов, вместо этого им следует назначить класс (который можно применить к нескольким элементам одновременно).
(‘chocolateCupcake’): так мы сообщаем нашему методу (.querySelector), что искать. В этом случае нам нужен идентификатор. Префикса нет, потому что этот метод просматривает только идентификаторы. Он также должен быть заключен в кавычки и круглые скобки.
Пример использования прослушивателя событий
Теперь, когда мы хотим, чтобы наш JavaScript нацелен на эти элементы, нам нужно только вызвать переменную.
Вот пример:
Эта строка добавляет прослушиватель событий (в данном случае указатель мыши) к нашей переменной vanillaDescription.
Это означает, что мы добавляем прослушиватель событий к нашему элементу с именем класса vanillaCupcake через созданную нами переменную. Когда пользователь наводит курсор мыши на элемент, запускается специальная функция под названием «test» (функция не показана).
Для получения дополнительной информации о прослушивателях событий и о том, как их использовать, ознакомьтесь с этой статьей.
Вот и все!
Надеюсь, это поможет прояснить, как настроить таргетинг на классы и идентификаторы HTML с помощью JavaScript. Чтобы посмотреть полные файлы кода для этой статьи, их можно найти здесь.
Удачи!
