Выбор следующего и предыдущего элемента в JavaScript

Быстрый ответ

.nextElementSibling и .previousElementSibling — Ваши главные помощники в перемещении между соседними элементами.

let batmobile = document.getElementById('batman').nextElementSibling; // Без Бэтмена, Робин уже не кажется таким удивительным, не правда ли?
let batwing = document.getElementById('batman').previousElementSibling; // Альфред, обрати внимание на бэткрыло.

Переключайтесь на следующие/предыдущие элементы быстрее, чем успеет Флэш среагировать. Здесь циклы и рекурсия не требуются.

Обработка исключений

Помните, что .nextElementSibling или .previousElementSibling могут возвращать null, если элемент, вокруг которого происходит поиск, находится на краю списка. Так поступал бы Бэтмен — всегда быть готовым ко все возможных исключениям.

if (!batmobile) console.log('Робин... Где Альфред?');
if (!batwing) console.log('Альфред... Где бэтпещера?');

Ускорение с помощью jQuery

А вот и вариант для поклонников jQuery — встроенное решение:

let $commisionerGordon = $('#batman').next();
let $batcave = $('#batman').prev();

jQuery прекрасно справляется с различиями между браузерами, позволяя вам чувствовать себя как Брюс Уэйн на переговорах — всё лишнее было учтено за вас.

Визуализация

Давайте преставим элементы веб-страницы как гаджеты Бэтмена:

🔦🔌🔩🔧🔨⛏️⚔️🚀

Допустим, у вас в руках 🔩 и вы хотите перейти к следующему (⚔️) или предыдущему (🔌) гаджету:

🔦🔌🔩➡️⚔️
🔦⬅️🔌🔩

В JavaScript это будет выглядеть так:

var batGadget = document.querySelector('.current'); // Сейчас у нас 🔩
var nextGadget = batGadget.nextElementSibling;     // Следующий гаджет это 🔧
var prevGadget = batGadget.previousElementSibling; // Предыдущий гаджет это 🔌

На самом деле, навигация между соседними элементами в DOM не представляет собой никакой сложности. 🦇

Продвинутые приемы работы с соседями

Проверка тега элемента перед выполнением операций

Используйте .nextSibling и .previousSibling с особым вниманием, поскольку они могут возвращать текстовые узлы или комментарии:

var gadget = document.querySelector('.batGadget');
while (gadget.nextElementSibling && gadget.nextElementSibling.tagName !== 'DIV') {
  gadget = gadget.nextElementSibling; // Ищем подходящий гаджет
}

Подробнее об этом расскажет наш спикер на видео

Динамический выбор соседних элементов

Программное перемещение по коллекции 'бэт-гаджетов' в DOM:

var batGadgetsArr = Array.from(document.getElementsByTagName('div')); // Бэтмен предпочитает маскироваться под 'div'
var currentGadgetIndex = batGadgetsArr.indexOf(batGadget);
var nextBatGadget = batGadgetsArr[currentGadgetIndex + 1]; // Следующий гаджет, как подпись самого Бэтмена
var prevBatGadget = batGadgetsArr[currentGadgetIndex – 1]; // Предыдущий – где-то же должен быть GPS для бэтпещеры?

Не забудьте проверить границы массива, чтобы не столкнуться с ошибками при обращении к элементам за его пределами.

Обновляем знания о innerHTML и CSS-классах

Обновление характеристик гаджетов в реальном времени

Поддерживаем свои бэт-гаджеты в актуальном состоянии:

nextBatGadget.innerHTML = 'Этот бэт-гаджет стал лучше!'; // Быстрее, мощнее...
prevBatGadget.innerHTML = 'Этот старый бэт-гаджет всё ещё в деле!'; // Ведь старое всегда надёжнее!

Стилизация с "бэт-костюмами"

Применяем стили к соседним элементам:

nextBatGadget.classList.add('bat-upgrade');
prevBatGadget.classList.remove('bat-retro');

Смесь стиля и динамичности, как во золотую эпоху комиксов!

Полезные материалы

1. Переход по HTML-таблице с помощью JavaScript и DOM-интерфейсов – Web APIs | MDN — глубокое погружение в навигацию и манипуляцию таблицами с помощью JavaScript.
2. Что такое DOM? | CSS-Tricks — доступное объяснение того, что представляет собой DOM и как с ним работать в JavaScript.
3. Поиск: getElement, querySelector — универсальное руководство по поиску и выбору элементов в DOM.
4. Основы манипуляции DOM в «чистом» JavaScript (без jQuery) — SitePoint — детальное изучение манипуляции DOM без привлечения библиотек типа jQuery.
5. "해군대장, '세상을 바꾸고 싶다면, 이불 정리부터 시작해' – YouTube" — визуальный и практический YouTube урок по работе с DOM (возможно, заголовок не совсем отражает содержание видео).