如何通过类名获得子元素?

我试图得到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。但我不知道该怎么做。

当前回答

在我看来，你想要的是第四张成的空间。如果是这样，你可以这样做:

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

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

最后一个方法确保没有任何隐藏的节点会把它搞砸。

2012-08-28 20:26:43

其他回答

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

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

2014-10-09 14:11:31

使用querySelector

var doc=document.getElementById（“test”）; console.log（doc.querySelector（'.two'）.innerHTML） <div id=“test”> <span class=“one”></span> <span class=“two”>two</span> <span class=“three”></span> <span class=“four”></span> </div> 使用 querySelectorAll

var doc=document.getElementById（“test”）; console.log（doc.querySelectorAll（'*'）[1].innerHTML） <div id=“test”> <span class=“one”></span> <span class=“two”>two</span> <span class=“three”></span> <span class=“four”></span> </div>

使用getelementsbytagname

var doc=document.getElementById（“test”）; console.log（doc.getElementsByTagName（“SPAN”）[1].innerHTML）; <div id=“test”> <span class=“one”></span> <span class=“two”>two</span> <span class=“three”></span> <span class=“four”></span> </div> <span>党卫军</span>

使用getElementsByClassName

var doc=document.getElementById（“test”）; console.log（doc.getElementsByClassName（'two'）[0].innerHTML） <div id=“test”> <span class=“one”></span> <span class=“two”>two</span> <span class=“three”></span> <span class=“four”></span> </div>

2021-02-02 10:44:07

使用带有getElementById的id名，前面没有#符号。然后你可以使用getElementsByTagName获取span子节点，并循环遍历它们以找到具有正确类的子节点:

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/

2012-08-28 20:13:11

2018年6月更新至ES6

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

2018-06-15 00:10:05

现代的解决方案

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

文档

2020-06-20 17:56:48

如何通过类名获得子元素?

推荐文章

最新文章

标签