Как получить прямые потомки через CSS и JS по заданным условиям

Как получить соответствующие условию прямые потомки через CSS и JS

14.05.2021

3 мин.

Содержание скрыть

1 Как обратиться к прямым потомкам элемента
2 Как получить прямые потомки через CSS и JS по заданным условиям
3 Кроссбраузерность

Речь в этой статье пойдёт о том, как получить прямые потомки через CSS и нативный JavaScript, которые соответствуют заданным условиям. Для получения прямых потомков родительского элемента по CSS-классам на нативном JavaScript потребуется объединить три метода.

Прежде всего, создадим следующую простую HTML структуру:

<div id="beverages">
    <div id="one" class="orange">Соответствует условию</div>
    <div id="two" class="orange">
        <div id="three" class="orange">Не соответствует условию</div>
    </div>
    <div id="four" class="orange">Соответствует условию</div>
</div>

Как обратиться к прямым потомкам элемента

Допустим, нам требуется обратиться исключительно к прямым потомкам элемента c id beverages. Таковыми являются элементы с классом orange и id one, two и four. Элемент c id three также имеет класс orange, но он вложен в другой элемент, поэтому не подходит под заданное условие.

let beverages = document.querySelector('#beverages');
let orange = beverages.querySelectorAll('.orange');

Чтобы получить прямые потомки через CSS можно использовать метод Element.querySelectorAll(), чтобы получить все элементы по определённому селектору внутри другого элемента. Но он будет осуществлять поиск по всей структуре DOM-дерева в пределах блока с id beverages и вернёт элементы с id one, two и four.

let orange = beverages.children;

Так же, ещё одним вариантом является свойство Node.children, но оно возвращает всех прямых потомков родителя, независимо от класса. Чтобы исправить это потребуется объединить Node.children с несколькими другими методами.

Как получить прямые потомки через CSS и JS по заданным условиям

Можно использовать Array.from(), чтобы список элементов (NodeList), который возвращает всех потомков, принимал форму массива. Затем следует применить метод Array.filter() для удаления элементов, не соответствующих требуемому условию.

let orange = Array.from(beverages.children).filter(function (elem) {

     if (elem.matches('.orange')) {
          console.log(elem);
     }
     return elem.matches('.orange');

});

See the Pen
qBrZMRY by Viacheslav Demchenko (@Viacheslav_Demchenko)
on CodePen.