您可以通过添加下面的行来获取父类。如果您有一个id，那么使用getElementById会更容易。尽管如此,

var parentNode = document.getElementsByClassName("progress__container")[0];

然后你可以在父类<div>上使用querySelectorAll来获取所有匹配的div类。progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAll将获取progress__marker类的每个div

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

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

现代的解决方案

const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');

文档

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

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')

在我看来，只要可以，就应该使用Array及其方法。它们比遍历整个DOM /包装器或将东西推入空数组快得多。这里提出的大多数解决方案都可以调用Naive(顺便说一句，这是一篇很棒的文章):

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc

我的解决方案:(在Codepen上的实时预览:https://codepen.io/Nikolaus91/pen/wEGEYe)

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children

const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
   if(item.classList.contains('four')) // we place a test where we determine our choice
     item.classList.add('the-chosen-one') // your code here
})

接受的答案只检查直系子女。通常情况下，我们正在寻找具有该类名的任何后代。

而且，有时我们需要包含className的任何子类。

例如:<div class="img square"></div>应该匹配className "img"上的搜索，即使它的确切className不是"img"。

以下是针对这两个问题的解决方案:

找到类className的子类元素的第一个实例

   function findFirstChildByClass(element, className) {
        var foundElement = null, found;
        function recurse(element, className, found) {
            for (var i = 0; i < element.childNodes.length && !found; i++) {
                var el = element.childNodes[i];
                var classes = el.className != undefined? el.className.split(" ") : [];
                for (var j = 0, jl = classes.length; j < jl; j++) {
                    if (classes[j] == className) {
                        found = true;
                        foundElement = element.childNodes[i];
                        break;
                    }
                }
                if(found)
                    break;
                recurse(element.childNodes[i], className, found);
            }
        }
        recurse(element, className, false);
        return foundElement;
    }