这是一个相对简单的递归解。我认为宽度优先搜索在这里是合适的。这将返回与找到的类匹配的第一个元素。

function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(clName) >= 0) {
            return children[i];
         }
     }
     for (var i = 0; i < children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}

下面是我如何使用YUI选择器做到这一点。感谢汉克·盖伊的建议。

notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');

其中four = classname, span =元素类型/标签名，test =父id。

但是要注意，旧的浏览器不支持getElementsByClassName。

然后，你就可以做了

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
    }
    return arr;
}
getElementsByClassName('4','test')[0];

看起来是可行的，但要注意HTML类

必须以字母开头:a-z还是a-z 后面可以跟着字母(A-Za-z)、数字(0-9)、连字符(-)和下划线(_)。

我相信这能最好地回答你的问题

document.querySelector('* > span.four')

这将匹配它发现的第一个子元素(任何父元素)，它是一个span，并且也有一个类“4”设置给它

但是，由于在您的示例中还有一个可以通过id检索的父元素，您也可以使用this代替

document.querySelector('#test > span.four')

如果您有一个父元素保存在一个变量中，就像您的例子中那样，并且您希望搜索该元素的子树，使用:scope(正如Billizzard已经提到的)可能是您的最佳选择

doc.querySelector(':scope > span.four');

额外提示:如果您要查找的子元素不是直接的子后代元素，而是在子树的更远位置，您实际上可以像这样省略>

document.querySelector('#test span.four')

我将使用jquery这样做的方式是这样的..

Var targetedchild = $("#test").children().find("span.four");

使用element.querySelector()。 让我们假设: 'myElement'是你已经拥有的父元素。 'sonClassName'是你要找的子类的类。

let child = myElement.querySelector('.sonClassName');

欲了解更多信息，请访问:https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector