Поиск индекса элемента в контейнере JS DOM без jQuery

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

Для вычисления индекса элемента можно использовать свойство element.parentElement, чтобы выйти на родительский элемент, затем применить Array.prototype.indexOf.call ко всем дочерним элементам:

Пример:

let index = Array.prototype.indexOf.call(element.parentElement.children, element);

Основные составляющие:

• parentElement возвращает родительский контейнер элемента.
• Метод indexOf.call оценивает индекс элемента среди его дочерних элементов.
• Это простое и мгновенное решение для определения позиции элемента.

Навигация по DOM: Оптимизированное перемещение без использования идентификаторов

Иногда идентификаторы не требуются для работы с DOM. Чтобы избежать циклов и явного назначения идентификаторов, можно использовать встроенные функции JavaScript:

Преобразование NodeList в массив: используем оператор расширения

С использованием оператора расширения из ES6 можно легко преобразовать NodeList в массив:

const elements = document.querySelectorAll('.my-elements');
let index = [...elements].indexOf(element); // "Сила ES6 позволяет нам легко управлять NodeList!"

Оператор расширения идеально справляется с задачей преобразования NodeList в массив.

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

Вопросы совместимости: учтите поддержку старых браузеров

Стоит помнить, что устаревшие браузеры могут не поддерживать новые функции JavaScript. В таких случаях вам может потребоваться использовать определение возможностей браузера и полифиллы:

if (!NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach; // "Проверим, как адаптируются старые браузеры!" 
}

Уделение внимания совместимости гарантирует работоспособность вашего кода в различных браузерах.

Для DOM-узлов, не являющихся массивами: используем итеративные методы

Счёт сиблингов: используем previousElementSibling

Если вы предпочитаете избежать использования методов массива или работать с текстовыми узлами, итеративный подход с использованием previousElementSibling может быть вам полезен:

function getElementIndex(node) {
  let count = 0;
  while (node = node.previousElementSibling) {
    count++; // "Будем считать до последнего!"
  }
  return count;
}

let index = getElementIndex(element);

Данный метод позволяет посчитать количество сиблингов, прежде чем достигнуть начала списка, для определения нужного индекса.

Учёт пробельных узлов: особенности сравнения узлов с пробелами

Пробельные символы в DOM могут создавать текстовые узлы, влияющие на расчёт индекса. Используйте функцию подсчета, которая не учитывает такие узлы:

function getElementIndex(node) {
  var count = 0;
  while (node = node.previousElementSibling) {
    if (node.nodeType === Node.ELEMENT_NODE) count++; // "Пробельные символы — вне состязания 'считаем сиблингов'!"
  }
  return count;
}

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

Практические примеры

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

Комбинируя динамические элементы со статическими ID, можно столкнуться с кучей проблем. Вот пример решения:

// Пусть `containerElement` — это контейнер с динамическими потомками
let dynamicChild = containerElement.children[2];  // Динамический дочерний элемент
let index = Array.prototype.indexOf.call(containerElement.children, dynamicChild); // "Нет ID? Не страшно!"

Этот код определяет индекс динамического элемента среди динамически добавленных сиблингов без использования ID.

Точный выбор: применяем getElementsByTagName

Если вам необходимо работать с определенным типом элементов, метод getElementsByTagName станет вашей "магической палкой":

let inputs = containerElement.getElementsByTagName('input');
let index = Array.from(inputs).indexOf(specificInput); // "Распознал тебя среди множества input-ов!"

Эта функция помогает найти конкретный индекс элемента input среди сиблингов в его родительском контейнере.

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

Представим линию с футболками (👕):

Веревка: 
[👕0, 👕1, 👕2, 👕3, 👕4]

Обнаружение индекса футболки аналогично определению ее порядкового номера:

// Предположим, мы ищем индекс футболки 👕2
let shirts = document.querySelectorAll('.shirt');
let index = Array.from(shirts).indexOf(shirt2);

В случае успешного поиска получаем следующий результат:

Веревка: [👕0, 👕1, 🌟👕2🌟, 👕3, 👕4]
Индекс: 2

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

Осторожно: распространенные ошибки

Призрачные узлы: неуважение к текстовым узлам

Помните, что при обходе дочерних элементов элемента текстовые узлы могут встречаться в результатах. Игнорируя их, вы увеличите точность подсчета:

function getElementIndex(node) {
  var count = 0;
  while (node = node.previousElementSibling) {
    if (node.nodeType === Node.ELEMENT_NODE) count++; // "Исключаем текстовые узлы, как призраков!"
  }
  return count;
}

Неожиданное ожидаемое: забытые на грани

Подготовьте свой код к обработке неожиданных исключений, таких как нулевые значения или узлы, не присоединенные к DOM:

if (!element || !element.parentElement) {
  // Обработка исключения // "Все под контролем, готовы к исключительным ситуациям!"
}

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

Видение мира через призму массивов: неправильное использование методов массивов для NodeList

Не забывайте, что NodeList и HTMLCollection — это не массивы! Непосредственное применение методов Array.prototype к ним может вызвать непредсказуемые результаты в разных браузерах.

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

1. Метод Element.closest() – Веб API | MDN — Важный инструмент для навигации по DOM-дереву.
2. Свойство Element.children – Веб API | MDN — Знание свойств children облегчает управление DOM.
3. NodeList – Веб API | MDN — Сведения о особенностях NodeList необходимы при работе с JavaScript.
4. :nth-child | CSS-Tricks — Внимание к CSS-селекторам расширяет ваш инструментарий при работе с JavaScript DOM.
5. Метод Array.prototype.indexOf() в JavaScript — Инструмент indexOf() незаменим при работе с массивами.
6. Поиск элементов DOM: getElement, querySelector — Полезное руководство по поиску элементов в DOM. Необходимо для корректного определения индекса.
7. Введение в DOM | DigitalOcean — Легко доступное для начинающих введение в DOM.