querySelectorAll корневых элементы без использования: область применения

Question

Давайте предположим, что у нас есть этот HTML структура:

<div id='test-div'> 
    <div class='random-class-1'> 
     <div class='useless-element-1'> 
     </div> 
     <div class='useless-element-2'> 
     </div> 
     <p>Just a paragraph, and useless</p> 
    </div> 
    <div class='random-class-2'> 
     <div class='useless-element-3'> 
     </div> 
     <div class='useless-element-4'> 
     </div> 
     <div class='useless-element-5'> 
     </div> 
    </div> 
</div> 

Мне нужно, чтобы выбрать все детям «DIV элементы» (не внуки) внутри первого DIV (в данном примере с идентификатором = 'test-div'), а не из документа, а из самого элемента (div).

Так что, я не хочу использовать «запрос» ниже, потому что я уже выбран элемент DIV [объект HTMLDivElement]:

// I don't want to use this query 
var children = document.querySelectorAll("div > div"); 

Просто пример для достижения этой цели (https://jsfiddle.net/t4gxt65k/):

// I already have selected DIV element 
var el = document.getElementById("test-div") 
// OR var el = document.querySelectorAll("#test-div"); 

var children = el.querySelectorAll(":scope > div"); 

Но из-за несовместимости браузера я не хочу использовать «: объем»

реальный вопрос:

Как я могу получить детей (только элементы DIV) из [object HTMLDivElement], используя чистый JavaScript?

Answer 1

Чтобы получить прямые детей элемента используют комбинацию parentNode.children или parentNode.childNodes и Array.prototype.reduce вроде этого:

var children = Array.prototype.reduce.call(el.children, function(acc, e) { 
    if(e.tagName == "DIV") 
     acc.push(e); 
    return acc; 
}, []); 

Answer 2

В качестве опции можно установить временный уникальный атрибут для области видимости элемента, и затем использовать querySelectorAll() для своего родителя с селектор атрибута предваряет то, что вы бы на месте после :scope селектора:

// The `scope` variable stores a reference to a scope element. 
var attrName = '_scope' + Date.now(); 
scope.setAttribute(attrName, ''); 
var children = scope.parentNode.querySelector('[' + attrName + '] > DIV'); 

Я не уверен, насколько быстро это происходит.

FWIW, в частности, для получения ребенка элементов, есть свойство children DOM:

var children = scope.children;