Как эффективно запросить элемент по индексу

Question

Существует такая структура DOM, как:

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="another-container">
    <div class="item"></div>
  </div>
  <div class="item"></div>
  <div class="another-container">
    <div class="another-another-container">
      <div class="item"></div>
    </div>
  </div>
</div>

Я хочу выбрать третий .item, игнорируя другие элементы (например, контейнеры).

Итак, я делаю:

document.querySelectorAll('.item')[2].dataset.isSelected = true;

Что работает.

Но структура DOM может быть большой, и этот метод может вызываться часто. Запрашивать все элементы (document.querySelectorAll('.item')), чтобы получить только один, кажется неэффективным.

• Есть ли способ оптимизировать этот код? (кроме преобразования списка .item в статический массив)
• Или querySelectorAll по своей природе динамичен и фактически не извлекает все элементы DOM?

Answer 1

Честно говоря, если вы не имеете дело с огромным набором данных, все будет в порядке, используя document.querySelectorAll() и находя нужный вам индекс с помощью возвращенного списка узлов.

Я сделал отвратительный Пример CodePen здесь это похоже на 10000 строк деления, и оно может циклически проходить через простую функцию, которая окрашивает случайный некэшируемый индекс в красный цвет (аналогично вашему примеру).Я чувствую, что вы, возможно, уступаете «преждевременной оптимизации».

Обязательно откройте консоль на этом пере, я установил интервал на 0,01 мс, и, кажется, нет проблем с поиском по этому списку узлов дляслучайные индексы, которые могут быть в тысячах.Так что каждый раз вызывать его и копать в третий раз, вероятно, будет еще быстрее.