如何按类名获取子元素？

Question

我正在尝试获得具有class = 4的子span.这是一个示例元素:

<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类.我不知道如何做到这一点.

Answer 1

使用querySelector和querySelectorAll

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

IE9和上层

;)

Answer 2

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

​

Answer 3

接受的答案只检查直接的孩子.通常我们会寻找具有该类名的任何后代.

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

Answer 4

使用 element.querySelector()。让我们假设： 'myElement' 是您已经拥有的父元素。'sonClassName' 是您正在寻找的孩子的班级。

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

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

Answer 5

现代解决方案

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

文件

Answer 6

对我而言,似乎你想要第四个跨度.如果是这样,你可以这样做:

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

要么

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

最后一个确保没有任何隐藏的节点可以搞砸它.

Answer 7

你可以尝试:

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

要么

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

Answer 8

使用 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/

Answer 9

但请注意，旧浏览器不支持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)、连字符 ("-") 和下划线 ("_")