Получить потомки детей с определенным классом эффективно в ванильном JavaScript ⇐ Javascript

[Anonymous]

Я в настоящее время использую следующую функцию JavaScript, чтобы получить все прямое .layout < /code> дети данного родителя, гарантируя, что выбранные элементы: < /p>

[*] Не вложено внутри другого .layout
[*] непосредственно внутри указанного родительского
Данный родительский элемент может иметь или не иметь .layout Класс < /li>
< /ul>
Вот моя реализация: < /h3>

Код: Выделить всё

const getDirectChildren = (parent) => {
return [...parent.querySelectorAll('.layout')].filter(layout => {
const closest = layout.parentNode?.closest('.layout');
return closest == null || closest === parent;
});
}
< /code>
 Пример ожидаемого поведения < /h3>
Учитывая следующую структуру HTML: < /p>

   

 


 

Если я вызову getDirectchildren (document.queryselector ('. Parent')) , ожидаемый вывод должен быть:

Код: Выделить всё

[
,
,

]

Моя реализация работает, как и ожидалось, но мне интересно: Есть ли более оптимизированный подход для достижения того же результата, одновременно уменьшая количество запросов DOM? < /p>
Любые предложения по повышению производительности этой функции? Я ищу только решение ванильного javascript .


Подробнее здесь: https://stackoverflow.com/questions/794 ... javascript