Отфильтровать все дочерние элементы из родительского в Vanilla JavaScript

Question

Я пытаюсь запросить DOM в Vanilla JavaScript, чтобы отфильтровать все элементы, содержащие теги img из родительского узла с классом icon. Пример:

После написания запроса он должен вернуть два элемента <span> и <a>:

<span class="icon"><a href="#">link</a></span>
<a class="icon" href="#">link</a>

Это ничего не должно возвращать:

<span class="icon"><a href="#"><img src="asdf"></a></span>
<a class="icon" href="#"><img src="asdf"></a>

Использование jQuery Я могу легко добиться этого, используя:

jQuery('.icon').not(':has(img)')

Мне сложно реализовать то же самое в Vanilla JavaScript.

Answer 1

Выбрав все .icon, l oop через них, отфильтруйте все, что содержит img

const result = [...document.querySelectorAll(`.icon`)]
  .filter(item => !item.querySelector(`img`))

console.log(result);

<span class="icon"><a href="#">link</a></span>
<a class="icon" href="#">link</a>


<span class="icon"><a href="#"><img src="asdf"></a></span>
<a class="icon" href="#"><img src="asdf"></a>

Answer 2

@ qiAlex - Спасибо за то, что сделали этот вид таким простым. Я должен сделать несколько настроек, чтобы он работал в IE. Ниже приведен код, который может помочь кому-то с таким же требованием:

const iconsArray = document.querySelectorAll('.icon');
Array.prototype.forEach.call(iconsArray, function (element) {
    if (!element.querySelector('img')) {
        // .....
    }
});