Как вывести всех наследников элемента без элементов внутри наследников JS

Question

Стандартная

const div = document.body.querySelector( ".div1" ),
            _obj = div.querySelectorAll( "*" );
console.log(_obj.length);

выводит помимо наследников искомого div еще и наследников каждого _obj (если таковые есть). Как сделать так, чтобы выводились только прямые наследники. То есть "Вассал моего вассала не мой вассал". Как-то так.

<div class="div1">
    <img src="a.jpg">
    <div class="div2"><img src="b.jpg"></div>
</div>

В данном случае будет 3 элемента в списке, а нужно 2. (img и div)

Answer 1

для выборки прямых потомков используется селектор >, что в вашем случае будет означать

let result = document.querySelectorAll('.div1 > *');

в случае jquery $(".div1 > *") либо с использованием функции $(".div1").children()

Answer 2

Вам правильно указывает @teran

const div = document.body.querySelector( ".div1" );
const _obj = document.body.querySelectorAll( ".div1>*" );
const _obj1 = div.children;

console.log(_obj);
console.log(_obj1);
console.log(_obj.length);
console.log(_obj1.length);

<div class="div1">
    <img src="a.jpg">
    <div class="div2"><img src="b.jpg"></div>
</div>

БЛОГ НА HUSL

Как вывести всех наследников элемента без элементов внутри наследников JS

Ответы (2 шт):