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内（在本例中使用id = '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"); 

但因为浏览器不兼容的，我不希望使用“：范围”

真正的问题是：

如何使用纯JavaScript获取[object HTMLDivElement]的子元素（仅DIV元素）？

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;