Выбор соседних узлов в JavaScript: увеличиваем производительность

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

Для быстрого выбора соседних узлов вы можете использовать CSS-комбинаторы: + позволит выбрать непосредственного соседа, а ~ – всех последующих элементов на том же уровне вложенности. Вот пример использования комбинатора +:

h1 + p { color: blue; } /* Соседний абзац станет синим */

А вот как можно использовать ~:

h1 ~ p { color: green; } /* Закрасим в зелёный каждый следующий абзац */

Эти селекторы используются для выбора элементов, подчиненных одному родителю, и идеально подходят для стилизации определенных соседских связей в структуре HTML.

Работа с соседями в JavaScript

Когда CSS не достаточен для динамического управления элементами, на помощь приходит JavaScript.

Поиск соседних элементов через DOM

Прямой доступ к соседним элементам можно получить с помощью методов DOM. node.nextElementSibling позволяет выбрать следующий элемент:

const nextSibling = element.nextElementSibling; // Обращаемся к следующему соседу

А node.previousElementSibling предназначен для доступа к предыдущему элементу:

const previousSibling = element.previousElementSibling; // Возвращаемся к предыдущему соседу

Эти методы не учитывают текстовые узлы и работают только с элементами, что помогает избежать ошибок, связанных с непредвиденными текстовыми узлами, появляющимися из-за пробелов.

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

Специальные функции для работы с соседями

Для более сложного доступа к соседним элементам можно использовать функцию getSiblings(element), которая возвращает массив всех соседей данного элемента:

function getSiblings(element){
  let siblings = [];
  Array.from(element.parentNode.children).forEach(sibling => {
      if(sibling !== element) {
         siblings.push(sibling);
      }
  });
  return siblings;
} // Получаем массив соседей элемента

Использование jQuery

Если вы работаете с jQuery, метод .siblings() может значительно упростить задачи:

$('#innerId').siblings().hide(); // Прячем всех соседей

Хотя, стандартный DOM API может выполнять аналогичные действия без использования jQuery.

Текстовые и комментарные узлы? Нам они не нужны!

Работая с previousSibling, будьте осторожны с текстовыми и комментарными узлами. Лучше воспользоваться previousElementSibling и nextElementSibling, чтобы воздействовать только на нужные элементы, вместо текстовых узлов.

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

HTML-элементы можно представить как созвездия, взаимосвязанные в пространстве DOM-дерева:

Галактика DOM:

🌍 <div>
🌑   <p>...</p>
🚀   <span>Выбери меня!</span>
🌕   <a>...</a>          // Сфокусируемся на элементе 'a', он сосед 'span'
</div>

Используйте комбинаторы + (для непосредственного соседа) и ~ (для всех последующих элементов), чтобы перемещаться между этими созвездиями:

/* Меняем цвет первого элемента 'a', который идёт сразу за 'span' */
span + a {
  color: #FFD700; /* Внесём немного космической стилистики */
}

/* ИЛИ */

/* Меняем цвет всех элементов 'a', которые идут после 'span' */
span ~ a {
  color: #ADD8E6; /* Перебираемся в свет далёких звёзд */
}

Этот подход облегчает навигацию в сложно устроенном пространстве DOM и позволяет посмотреть на веб-разработку под иным углом.

Обработка динамически генерируемого содержимого

Когда HTML-содержимое генерируется динамически, особенно важно научиться эффективно и безопасно управлять соседними узлами.

Безопасное взаимодействие с невидимыми узлами

В динамическом HTML важна безопасность ваших действий. Гарантируйте, что ваши манипуляции с соседями не приведут к ошибкам с узлами, которые в данный момент не отображаются. Кешируйте узлы перед выполнением циклов, чтобы снизить нагрузку на перерисовку и пересчёт макета.

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

Сложные задачи, например выбор соседей по определенным критериям или массовое взаимодействие с ними, требуют использования JavaScript-методов для работы с массивами и различных приемов работы с DOM. Убедитесь, что вы готовы к этим вызовам.

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

1. Детские и соседние селекторы | CSS-Tricks — подробное руководство по использованию CSS селекторов для соседних элементов.
2. Комбинатор последующего соседа — CSS | MDN — обзор комбинаторов последующих соседей на MDN.
3. Комбинатор следующего соседа — CSS | MDN — детальное руководство по комбинаторам следующих соседей на MDN.
4. Комбинаторы CSS — учебник по применению различных комбинаторов в CSS.
5. Справочник селекторов CSS — всё, что нужно знать о CSS селекторах.
6. Запоминалка по селекторам CSS — SitePoint — быстрый обзор для срочного изучения.
7. Укрощение сложных CSS-селекторов — Smashing Magazine — углубленное освоение продвинутых CSS-селекторов.