如何通过类名获取子元素？

我正在尝试获取具有class = 4的子跨度。这是一个示例元素：

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

我可以使用的工具是JS和YUI2。我可以做这样的事情：

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

这些在IE中不起作用。我收到一个错误，指出对象（doc）不支持此方法或属性（getElementsByClassName）。我已经尝试了一些getElementsByClassName跨浏览器实现的示例，但是我无法使它们正常工作，但仍然出现该错误。

我认为我需要的是跨浏览器getElementsByClassName，或者我需要使用doc.getElementsByTagName（'span'）并循环遍历，直到找到第4类为止。不过我不确定该怎么做。

使用doc.childNodes通过每个迭代span，然后筛选其一个className等号4：

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

​

使用querySelector和querySelectorAll

var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');

IE9及更高版本

;）

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

另外，有时我们希望任何包含 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;
    }

使用element.querySelector（）。假设：“ myElement”是您已经拥有的父元素。“ sonClassName”是您要查找的孩子的班级。

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

有关更多信息，请访问：https : //developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

您可以尝试：

notes = doc.querySelectorAll('.4');

要么

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}

在我看来，您似乎想要第四个跨度。如果是这样，您可以这样做：

document.getElementById("test").childNodes[3]

要么

document.getElementById("test").getElementsByTagName("span")[3]

最后一个确保没有任何隐藏的节点可能将其弄乱。

但请注意，旧的浏览器不支持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类

• 必须以字母开头：AZ或az
• 后面可以跟字母（A-Za-z），数字（0-9），连字符（“-”）和下划线（“ _”）

ID的名称前应加getElementById，没有#符号。然后，您可以span使用来获得子节点getElementsByTagName，并遍历它们以找到具有正确类的子节点：

var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i < c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}

演示：http：//jsfiddle.net/Guffa/xB62U/

我认为，每次可以使用Array及其方法。它们快得多，然后遍历整个DOM /包装器，或将内容推入空数组。此处介绍的大多数解决方案都可以按此处所述（朴素的文章btw）进行调用：

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

我将使用jquery做到这一点的方式是这样的。

vartargetedchild = $（“＃test”）。children（）。find（“ span.four”）;

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

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

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

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

然后，您可以querySelectorAll在父级上使用<div>来获取所有div与类匹配的.progress__marker

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

querySelectorAll将获取div与progress__marker

现代解决方案

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

文件资料

2018年6月更新到ES6

    const doc = document.getElementById('test');
    let notes = null;
    for (const value of doc) {
        if (value.className === '4') {
            notes = value;
            break;
        }    
    }

YUI2具有的跨浏览器实现getElementsByClassName。

这是我使用YUI选择器的方法。感谢汉克·盖伊的建议。

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

其中四个=类别名称，span =元素类型/标签名称，而test =父ID。

YAHOO.util.Dom.getElementsByClassName()从这里使用。