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

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

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

Речь в этой статье пойдет о том, как получить прямые потомки с помощью 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>

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

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

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

Можно использовать метод Element.querySelectorAll(), чтобы получить все элементы по определенному селектору внутри другого элемента. Однако он будет осуществлять поиск по всей структуре DOM-дерева в 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.