javascript - 不使用 :scope 的 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(在本例中为 id='test-div')内的所有子“DIV 元素”(不是孙子)，不是从文档而是从元素 (div) 本身。

所以，我不想使用下面的“查询”，因为我已经选择了元素 DIV [object 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");

但由于浏览器不兼容，我不想使用“:scope”

真正的问题是:

如何使用纯 JavaScript 获取 [object HTMLDivElement] 的子元素(仅限 DIV 元素)？

Answer 1

作为一个选项，您可以为您的作用域元素设置一个临时唯一属性，然后为其父级使用querySelectorAll()，并将属性选择器添加到您想要的内容之前将放在 :scope 选择器之后:

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

虽然我不确定它有多快。

Fwiw，专门用于获取 child 元素，有 children DOM 属性:

var children = scope.children;