我用这个:

你可以避免键入“myDiv”两次并使用箭头。 当然，总是有更多的可能性。 可能需要一个现代的浏览器。

<!-- Sample Code -->

<div id="myDiv">
    <div class="foo">foo 1</div>
    <div class="foo">foo 2
        <div class="bar">bar</div>
    </div>
    <div class="foo">foo 3</div>
</div>

// Return HTMLCollection (Matches 3 Elements)

var allMyChildren = document.querySelector("#myDiv").children;

// Return NodeList (Matches 7 Nodes)

var allMyChildren = document.querySelector("#myDiv").childNodes;

// Match All Children With Class Of Foo (Matches 3 Elements)

var myFooChildren = document.querySelector("#myDiv").querySelectorAll(".foo");

// Match Second Child With Class Of Foo (Matches 1 Element)

var mySecondChild = document.querySelector("#myDiv").querySelectorAll(".foo")[1];

// Match All Children With Class Of Bar (Matches 1 Element)

var myBarChild = document.querySelector("#myDiv").querySelector(".bar");

// Match All Elements In "myDiv" (Matches 4 Elements)

var myDescendants = document.querySelector("#myDiv").querySelectorAll("*");

单线版本

var direct_children=Array.from(parent_el.querySelectorAll('span')).filter(function(a){return a.parentNode===parent_el;});

我发现这在父元素给定的情况下是非常方便的。我测试过了，100%有效。

我只是没有尝试就这么做了。这样能行吗?

myDiv = getElementById("myDiv");
myDiv.querySelectorAll(this.id + " > .foo");

试一试，也许有用，也许没用。抱歉，但我现在不在电脑上尝试它(从我的iPhone回复)。

我创建了一个函数来处理这种情况，我想我会分享它。

getDirectDecendent(elem, selector, all){
    const tempID = randomString(10) //use your randomString function here.
    elem.dataset.tempid = tempID;

    let returnObj;
    if(all)
        returnObj = elem.parentElement.querySelectorAll(`[data-tempid="${tempID}"] > ${selector}`);
    else
        returnObj = elem.parentElement.querySelector(`[data-tempid="${tempID}"] > ${selector}`);

    elem.dataset.tempid = '';
    return returnObj;
}

本质上，你所做的是生成一个随机字符串(randomString函数在这里是一个导入的npm模块，但你可以自己做)，然后使用这个随机字符串来确保你在选择器中得到你期望的元素。然后你就可以自由使用>了。

我没有使用id属性的原因是id属性可能已经被使用了，我不想重写它。

如果你确定元素是唯一的(比如你的ID case):

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;
}

HTH!