По вашему запросу ничего не найдено :(
Убедитесь, что запрос написан правильно, или посмотрите другие
наши статьи:
В небольших сетевых устройствах с одним сетевым процессом (ASIC или NPU) переместить пакет из входной очереди в выходную просто. Оба интерфейса ввода и вывода используют общий пул памяти пакетов, поэтому указатель на пакет может быть перемещен из одной очереди в другую.
Для достижения большего количества портов и более крупных устройств - особенно устройств шасси - должна быть внутренняя шина или матрица, которая соединяет механизмы обработки входных и выходных пакетов. Одним из распространенных типов структуры, используемой для соединения механизмов обработки пакетов в сетевом устройстве, является структура матрицы; Рисунок ниже иллюстрирует это.
Размер и структура полотна матрицы зависят от количества подключенных портов. Если в коммутаторе больше портов, чем возможно для подключения через одну матрицу кросс-панелей, то коммутатор будет использовать несколько структур кросс-панелей. Распространенной топологией для такого типа полотна является многоступенчатая закрытая структура, соединяющая входную и выходную полотна матрицы вместе. Вы можете думать об этом как о матрице из матриц.
Для работы матрицы требуется чувство времени (или, скорее, фиксированный временной интервал) и планировщик. В каждый интервал времени один порт вывода (отправки) соединяется с одним портом ввода (приема), так что в течение этого периода времени отправитель может передать пакет, кадр или набор пакетов получателю. Планировщик "соединяет" правильные точки пересечения на матрице, чтобы передачи происходили в нужный период времени. Например:
Line card 1 (LC1) хочет отправить пакет в LC3.
LC3 хочет отправить пакет в LC5.
В течение следующего временного цикла планировщик может подключить строку A к столбцу 1 ("установить" соединение в A3) и подключить строку C к столбцу 5 ("установить" соединение в C5), чтобы между этими парами был установлен канал связи.
Пересечения и конфликты
Что произойдет, если два передатчика захотят отправить пакет одному получателю? Например, если в течение одного периода времени и LC1, и LC2 хотят отправить пакет в LC9 через полотно перекрестной матрицы? Это называется конфликтом, и это ситуация, которую должен обрабатывать планировщик структуры. Какому из двух входных портов должно быть разрешено отправлять свой трафик на выходной порт? А где же тем временем должны находится очереди входящего трафика?
Один из вариантов - хранить пакеты во входной очереди; коммутаторы, использующие эту технику, называются коммутаторами с очередью ввода (input-queued switches). Такие коммутаторы испытывают head-of-line (HOL). Блокировка HOL - это то, что происходит, когда пакет в начале линии, ожидающий пересылки через структуру, блокирует другие пакеты, стоящие в очереди за ним.
Другой вариант - использовать в коммутаторе несколько виртуальных очередей вывода (virtual output queues- VOQ) для каждого порта ввода.
VOQ дают матрице перекрестной сети несколько мест для хранения входящих пакетов, пока они ожидают доставки на свои выходные порты. Во многих конструкциях коммутаторов один VOQ существует на каждый выходной порт, для которого предназначен входной трафик. Следовательно, входной порт может иметь несколько пакетов в очереди в нескольких разных VOQ, предполагая, что несколько разных выходных портов.
Каждый из этих VOQ может обслуживаться в течение одного тактового цикла. Это означает, что блокировка HOL устраняется, потому что несколько разных пакетов из одной входной очереди могут проходить через матрицу кроссбара одновременно. Для порта ввода существует не одна очередь, а несколько разных очередей.
Даже с VOQ остается потенциальная возможность разногласий по структуре перекрестной сети. Наиболее распространенный пример - это когда два или более входящих пакета должны покинуть коммутатор через один и тот же выходной порт в одно и то же время, или, точнее, в одном тактовом цикле. Выходной порт может отправлять только один пакет за такт.
Определение того, какая входная очередь будет доставлять трафик на выходной порт первой, - это алгоритм, определяемый производителем коммутатора для максимального использования аппаратного обеспечения. iSLIP-это один из алгоритмов планирования, используемых коммутаторами для решения этой проблемы.
Обзор алгоритма iSLIP
Алгоритм iSLIP разрешает конфликты межсетевых экранов, распределяя трафик таким образом, чтобы сетевое устройство достигало неблокирующей пропускной способности. Для понимания этого полезно внимательно изучить iSLIP в его простейшей форме, проанализировав, что происходит, когда алгоритм iSLIP выполняется один раз.
Во время выполнения iSLIP происходят три важных события:
Запрос. Все входные точки (вход) на перекрестной матрице с поставленным в очередь трафиком спрашивают свои выходные точки (выход), могут ли они отправить.
Предоставление (грант). Каждая точка вывода, получившая запрос, должна определять, какая точка ввода будет разрешена для отправки. Если есть один запрос, то грант предоставляется без дальнейшего обсуждения. Однако при наличии нескольких запросов точка вывода должна определять, какая точка ввода может отправлять. Это делается через циклического перебора, где одному запросу предоставляется грант, последующему запросу предоставляется грант во время следующего выполнения iSLIP, и так далее по кругу. Когда было принято решение об этом конкретном выполнении iSLIP, каждая точка вывода отправляет свое сообщение о предоставлении, эффективно сигнализируя о разрешении на отправку, в соответствующую точку ввода.
Принятие. Входная точка рассматривает сообщения о предоставлении гранта, полученные ею от выходных точек, выбирая грант циклическим способом. После выбора входной сигнал уведомляет выходной сигнал о том, что грант принят. Если и только, если выходная точка уведомлена о том, что грант был принят, выходная точка перейдет к следующему запросу. Если сообщение accept не получено, то точка вывода попытается обслужить предыдущий запрос во время следующего выполнения iSLIP.
Понимание процессов запроса, предоставления и принятия дает нам представление о том, как пакеты могут быть доставлены одновременно через матрицу кроссбара без конфликтов. Однако, если вы поразмыслите над сложным набором входов, VOQ и выходов, вы можете понять, что один запуск iSLIP не планирует доставки столько пакетов, сколько могло бы быть после одного выполнения.
Понимание процессов запроса, предоставления и принятия дает нам представление о том, как пакеты могут быть доставлены одновременно через матрицу кроссбара без конфликтов. Однако, если вы поразмыслите над сложным набором входов, VOQ и выходов, вы поймете, что один запуск iSLIP не планирует доставки столько пакетов, сколько могло бы быть после одного выполнения.
Конечно, некоторые входы были предоставлены выходам, и некоторые пакеты могут быть переадресованы, но возможно, что некоторые выходы никогда не были согласованы с ожидающим входом. Другими словами, если вы ограничите iSLIP одним исполнением за такт, мы оставим доступную выходную полосу пропускания неиспользуемой.
Поэтому обычной практикой является запуск iSLIP через несколько итераций. В результате количество совпадений ввода-вывода максимально. За один раз через матрицу кроссбара может быть отправлено больше пакетов. Сколько раз нужно запускать iSLIP, чтобы максимально увеличить количество пакетов, которые можно коммутировать через матрицу кроссбара за такт? Исследования показывают, что для шаблонов трафика, преобладающих в большинстве сетей, запуск iSLIP четыре раза лучше всего сопоставляет входные и выходные данные в матрице. Выполнение iSLIP более четырех раз не приводит к значительному увеличению количества совпадений. Другими словами, запуск iSLIP пять, шесть или десять раз в большинстве сетевых сред ничего не даст.
Выход за рамки iSLIP
Это обсуждение до сих пор предполагало, что движение, протекающее через матрицу, имеет одинаковое значение. Однако в современных центрах обработки данных одни классы трафика имеют приоритет над другими. Например, фреймы хранилища Fibre Channel over Ethernet (FCoE) должны проходить через матрицу без потерь, в то время как сеанс TCP, попадающий в класс QoS, этого не делает.
Обрабатывает ли iSLIP трафик с разными приоритетами, отдавая одни запросы раньше других? Да, но в модифицированной форме алгоритма, который мы рассмотрели. Варианты iSLIP включают Приоритетный, Пороговый и Взвешенный iSLIP.
Помимо iSLIP, который здесь используется просто как удобный пример управления конфликтами, поставщики будут писать свои собственные алгоритмы, соответствующие аппаратным возможностям своей собственной коммутационной матрицы. Например, в этом разделе рассматривается только матрица перекрестных линий с входящей очередью, но многие структуры перекрестных линий предлагают также организацию очереди вывода на выходной стороне матрицы.
Для того, чтобы вывести Asterisk за пределы корпоративной сети и получить возможность звонить “во внешний мир”, необходимо воспользоваться услугами VoIP – провайдеров.
В сегодняшней статье, мы расскажем как настроить SIP-транк с провайдером Youmagic (MTT) на примере Asterisk 13.7.1 и FreePBX 13.
Создание SIP - транка через FreePBX
Для того, чтобы приступить к настройке нового транка, необходимо с главной страницы перейти по следующему пути: Connectivity -> Trunks. Откроется следующее окно:
Далее нужно нажать кнопку Add Trunk. В появившемся, выпадающем окне выбираем Add SIP (chan_sip) Trunk
В открывшемся окне, указываем имя нового транка и задаём исходящий Caller ID, именно в таком формате будет отображаться Ваш номер телефона при исходящих звонках, если конечно провайдер не перекрывает его другим АОН’ом.
Далее, необходимо перейти на вкладку sip Settings и заполнить её разделы Outgoing и Incoming, в соответствии с данными, полученными от провайдера
Раздел Outgoing заполняется следующим образом:
type=friend
defaultuser=74957775566
secret=Ваш_пароль
host=voip.mtt.ru
dtmfmode=rfc2833
disallow=all
allow=alaw&ulaw&g729
canreinvite=no
insecure=port,invite
qualify=200
Где secret - Ваш пароль, выданный провайдером, defaultuser - Ваш телефонный номер, выданный провайдером и host - адрес провайдерского сервера
В разделе Incoming, необходимо заполнить только последнюю строчку Register String, по следующему шаблону:
defaultuser:Ваш_пароль@host/defaultuser
Соответственно, после замены этих параметров нашими значениями, получится
74957775566:Ваш_пароль@voip.mtt.ru/74957775566
Не забываем нажимать Submit и Apply Config
Входящая маршрутизация МТТ (Youmagic)
Далее нужно создать новый входящий маршрут для звонков, поступающих из нового транка. Для этого переходим в Connectivity -> Inbound Routes, добавляем новый маршрут кнопкой Add Inbound Route. Даем новому маршруту какое-нибудь описание, а в поле DID Number вписываем номер, который приобрели у МТТ(Youmagic). Далее в поле Set Destination выбираем, куда будут отправляться все входящие звонки, поступившие на данный номер. Это может быть что угодно на Вашей АТС: IVR, голосовое приветствие, ринг-группа и так далее. На примере ниже, все звонки будут поступать на IVR.
Исходящая маршрутизация МТТ (Youmagic)
Создаём исходящий маршрут. Переходим в Connectivity -> Outbound Routes, жмём кнопку Add Outbound Route. Указываем имя нового маршрута, наш новый номер и привязываем данный маршрут к ранее созданному транку с помощью Trunk Sequence for Matched Routes
На вкладке Dial Patterns настраиваем шаблоны набора, которые будут использоваться на данном маршруте
Нажимаем кнопки Submit и Apply Config. На этом настройка завершена, теперь можно совершать и принимать вызовы на номер, приобретенный у провайдера Youmagic (МТТ)
Более подробно с настройкой маршрутизации вы можете ознакомиться в статье по ссылке ниже:
Маршрутизация вызовов FreePBX
Настройка через конфигурационные файлы
Если вы производите настройку через конфигурационные файлы Asterisk, то настройка нового транка должна осуществляться в файле sip.conf, как показано ниже:
[general]
register => 74957775566:Ваш_пароль@voip.mtt.ru/74957775566
[youmagic]
type=friend
dtmfmode=rfc2833
host= voip.mtt.ru
disallow=all
allow=g729
directmedia=no
insecure=port,invite
qualify=no
А настройка входящих и исходящих маршрутов производится в файле extensions.conf, следующим образом:
[youmagic]
exten => _8XXXXXXXXXX,1,Dial(SIP/youmagic/${EXTEN})
exten => _8XXXXXXXXXX,n,Hangup
[from-youmagic]
exten => _4957775566,1,Dial (SIP/trunk/${EXTEN})
exten => _4957775566,n,HangUp()
Что такое 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); //