Vanilla JS Find Element with Missing Child Element

Question

Я пытаюсь получить логическое значение, которое даст мне знать, если родительский элемент имеет дочерний элемент. Некоторые из ограничений являются:

1. Там может быть х число этих «ящиков»
2. Проверить и посмотреть на любой из коробки имеют Колонтитул элемент

3. Если коробка не имеет нижнего колонтитула элемента добавьте класс

   <div class="data-trend"> <header></header> <div class="main"></div> <footer></footer> </div>

   <div class="data-trend"> <header></header> <div class="main"></div> <footer></footer> </div>

   <div class="data-trend"> <header></header> <div class="main"> <span class="glyphicons"><span> <!-- On the glyphicons I would add class if there is no footer --> </div> <!-- notice no footer --> </div>

Answer 1

покрутил выше комментарий в реальный ответ:

var elems = document.querySelectorAll('.data-trend'), 
 
    len = elems.length, 
 
    i = -1 
 
while(++i < len) { 
 
    if(!elems[i].querySelector('footer')) elems[i].classList.add('no-footer') 
 
}

.no-footer { border: 3px solid blue; }

<div class="data-trend"> 
 
    <header>Testing</header> 
 
    <div class="main"></div> 
 
    <footer>Footer</footer> 
 
</div> 
 

 
<div class="data-trend"> 
 
    <header>Testing</header> 
 
    <div class="main"></div> 
 
    <footer>Footer</footer> 
 
</div> 
 

 
<div class="data-trend"> 
 
    <header>Testing</header> 
 
    <div class="main"> 
 
    <span class="glyphicons"><span> 
 
    </div> 
 
</div>

Если вы делаете много этого в ванили, то имеет смысл определить forEach помощника функция для вас

function forEach(elems, fn){ 
    var len = elems.length, 
     i = -1 
    while(++i < len) { 
    fn(elems[i]) 
    } 
}