А как Вы реализуете поиск элементов в выборке на нативном javaScript?

Question

[Вячеслав Лебедев]

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

<div class="switcher">
  <input id="switcher" type="checkbox" hidden="hidden"/>
  <div class="switcher__wrap">
    <label for="switcher" class="switcher__item switcher__on">&#10004;</label>
    <label for="switcher" class="switcher__item switcher__toggle">|||</label>
    <label for="switcher" class="switcher__item switcher__off">&#10008;</label>
  </div>
</div>

var switcher;
// цель switcher__toggle
switcher = function() {
  var switcher;
  switcher = document.querySelector('.switcher');
  console.dir(switcher.children[1].children[1].classList.contains('switcher__toggle')); // прямой путь
};

new switcher;

Является ли выходом использование делегирования?
Дойдя до нужного с помощью closest и если такой элемент присутствует, выбрать его и повесить обработчик.

Answer 1

[Александр Таратин]

var switcher = document.querySelector('.switcher .switcher__toggle');
console.log(switcher);

switcher = document.querySelector('.switcher').querySelector('.switcher__toggle');
console.log(switcher);

Comments

[Вячеслав Лебедев]

Не задумывался о выборке внутри выборки) document.querySelector('.switcher').querySelector('.switcher__toggle');
спасибо) это подойдет

Answer 2

[Stalker_RED]

Если корневых .switcher несколько: jsfiddle.net/dhL9j3qo/1

Comments

[Вячеслав Лебедев]

Возьму на вооружение :)