По вашему запросу ничего не найдено :(
Убедитесь, что запрос написан правильно, или посмотрите другие
наши статьи:
Повсеместное распространение компьютерных сетей в крупных корпорациях породило ряд проблем. Чем больше масштабы сети, тем дороже будет ее обслуживание. Действительно, при расширении территориальной деятельности организация должна закупать новое, зачастую дорогостоящее оборудование и объявлять тендер на услуги сетевых провайдеров связи. При этом если компания ориентируется на высокую скорость и надежность обмена данными, то эти предложения должны постоянно обновляться. Для оптимизации решения таких проблем и были созданы Software Defined Wide Area Network — программно-определяемые сети в рамках глобальной сети (WAN). Применение этой технологии позволяет серьезно сэкономить на каналах передачи данных, не теряя качества, а также ускорить включение в общую сеть организации новых территориально удаленных филиалов.
Зачем нужна программно определяемая WAN сеть?
Одной из главных возможностей, которые SD-WAN предоставляет пользователю, является оптимизация сетей VPN или MPLS. Как правило, небольшие организации с одним офисом могут вполне неплохо обходиться без данной технологии, однако крупные организации, имеющие филиалы в разных городах (или странах) вынуждены искать надежные и быстрые способы связи между офисами. Даже если у провайдера услуг связи есть покрытие на оба пункта – это не всегда является надежным решением, так как по пути пакеты данных могут теряться, информация может приходить поврежденной, несвоевременной или не в полном объеме.
Если же покрытия основного провайдера на территории, где компания планирует открывать новый филиал, нет, то в данном случае нужно будет уже заключать второй договор на обслуживание уже с местным провайдером. При этом при передаче информации между VPN-сетями различных провайдеров пользователь также столкнется с вышеописанной проблемой, но уже более остро, поскольку чем большее количество сетей минует информация при передаче, тем выше вероятность ее повреждения либо перехвата.
Кроме того, если организация серьезно озабочена проблемой надежной передачи данных, то не лишним будет запустить также дублирующий резервный канал связи, уже от другого поставщика телекоммуникационных услуг. Услуги эти, к слову, недешевы, да и помимо этого организация общей компьютерной сети организации с закупкой оборудования и прокладкой кабелей – дело затратное.
Выгодно ли для бизнеса внедрение SD-WAN решений?
Главным плюсом SD-WAN, в данном случае, является сокращение расходов на телекоммуникационные услуги и закупку более дорогого оборудования. Технически, программно-распределяемая сеть устроена следующим образом: компания закупает, устанавливает в центре обработки данных и настраивает модуль контроллера. Это самая основная (и дорогая) часть SD-WAN с технической точки зрения. К коммутатору контроллера подключаются основной и резервный каналы связи, при этом специализированные программы на борту контроллера будут анализировать загруженность каналов передачи данных и подбирать оптимальный баланс передачи.
Кроме того, ПО контроллера создает надежную, безопасную и прозрачную сеть, в которой контроллер выступает в роли основного роутера и «мозга». Да, решение не из дешевых, но технология будет окупаться (по оценке специалистов, в среднем за 5 лет) за счет распределения передачи данных, а также за счет экономии оборудования, закупаемого для филиалов. Нет необходимости закупать более «умные» устройства, а контроллер может удаленно управлять и сетями попроще, причем в автоматическом режиме – достаточно подключить устройство в новом офисе к сети, а все настройки придут с основного модуля. Кроме того, благодаря использованию такой технологии может возрасти качество телефонной связи и качество предоставления других IT-услуг в организации, которые могут быть чувствительны к качеству канала и задержкам.
На текущий момент многие компании занимаются созданием и оптимизацией функционала SD-WAN. Это и Huawei, и Mikrotik, и Cisco, а также многие другие разработчики. Поэтому у пользователя есть возможность ознакомиться с вариантами от разных поставщиков и подобрать для себя наиболее оптимальное решение.
Подключения прибора
Для подключения прибора к измеряемому потоку используются разъемы на задней (или верхней) стенке прибора:
Tx OUTliUT выход, или передача прибора подключить к Rx (прием) измеряемого потока;
Rx INliUT вход, или прием прибора подключить к Tx (передача) измеряемого потока.
На левой стенке расположен разъем EXT PWR для подключения адаптера внешнего питания. Прибор продолжительное время (несколько часов) может работать от встроенных аккумуляторов.
Включение прибора
Нажать клавишу <On> - через 2-3 секунды прибор включится.
В правом верхнем углу указано название текущего меню.
В нижней части дисплея указано назначение функциональных клавиш в данном режиме (смотри рисунок). При включении прибора отображается главное меню "Main menu".
Если вы не знаете, в каком меню находитесь и что делать дальше, нажмите кнопку <Main menu>. Далее, следуйте инструкции.
Контроль потока и подключения
В главном меню (Main menu) нажать кнопку <-more-> (клавиша S6), до появления в левом нижнем углу пункта меню <Monit>. Выбрав данный пункт (клавишей S1), вы попадаете в меню мониторинга, где возможно контролирование потока и отдельного канального интервала. В правом верхнем углу отображается состояние потока:
No signal нет сигнала на входе прибора. Возможно перепутаны прием/передача оборудования, или неисправен соединительный шнур;
AIS сигнал удаленной аварии. На дальнем конце измеряемый поток не нагружен;
Frame sync loss потеря цикловой синхронизации. Прибор принимает не тот сигнал, который передает. Возможно отсутствует шлейф на дальнем конце, или подключен не тот поток.
*Words* - "слова". Аварии отсутствуют - прибор принимает передаваемый им сигнал и готов к проведению измерений.
Проведение измерений
Для измерения потока E1 необходимо выполнить следующее:
Выйти в главное меню нажатием кнопки <MAIN MENU>
Нажать Menu1, основные параметры, убедиться, что выставлены параметры:
Первый столбец:
[Mode] режим, возможны значения:
RX/TX прием/передача, измерения по завороту;
RX прием, измерения на рабочем потоке, параллельно;
THROUGH через, поток пропускается через прибор;
DELAY.
Для измерений по завороту необходимо выбрать режим RX/TX
[Interface] - G.703 интерфейс G.703;
[Line code] - HDB3линейный код HDB3;
[Framing] - liCM30формат кадра ИКМ-30;
liCM-31 с использованием 16-го ки;
OFFбез цикловой структуры.
Рекомендации по выбору режима: выставить PCM-31. Если прибор не может засинхронизироваться, возникает аварийная сигнализация переключить в режим PCM-30. При невозможности проведения измерений в данном режиме возможно(но не рекомендуется) проведение измерений без цикловой структуры (режим OFF).
[Termination] 75/120Ω - сопротивление интерфейса 75/120 Ом;
[Tx Clc src] - INTERNисточник синхронизации передачи внутренний или FROM RX от сигнала приема;
[Kblis] - 2048 скорость передачи 2048 кбит/с;
Второй столбец:
[V.11 slot] - OFF ввод/вывод данных в какой-либо канальный интервал посредством интерфейса V.11 откл.;
[Rx slots] - канальные интервалы, по которым производится измерения, принимает значения:
OFF откл;
1(С1) - 1 канальный интервал (можно использовать любой ки от 1 до 31, не заблокированный в данном режиме);
nx64 несколько канальных интервалов, в данном режиме возможен выбор нескольких или всех канальных интервалов для проведения измерений. При выборе пункта <nx64> открывается меню "Rx Slots (BERT)", в котором производится выбор канальных интервалов:
ALL выбрать все
Clear очистить выбор (действие, обратное предыдущему)
Select выбрать ки, обозначенный курсором
De-select отменить выбор ки, обозначенного курсором
Return возврат в предыдущее меню
Рекомендации по выбору ки: как правило, измерения проводятся по полному потоку, то есть должны быть выбраны все канальные интервалы, последовательность действий: <Rx slots> <nx64> <ALL> <Return>
[Rx audio] OFF канальный интервал, который будет прослушиваться через встроенный динамик. Возможно указание любого ки, или отключение опции.На ход измерений не влияет;
[Rx signaling] OFF;
[Tx slots] - канальные интервалы, по которым передается тестовая последовательность. Возможны режимы:
OFF - откл. передача не осуществляется;
USER - по выбору пользователя;
AS RX - в соответствии с приемом. Выбраны те канальные интервалы, которые контролируются по приему;
IDLE - свободно, передается последовательность IDLE (задается в следующем меню, обозначает неиспользуемые ки);
1(С1) - 1 канальный интервал (можно использовать любой ки от 1 до 31, не заблокированный в данном режиме).
Рекомендации по выбору ки: рекомендуется выбрать режим <AS RX>
Примечание: в режиме Framing OFF параметры второго столбца отсутствуют. В режиме Framing PCM31 параметр Rx signaling отсутствует.
Перейти в следующее меню menu2, параметры тестовой последовательности:
Параметры по умолчанию:
[Idle liattern] 0110 1010;
[Bert liattern] 215 -1;
[Bert signaling] 1010;
[Idle signaling] 1010;
Bits/Block - 1000;
NFAS/NMFAS - norm;
Tx logic - norm;
Rx logic - norm.
Некоторые параметры могут отсутствовать в зависимости от выбора режима Framing. Ничего изменять не нужно.
Перейти в следующее меню menu3, проконтролировать параметры:
[Current test] - текущее измерение, при многократных измерениях для сохранения результатов номер измерения следует поменять на следующий.
Например, если произведено измерение под № 5, то при следующем измерении следует установить №6. Тогда в ячейке №5 результаты сохранятся;
[Timer] - On таймер включен.
В меню Timer необходимо задать продолжительность тестирования, для этого необходимо навести указатель на пункт Timer, нажать <edit> - откроется timer menu:
[Start time] - manual запуск теста - вручную;
[Duration] - продолжительность.
Userзадана пользователем, далее необходимо указать продолжительность тестирования: 0 days (дни) 0 hrs (часы) 15 mins (минуты). При необходимости возможен режим Continпродолжительный, до остановки пользователем. Далее нажать Return, чтобы вернуться в предыдущее меню.
[Autolirint] - Off - автоматическая печать выключена;
G.821 - ITU-T - контроль по протоколу G.821 включен, согласно рекомендации ITU-T;
[Alarms] All on - контроль аварий все аварии;
[Resolution] - HRS/MINS - частота записи результатов часы/минуты;
[Beelier] - Off;
[Err inject] - Ratio - ввод ошибок.
Нажать кнопку <Run> - запуск. Начнутся измерения.
На экране появляется информация о производимых измерениях: правая часть экрана краткая информация о параметрах измерений, левая часть экрана надпись ОКили присутствующие аварии и зафиксированные ошибки.
RX/TX - режим измерений;
G.703, liCM31 - основные параметры измерений;
Rx - звездочкой обозначены измеряемые канальные интервалы, если стоит точка канальный интервал пропускается;
Total seconds - время в секундах, прошедшее с начала измерений;
Bit err ratio - коэффициент битовых ошибок.
Перенос результатов измерений в ПК
По завершении измерений на экране отображаются краткие результаты. Для переноса измерений на компьютер необходимо:
Выключить прибор и перенести его к месту установки компьютера.
Подключить прибор к компьютеру, для этого: порт V.24/RS-232 прибора (с правой стороны) подключить через переходной соединительный кабель к com-порту компьютера.
Запустить на компьютере программу HyperTerminal. (В программе HyperTerminal должен быть задан номер com-порта, к которому подключен прибор и параметры соединения: скорость 9600 бит/с; биты данных 8, четность нет; стоповые биты 1; управление потоком Xon/Xoff)
Включить прибор.
Найти пункт меню "Memory". Если его нет, можно нажать кнопку <more>, для отображения других возможностей меню до появления нужной кнопки.
В меню "Memory" отображаются все сохраненные результаты, установить курсор на нужном пункте (можно определить по дате и времени измерений)
Нажать <Results>, на экране появятся результаты измерений, нажать кнопку <Print>, результаты будут переданы в окно HyperTerminal. Из окна программы результаты можно скопировать и вставить в любой текстовый документ: WordPad (блокнот) или Microsoft Word.
_____________________________________________________________________________
ACTERNA E1 SERVICE TESTER EST-125 09:32 11 Mar 2011
_____________________________________________________________________________
Printout of menu settings
*Setup Menu 1*
Mode RX/TX
Interface G.703
Line code HDB3
Framing PCM31C
Termination 75/120 Ohm
Tx Clk source INTERN
kbps 2048
V.11 OFF
Rx slots BERT-Rx 1 2 3 4 5 6 7 8 9 10 11 12
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
28 29 30 31
Rx audio OFF
Tx slots AS RX
*Setup Menu 2*
Idle pattern 0000 0000
BERT pattern 2^15-1
Bits/Block 1000
Rx logic NORM
Tx logic NORM
*Setup Menu 3*
Autoprint OFF
G.821 ITU-T
Multiframe ITU-T
Alarms USER
Resolution HRS/MINS
*Alarm Display*
AIS ON
Fr Sync ON
All ones ON
All zeros ON
Patt loss ON
Patt Inv
Slip ON
Dist Fr ON
Bit error ON
CRC err ON
FAS err ON
Code err ON
_____________________________________________________________________________
ACTERNA E1 SERVICE TESTER EST-125 09:33 11 Mar 2011
_____________________________________________________________________________
Printout of test results for test number 2
Start time 09:25 10 Mar 2011
Stop time 09:25 11 Mar 2011
Total test time (seconds) 86400
Line rate 2047994
Total code errors received 0
Total mean Code Error Ratio 0.000E 0
Bit rate 1983995
Total bits received 1.174E 11
Total errors received 0
Total mean Bit Error Ratio 0.000E 0
Total blocks received 1.174E 8
Total block errors received 0
Total mean Block Error Ratio 0.000E 0
Seconds of no signal 0
Seconds of AIS
Seconds of pattern sync loss 0
Seconds of Pattern Inverted 0
Seconds of all ones 0
Seconds of all zeros 0
Seconds of slip 0
Seconds of frame sync loss 0
Seconds of distant frame alarm 0
Total FAS word errors 0
Total number of frames 0
Total number of frames 6.912E 8
Total mean FAS word error ratio 0.000E 0
Total CRC word errors 0
Available time 86400 100.00000%
Unavailable time 0 0.00000%
Error free seconds 86400 100.00000%
Errored seconds PASS 0 0.00000%
Severely errored seconds PASS 0 0.00000%
Severely errored seconds PASS 0 0.00000%
Что такое 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); //