По вашему запросу ничего не найдено :(
Убедитесь, что запрос написан правильно, или посмотрите другие
наши статьи:
В сегодняшней статье речь пойдет о проприетарном протоколе компании Cisco Systems - SCCP – (Skinny Client Control Protocol), который предназначен для построения корпоративных телефонных сетей на основе продуктов Cisco, таких как:
IP-Телефоны серии 7900
Софт-фоны Cisco IP communicator
Cisco Unified Communications Manager
Cisco Unity
Стоит заметить, что в телефонии существует ещё один протокол с абсолютно идентичной аббревиатурой – SCCP – Signalling Connection and Control Protocol, однако данный протокол относится к сигнализации ОКС-7, тогда как SCCP – (Skinny Client Control Protocol) работает в стеке TCP/IP.
Протокол SCCP занимает то же самое место в VoIP что и SIP, H.323 и MGCP и выполняет те же самые функции. Однако, в отличие от всех перечисленных протоколов, имеет гораздо более простой синтаксис и требует меньше компьютерных ресурсов для обработки своих сообщений.
Как и большинство VoIP протоколов SCCP предназначен для обмена сигнальными сообщениями между клиентом и сервером в процессе установления и завершения звонка.
В процессе передачи речевых данных SCCP не участвует, для этих целей служит протокол RTP - (Real-Time Transport Protocol). Кроме того, стоит отметить, что в SCCP не используется RTСP - (Real-Time Transport Control Protocol), который передает диагностическую информацию о текущем соединении. Для этих целей в SCCP имеются собственные механизмы.
Как уже было замечено, Протокол SCCP имеет очень простой синтаксис. По заголовку того или иного сообщения можно однозначно определить в каком статусе находится текущее соединение, что делает Протокол SCCP крайне удобным при траблшутинге. Для передачи сообщений SCCP используется TCP (Transmission Control Protocol) well-known порт 2000.
Соединение по SCCP невозможно рассматривать без сервера (чаще всего CUCM). SCCP имеет большое множество сообщений и отправляет их на сервер по каждому поводу, ожидая руководства к дальнейшим действиям. Выглядит это примерно так:
IP-Телефон: StationInit: Кто-то снял телефонную трубку
Сервер: StationD: Включи зуммер
Сервер: StationD: Выведи на дисплее сообщение “Введите номер”“
IP-Телефон: StationInit: Начинаю вызывать абонента, первая цифра его номера – “4”
IP-Телефон: StationInit: Вторая цифра – “7”
Каждое событие фиксируется вплоть до получения сервером сообщения о том, что телефонная трубка снова в исходном положении.
Обратите внимание, что сообщения SCCP отправляются как в сторону клиента, так и сторону сервера, поэтому для определения источника сообщения используются идентификаторы. StationInit, если источником является клиент и StationIniD, если источником является сервер телефонии. Таким образом появляется возможность в мельчайших деталях отследить любой звонок, совершенный внутри корпоративной сети.
Приведем пример некоторых сообщений SCCP:
0x0000 - Keep Alive Message – Отправляется от сервера к клиенту сразу после регистрации
0x0001 - Station Register Message – Запрос регистрации на сервере
0x0002 - Station IP Port Message – Отправляет клиент. Номер UDP порта для RTP сессии
0x0006 - Station Off Hook Message – Отправляет клиент. Снятие телефонной трубки
0x0099 - Station Display Text Message – Выводит на дисплей сообщение “Введите номер”
0x0082 - Station Start Tone Message – Включает зумер.
0x27 - Station Soft Key Event Message (new call/end call) – Если это начало вызова, то данное сообщение содержит первую цифру номера вызываемого абонента. Может также содержать промежуточные цифры номера, а также запрос на разрыв соединения (end call)
0x107 - Station Connection Statistics Request Message – Отправляется клиентом. Запрос диагностической информации (информации о задержках и потерях медиа-пакетов, джиттер-буфере, принятых и отправленных пакетах и т.д. ). Это тот самый механизм, который компенсирует отсутствие RTCP.
Как видно из данного примера, MessageID каждого сообщения крайне точно описывает соответствующее ему событие, поэтому чтение трассировок SCCP обычно не составляет труда.
Стоит также добавить, что некоторые компании, занимающиеся разработкой голосовых решений, такие как: Digium, SocketIP и Symbol Technologies, добавили поддержку протокола SCCP в свои продукты.
В проводной сети любые два устройства, которые должны взаимодействовать друг с другом, соединяются проводом. В качестве провода может выступать медный или волоконно-оптический кабель. Функциональные возможности по передаче данных по проводу, ограничены физическими свойствами провода. Строгие требования к проводам Ethernet определены в стандарте IEEE 802.3, в котором описаны способы подключения устройств, способы отправки и получения данных по проводным соединениям.
Проводные сети имеют ограничения для передачи данных по каналам связи, что не способствует, успешной коммуникации. Качество передачи данных, их успешная доставка до получателя, очень сильно зависит от типа и размера провода, количества витков, межвиткового расстояния, и максимальной длины кабеля. Все эти требования должны соответствовать стандарту IEEE 802.3.
Проводная сеть является ограниченной по длине и количеству подключаемых устройств, а именно напрямую по проводу могут подключиться только два устройства.
К основным недостаткам проводных сетей так же относится стационарность сетевого оборудования и компьютеров. Это означает, что соединенные проводами устройства, не могут легко перемещаться по помещению. Все устройства привязаны к сетевым разъемам. В современном мире очень много стало мобильных устройств и поэтому нецелесообразно привязывать их к конкретной розетке или разъёму коммуникационного оборудования.
Понятие беспроводной сети следует из ее названия, то есть данная сеть устраняет необходимость в проводе. Первостепенным становится удобство и мобильность, давая пользователям свободу перемещения в любом направлении, оставаясь подключенными к сети. Пользователь может использовать любое беспроводное устройство, которое имеет возможность подключения к сети.
Передача данных в беспроводных сетях осуществляется "по воздуху" при отсутствии препятствий и помех. При использовании беспроводной среды передачи данных, для их качественной доставки необходимо учитывать две вещи:
Беспроводные устройства должны соответствовать единому стандарту (IEEE 802.11).
Беспроводное покрытие должно охватывать ту область, на которой планируется использование устройствами.
Топологии Wireless LAN
Беспроводная связь осуществляется "по воздуху" посредством радиосигналов. Предположим, что одно устройство, передатчик, посылает радиосигналы другому устройству, приемнику. Как показано на рисунке, связь между передатчиком и приемником осуществляется в любое время, если оба устройства настроены на одну и ту же частоту (или канал) и используют одну и ту же схему для передачи данных между ними. Все это выглядит просто, за исключением того, что на самом деле это не удобно и не практично.
Для эффективного использования беспроводной сети данные должны передаваться в обоих направлениях, как показано на рисунке. Для отправки данных с устройства А на устройство В, устройство В должно дождаться прихода данных к себе и когда канал освободится отправить на устройство А.
В беспроводной связи, при одновременной передаче данных, могут возникнуть помехи, т.е. передаваемые сигналы будут мешать друг другу. Чем больше беспроводных сетей, тем выше вероятность возникновения помех. Например, на рисунке изображены четыре устройства, работающие на одном и том же канале, и то, что может произойти, если часть из них или все одновременно начнут передавать данные.
Вышенаписанное сильно напоминает нам традиционную (некоммутируемую) локальную сеть Ethernet, где несколько хостов могут подключаться к общему ресурсу и совместно использовать канал передачи данных. Чтобы эффективно использовать общий ресурс, все хосты должны работать в полудуплексном режиме, во избежание столкновений с другими уже выполняемыми передачами. Побочным эффектом является то, что ни один хост не может передавать и принимать одновременно в общей среде.
Аналогичное происходит и в беспроводной сети. Так как несколько хостов могут совместно использовать один и тот же канал, они также совместно используют "эфирное время" или доступ к этому каналу в любой момент времени. Что бы избежать конфликтных ситуаций и создание помех, хосты должны передавать данные в определенный момент времени, ожидая освобождения канала. Для работы в беспроводных сетях все устройства должны соответствовать стандарту 802.11.
Важно понимать, что по умолчанию беспроводная среда не учитывает количество устройств и не контролирует устройства, которые могут передавать данные. Любое устройство, имеющее адаптер беспроводной сети, может в любой момент подключиться к беспроводной сети.
Как минимум, беспроводная сеть должна уметь определять, что каждое устройство, подключаемое к каналу передачи данных, поддерживает общий набор параметров. Кроме того, должен быть способ контроля устройств (и пользователей), которым разрешено использовать беспроводную среду и методы, используемые для обеспечения безопасности беспроводной передачи данных.
Базовый набор услуг (BSS)
Идея состоит в том, чтобы сделать каждую беспроводную зону обслуживания замкнутой для группы мобильных устройств, которая формируется вокруг фиксированного устройства. Прежде чем устройство сможет подключиться, оно должно объявить о своих возможностях, а затем получить разрешение на подключение. В стандарте 802.11 это называется базовым набором услуг (BSS, Basic Service Set). В центре каждого BSS находится беспроводная точка доступа (AP). AP работает в инфраструктурном режиме, что означает, что он предлагает услуги, необходимые для формирования инфраструктуры беспроводной сети. AP также устанавливает свой BSS по одному беспроводному каналу. AP и члены BSS должны использовать один и тот же канал для правильной связи.
Поскольку работа BSS зависит от точки доступа, то BSS ограничена областью, равной расстоянию, на которое может распространяться сигнал точки доступа. Это называется базовой зоной обслуживания (BSA) или ячейкой. На рисунке ячейка показана в виде окружности, в центре которой имеется точка доступа. Ячейки могут выглядеть по-разному:
зависит от устройств, подключенных к AP;
зависит от физического окружения, которое может повлиять на сигналы AP;
Точка доступа (АР) служит единственной точкой контакта для каждого устройства, которое хочет использовать BSS. Она объявляет о существовании BSS, чтобы устройства могли найти его и попытаться присоединиться. Для этого AP использует уникальный идентификатор BSS (BSSID), основанный на собственном MAC-адресе.
Кроме того, точка доступа присваивает беспроводной сети идентификатор набора услуг (SSID-текстовую строку, содержащую логическое имя). Представьте себе, что BSSID - это машинный код, который однозначно идентифицирует BSS (AP). А SSID - это символьная строка, задаваемая человеком, который идентифицирует беспроводную службу.
Членство в BSS называется ассоциацией. Беспроводное устройство должно отправить запрос на ассоциацию точке доступа, и точка доступа должна либо предоставить, либо отклонить запрос. При разрешении, устройство становится клиентом, или станцией 802.11 (STA) в BSS. И что же дальше? Пока клиент беспроводной сети остается подключенным к BSS, все данные, приходящие к нему и исходящие от клиента, проходят через точку доступа, как показано на рисунке. Используя BSSID в качестве адреса источника или назначения, фреймы данных можно ретранслировать в точку доступа или из нее.
На рисунке изображено движение трафика внутри BSS. BSS содержит четыре устройства, подключенные к точке доступа по беспроводному соединению. Идентификатор набора служб (SSID) носит название "Моя сеть". Базовый идентификатор набора услуг (BSSID) - это MAC-адрес точки доступа d4:20:6d:90:ad:20. Любой клиент, связанный с BSS, не может напрямую связаться с любым другим клиентом в BSS. Весь трафик проходит через точку доступа.
Почему же два клиента должны общаться именно через точку доступа, а не напрямую? Это связано с тем, что все подключения через точку доступа и BSS стабильны и контролируются.
Система распределения
Нужно учитывать то, что BSS имеет одну точку доступа AP и не имеет явного подключения к обычной сети Ethernet. В этом случае точка доступа и связанные с ней клиенты образуют автономную сеть. Но роль точки доступа не ограничивается только управлением BSS, рано или поздно появится необходимость взаимодействия беспроводных клиентов с другими устройствами, которые не являются членами BSS. К счастью, точка доступа имеет возможность подключаться к сети Ethernet, как по беспроводным каналам, так и по проводам. Стандарт 802.11 позволяет подключаться по проводам Ethernet и использовать их в качестве распределительной системы (DS) для беспроводной BSS (см. рис.6).
Вообще можно сказать, что точка доступа выступает в качестве моста между разнородными средами передачи данных (проводной и беспроводной). Проще говоря, точка доступа отвечает за сопоставление виртуальной локальной сети (VLAN) с SSID. На рисунке точка доступа сопоставляет VLAN 10 с беспроводной локальной сетью, используя SSID "Моя сеть". Клиенты, связанные с SSID "Моя сеть", будут, подключены к VLAN 10.
Рисунок иллюстрирует систему распределения, поддерживающую BSS. Система распределения состоит из коммутатора третьего уровня в сети VLAN 10. Данный коммутатор подключен к интернету с помощью кабеля. AP (точка доступа) подключается к коммутатору так же с помощью кабеля. Точка доступа формирует BSS (базовый набор услуг). Устройства, входящие в область BSS - это все устройства, подключенные по беспроводной связи к точке доступа. Идентификатор SSID "Моя сеть" и BSSID- d4:20:6d:90:ad:20.
Данный принцип подключения позволяет сопоставлять несколько VLAN с несколькими SSID. Для этого точка доступа должна быть соединена с коммутатором магистральным каналом. На рисунке 7 VLAN 10, 20 и 30 соединены с точкой доступа через распределительную систему (DS). Точка доступа использует тег 802.1Q для сопоставления номеров VLAN с соответствующими SSID. Например, VLAN 10 сопоставляется с SSID "Моя сеть", VLAN 20 сопоставляется с SSID "Чужая сеть" и VLAN 30 к SSID "Гости".
На рисунке показан процесс поддержки нескольких SSID одной точкой доступа:
Несмотря на то, что точка доступа поддерживает одновременно несколько логических беспроводных сетей, каждый из SSID работают в одной зоне (области). Причина в том, что точка доступа использует один и тот же передатчик, приемник, антенну и канал для каждого SSID. Однако это утверждение может ввести в некоторое заблуждение: несколько SSID могут создать иллюзию масштабируемости сети. Хоть и беспроводные клиенты могут быть распределены по разным SSDI, но все же они используют совместно одну точку доступа. А это в свою очередь приводит к "борьбе" за эфирное время на канале.
Расширенный набор услуг
Обычно одна точка доступа не может охватить всю зону (область), где могут находиться клиенты. Например, потребуется беспроводное покрытие на всем этаже торгового центра, гостиницы, больницы или другого крупного здания. Что бы покрыть большую площадь, которую может охватить одна ячейка точки доступа, просто необходимо добавить больше точек доступа и распределить их по этажу (этажам).
Когда точки доступа расположены в разных местах, все они могут быть связаны между собой коммутируемой инфраструктурой. В стандарте 802.11 эта возможность называется расширенным набором услуг (extended service set (ESS))
Расширенный набор услуг показан на рисунке.
Идея состоит в том, чтобы заставить несколько точек доступа взаимодействовать так, чтобы беспроводное подключение было не заметным для клиента. В идеале, любые SSID, определенные на одной точке доступа, так же должны быть определены на всех остальных точках доступа в ESS (Extended Service Set). В противном случае клиенту приходилось бы каждый раз переподключаться, как только бы он попадал в ячейку другой точки доступа.
Как видно из рисунка, что каждая ячейка имеет уникальный BSSID, но обе ячейки имеют общий SSID. Независимо от местоположения клиента в пределах ESS, SSID останется тем же самым, но клиент всегда может отличить одну точку доступа от другой.
На рисунке показан принцип работы расширенного набора услуг. Коммутатор (VLAN 10) подключен к интернету по кабелю. Две точки доступа подключены к этому коммутатору так же проводами. Эти точки располагаются рядом так, что области их действия пересекаются. BSS двух точек доступа, объединены, и образуют расширенный набор услуг (ESS). AP-1 имеет BSSID d4:20:6d:90:ad:20, а её базовый набор услуг-BSS-1. Точка доступа подключена к клиенту по беспроводной сети. AP2 имеет BSSID e6:22:47:af:c3:70, а её базовый набор услуг-BSS-2. Точка доступа подключена к клиенту по беспроводной сети. SSID обоих BSS - это "Моя сеть". Переход клиента от одной точки доступа к другой называется роумингом.
В ESS беспроводной клиент может связываться с одной точкой доступа, пока он физически расположен рядом с этой точкой. При перемещении клиента в другое место, он автоматически подключается к ближайшей точке доступа. Переход от одной точки доступа к другой называется роумингом. Имейте в виду, что каждая точка предлагает свой собственный BSS на своем собственном канале, чтобы предотвратить помехи между точками доступа. Так как беспроводное устройство (клиентское) может перемещаться от одной точки доступа к другой, оно должно уметь сканировать доступные каналы, чтобы найти новую точку доступа (и BSS) для переподключения. Фактически клиент перемещается от BSS к BSS и от канала к каналу.
Независимый базовый набор услуг
Обычно беспроводная сеть использует точку доступа для организации, контроля и масштабируемости. Иногда это невозможно или неудобно в различных ситуациях. Например, два человека, которые хотят обменяться электронными документами на встрече, могут не найти доступную BSS или не смогут пройти аутентификацию в сети. Кроме того, многие принтеры могут печатать документы по беспроводной сети, не полагаясь на обычный BSS или точку доступа.
Стандарт 802.11 позволяет двум или более беспроводным клиентам напрямую связываться друг с другом, без каких-либо посредников сетевого подключения. Это называется специальной беспроводной сетью (ad hoc) или независимым базовым набором услуг (IBSS), как показано на рисунке. Чтобы это работало, одно из устройств должно стать главным и разослать в эфир свое сетевое имя, необходимые параметры беспроводного подключения, так же как это сделала бы точка доступа. Любое другое устройство может затем присоединиться по мере необходимости. IBSS предназначены для организации небольшой беспроводной сети для восьми - десяти устройств. Эта сеть не масштабируема.
Что такое DOM?
DOM
(Document Object Model) – это объектная модель документа. Это интерфейс между JavaScript и веб-браузером.
С помощью DOM вы можете написать код JavaScript для создания, изменения или удаления элементов HTML, установки стилей, классов и атрибутов, а также для принятия событий и реагирования на них.
Дерево DOM формируется из HTML-документа, и с ним уже можно будет взаимодействовать. DOM – это очень сложный API, у которого есть методы и свойства для взаимодействия с деревом DOM.
Как работает DOM – за кадром
DOM продуманно организован. Родительский элемент называется EventTarget. Приведенная ниже диаграмма поможет вам лучше понять, как это работает:
EventTarget
– это интерфейс, реализуемый объектами, которые могут принимать события и у которых могут быть обработчики этих событий. Иными словами, любой источник событий реализует три метода, которые связаны с этим интерфейсом. Самыми распространенными генераторами событий являются Element и его дочерние элементы, Document и Window. Другие объекты также могут выступать в качестве источников событий.
Объект Window
- это окно браузера. Все глобальные объекты, функции и переменные JavaScript автоматически становятся частью объекта Window. Глобальные переменные – это свойства Window. Глобальные функции – это методы Window. И даже Document (DOM HTML) является свойством Window.
window.document.getElementById("header");
// Both are same
document.getElementById("header");
В модели дом DOM есть узлы., и все части документа, такие как элементы, атрибуты, текст и т.д., организованы в виде иерархической древовидной структуры, которая состоит из родителей и потомков. Все эти части документа называются узлами (Node).
Node на приведенной выше диаграмме представлен как объект JavaScript. В основном мы работаем с document, у которого есть такие распространенные методы, как document.queryselector(), document.getElementBy Id() и т.д.
Теперь давайте посмотрим на document.
Как выбирать, создавать и удалять элементы с помощью DOM
С помощью DOM мы можем выбирать, удалять и создавать элементы в JavaScript.
Как выбирать элементы
Существует несколько способов выбрать HTML-элементы (HTML Elements) в JavaScript. Здесь мы рассмотрим следующие методы:
document.getElementById();
document.getElementByClassName();
document.getElementByTagName();
document.querySelector();
document.querySelectorAll();
Как использовать метод document.getElementById()
Метод getElementById() возвращает элемент, идентификатор которого соответствует переданной строке. Идентификаторы элементов HTML должны быть уникальными, поэтому это самый быстрый способ выбрать элемент с идентификатором.
Пример:
const ele = document.getElementById("IDName");
console.log(ele); // This will log the whole HTML element
Как использовать метод document.getElementByClassName()
Метод document.getElementByClassName() возвращает HTMLCollection элементов, которые соответствуют имени переданного класса. Можно искать сразу несколько имен классов, передав их через пробел. Тогда этот метод вернет «живую» HTMLCollection.
Что такое «живая» HTMLCollection? Это означает, что как только мы получим HTMLCollection для какого-то имени класса, и если мы добавим элемент с тем же именем класса, то HTMLCollection автоматически обновится.
Пример:
const ele = document.getElementByClassName("ClassName");
console.log(ele); // Logs Live HTMLCollection
Как использовать метод document.getElementByTagName()
Метод document.getElementByTagName() возвращает HTMLCollection элементов, которые соответствуют переданному имени тега. Его можно вызывать для любого элемента HTML. Метод вернет «живую» HTMLCollection.
Пример:
const paragraph = document.getElementByTagName("p");
const heading = document.getElementByTagName("h1");
console.log(paragraph); // p element HTMLCollection
console.log(heading); // h1 element HTMLCollection
Как использовать метод document.querySelector()
Метод document.querySelector() возвращает первый элемент, который соответствует переданному селектору. Здесь мы можем передать имя класса, идентификатор и имя тега. Давайте посмотрим на пример ниже:
const id = document.querySelector("#idname"); // using id
const classname = document.querySelector(".classname"); // using class
const tag = document.querySelector("p"); // using tagname
Правила выбора:
если вы выбираете по имени класса, то используйте (.) в начале. Например, (“.classname”).
если вы выбираете по идентификатору, то используйте (#) в начале. Например, (“#id”).
если вы выбираете по имени тега, то просто введите тег. Например, (“p”).
Как использовать метод document.querySelectorAll()
Метод document.querySelectorAll() - это расширение метода querySelector. Этот метод возвращает все элементы, которые соответсвуют переданному селектору. Он возвращает «неживую» коллекцию Nodelist.
Пример:
const ele = document.querySelectorAll("p");
console.log(ele); // return nodelist collection of p tag
ПРИМЕЧАНИЕ
: HTMLCollection – это «живая» коллекция, а коллекция Nodelist – статическая.
Как создавать элементы
Вы можете создавать HTML-элементы в JavaScript и динамически добавлять их в HTML. Вы можете создать любой элемент HTML с помощью метода document.createElement(), просто передав имя тега в скобках.
После того, как элемент будет создан, вы сможете добавить к нему имя класса, атрибуты и текст.
Вот пример:
const ele = document.createElement("a");
ele.innerText = "Click Me";
ele.classList.add("text-left");
ele.setAttribute("href", "www.google.com");
// update to existing element in HTML
document.querySelector(".links").prepend(ele);
document.querySelector(".links").append(ele);
document.querySelector(".links").befor(ele);
document.querySelector(".links").after(ele);
// Simalar to below anchor tag
// Click Me
В приведенном выше примере мы создали тег привязки (anchor) в JavaScript и добавили атрибуты и имя класса к этому тегу. Там же у нас есть четыре метода для того, чтобы обновить созданный элемент в HTML.
prepend(): вставляет данные поверх своего первого дочернего элемента.
append(): вставляем данные или содержимое внутрь элемента по последнему индексу.
before(): вставляет данные перед выбранным элементом.
after(): помещает элемент после указанного элемента. Или можно сказать, что он вставляет данные за пределами элемента (делая это содержимое элементом того же уровня) в набор подходящих элементов.
Как удалять элементы
Мы знаем, как создавать элементы на JavaScript и помещать их в HTML. Но, что если нам нужно удалить элементы в HTML? Это довольно просто! Нам достаточно воспользоваться методом remove() для нужного элемента.
Вот пример:
const ele = document.querySelector("p");
// This will remove ele when clicked on
ele.addEventListner('click', function(){
ele.remove();
})
Как управлять CSS из JavaScript
Мы знаем, как управлять HTML из JavaScript. А теперь мы узнаем, как управлять CSS из JavaScript. Это может помочь вам динамически менять стиль ваших веб-страниц.
Например, если вы нажимаете на элемент, то его фоновый цвет должен поменяться. Это реально сделать, управляя CSS из JavaScript.
Вот пример синтаксиса:
const ele = document.querySelector("desired element");
ele.style.propertyName = value;
// E.g -
ele.style.color = red;
Когда вы меняете свойства CSS с помощью JavaScript, помните, что всякий раз, когда в CSS печатается «-», в JavaScript там будет стоять заглавная буква. Например, в CSS вы бы написали background-color, а в JavaScript – backgroundColor (с большой буквы C).
Вот пример:
const ele = document.querySelector("div");
ele.style.backgroundColor = "red";
Предположим, что вы написали код CSS для своего проекта и хотите добавить классы с помощью JavaScript. Это можно сделать с помощью classList в JavaScript.
Вот еще один пример:
const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // add class bg-red to existing class list
ele.classList.remove("pb-4");// remove class bg-red from existing class list
ele.classList.toggle("bg-green"); // toggle class bg-red to existing class list which means if it already exists then it will be removed, if it doesn't exist it will be added.
classList добавляет, удаляет или переключает классы относительно какого-то элемента. Это чем-то похоже на обновление существующих классов.
В отличие от element.className, он удаляет все существующие классы и добавляет указанный класс.
И еще один пример:
const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // add class bg-red to existing class list
ele.classList.remove("pb-4");// remove class bg-red from existing class list
ele.className = "p-10"; // Now this will remove all existing classes and add only "p-10 class to element."
Как использовать обработчики событий
Событие (Event) – это изменение состояния объекта. Обработка событий (Event Handling) – процесс реагирования на события.
События происходит всякий раз, когда пользователь щелкает кнопкой мыши, наводит курсор на элемент, нажимает клавишу и т.д. Поэтому, когда происходит событие, и вы хотите выполнить какое-то действие, то вы используете обработчики событий, чтобы это действие произошло.
Мы используем обработчики событий для того, чтобы выполнить определенный код, когда это конкретное событие происходит. В JavaScript есть несколько обработчиков событий, однако процесс их добавления к элементам одинаков.
Вот синтаксис:
const ele = document.querySelector("a");
ele.addEventListner("event", function(){
// callback function
});
Вот некоторые события, которые вы можете использовать:
click
mouseover
mouseout
keypress
keydown
А вот пример использования события «click» (нажатия на кнопку мыши):
const ele = document.querySelector("a");
ele.addEventListner("click", function(){
ele.style.backgroundColor = "pink";
});
Распространение событий: всплывание событий и перехват событий
Распространение событий определяет то, в каком порядке элементы будут получать события. Существует два способа обработки порядка распространения событий в DOM: всплывание событий и перехват событий.
Что такое всплывание событий?
Когда в каком-то компоненте происходит событие, то он сначала на нем запускается обработчик событий, только потом на его родительском компоненте, а затем уже и на всех остальных компонентах, которых называют предками.
По умолчанию все обработчики событий перемещаются именно в этом порядке - от события центрального компонента к событию компонента, который находится от него дальше всех.
Что такое перехват событий?
Этот способ – противоположность предыдущему. Обработчик событий запускается сначала на родительском компоненте, а уже потом на том компоненте, на котором он фактически и должен был сработать.
Проще говоря, это означает, что событие сначала перехватывается самым удаленным элементом, а затем распространяется на внутренние элементы. Также этот способ называют «просачиванием вниз».
Давайте попробуем запустить следующий пример:
Example
Этот код выдаст нам следующее:
Теперь давайте внимательно изучим приведенный выше пример. Я добавил получатель событий к тегу nav и тегу anchor. Когда вы нажимаете на nav, то цвет фона меняется на зеленый. Когда вы нажимаете на тег anchor, то цвет фона меняется на розовый.
Но когда вы нажимаете на тег anchor, то цвет фона меняется как у nav, так и у anchor. Это происходит из-за всплывания событий.
Вот что происходит, когда вы нажимаете только на элемент nav:
А вот что происходит, когда вы нажимаете только на элемент anchor:
Для того, чтобы остановить распространение событий, мы можем воспользоваться методом stoppropagation() на получателе событий, из-за которого и происходит распространение события. В таком случае в приведенном выше примере получатель событий элемента nav не сработает.
Example
Как перемещаться по модели DOM
«Хороший разработчик JavaScript должен знать, как перемещаться по модели DOM. Перемещаться по модели DOM значит выбирать один элемент из другого,» - Зелл Лью.
Теперь посмотрим, почему лучше обойти модель DOM, чем использовать метод document.querySelector(), и как это выполнить на профессиональном уровне.
Есть три способа обхода модели DOM:
Снизу-вверх
Сверху-вниз
Продольный
Как обойти модель DOM снизу-вверх
Существует два метода, которые помогут вам перемещаться по модели DOM снизу-вверх:
parentElement
closest
parentElement – это свойство, которое выбирает родительский элемент, например:
const ele = document.querySelector("a");
console.log(ele.parentElement); //
parentElement отлично подходит для того, чтобы выбрать элемент, который находится на один уровень выше. Но closest позволяет найти элемент, который может быть на несколько уровней выше текущего. closest позволяет вам выбрать ближайший элемент-предок, который соответствует селектору.
Вот пример с использованием closest:
const ele = document.querySelector(".heading");
console.log(ele.closest(".demo")); // This is heading
В приведенном выше фрагменте кода мы пытаемся получить ближайший элемент к .heading, который имеет класс .demo.
Как обойти модель DOM сверху-вниз
Мы можем перемещаться вниз, используя метод селектора children. При таком подходе вы можете выбрать прямого потомка нужного элемента.
Вот пример:
const ele = document.querySelector("div");
const child = ele.children;
console.log(child); // gives HTMLCollection
// 4 element inside div
Как обойти модель DOM продольно
Это очень интересный вопрос, как же мы можем продольно обойти DOM. В основном мы можем использовать лишь два метода:
previousElementSibling
nextElementSibling
С помощью метода previousElementSibling мы можем выбрать предшествующие элементы в HTML:
This is sample
This is heading
This heading 2
Link-1
const ele = document.querySelector("h1");
console.log(ele.previousElementSibling); // Link-1
А с помощью метода nextElementSibling мы можем выбрать последующие элементы в HTML:
Heading
Link-1
const ele = document.querySelector("a");
console.log(ele.nextElementSibling); //