我能够做到这一点：
<div id="myDiv">
<div class="foo"></div>
</div>
myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");
也就是说，我可以成功检索myDiv具有 class的元素的所有直接子元素.foo。
问题是，我必须#myDiv在选择器中包含，这让我感到困扰，因为我正在myDiv元素上运行查询（因此它显然是多余的）。
我应该能够离开#myDiv关闭，但是选择器不是合法的语法，因为它以>.
有谁知道如何编写一个选择器，它只获取选择器正在运行的元素的直接子元素？
好问题。在被问到时，还没有一种普遍实现的方式来进行“基于组合器的查询”（正如John Resig 所说的那样）。
现在:scope伪类已经被引入。Edge 或 IE 的 [pre-Chrominum] 版本不支持它，但 Safari 已经支持它几年了。使用它，您的代码可能会变成：
let myDiv = getElementById("myDiv");
myDiv.querySelectorAll(":scope > .foo");
请注意，在某些情况下，您还可以跳过.querySelectorAll并使用其他优秀的老式 DOM API 功能。例如，myDiv.querySelectorAll(":scope > *")您可以只写myDiv.children，例如。
否则，如果您还不能依赖:scope，我想不出另一种方法来处理您的情况而不添加更多自定义过滤器逻辑（例如 find myDiv.getElementsByClassName("foo")who .parentNode === myDiv），如果您试图支持一个真正的代码路径，显然这并不理想只想将任意选择器字符串作为输入，将匹配列表作为输出！但是如果像我一样，你最终问这个问题只是因为你陷入了思考“你只有一把锤子”的想法，不要忘记DOM 还提供了各种其他工具。
有谁知道如何编写一个选择器，它只获取选择器正在运行的元素的直接子元素？
编写“根植”到当前元素的选择器的正确方法是使用:scope.
var myDiv = getElementById("myDiv");
var fooEls = myDiv.querySelectorAll(":scope > .foo");
但是， 浏览器支持是有限的，如果你想使用它，你需要一个垫片。我为此目的构建了scopedQuerySelectorShim。
这是一个用 vanilla JS 编写的灵活方法，它允许您仅对元素的直接子元素运行 CSS 选择器查询：
var count = 0;
function queryChildren(element, selector) {
var id = element.id,
guid = element.id = id || 'query_children_' + count++,
attr = '#' + guid + ' > ',
selector = attr + (selector + '').replace(',', ',' + attr, 'g');
var result = element.parentNode.querySelectorAll(selector);
if (!id) element.removeAttribute('id');
return result;
}
如果您确定该元素是唯一的（例如您使用 ID 的情况）：
myDiv.parentElement.querySelectorAll("#myDiv > .foo");
对于更“全局”的解决方案：（使用matchesSelector shim）
function getDirectChildren(elm, sel){
var ret = [], i = 0, l = elm.childNodes.length;
for (var i; i < l; ++i){
if (elm.childNodes[i].matchesSelector(sel)){
ret.push(elm.childNodes[i]);
}
}
return ret;
}
哪里elm是你的父元素，sel是你的选择器。也可以完全用作原型。
以下解决方案与目前提出的解决方案不同，对我有用。
基本原理是您首先选择所有匹配的孩子，然后过滤掉那些不是直接孩子的孩子。如果孩子没有具有相同选择器的匹配父级，则它是直接子级。
function queryDirectChildren(parent, selector) {
const nodes = parent.querySelectorAll(selector);
const filteredNodes = [].slice.call(nodes).filter(n =>
n.parentNode.closest(selector) === parent.closest(selector)
);
return filteredNodes;
}
哼！