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

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

当前回答

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

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

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

2012-08-28 21:08:09

其他回答

你可以试试:

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

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

2012-08-28 20:22:44

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

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

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

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

querySelectorAll将获取progress__marker类的每个div

2020-02-20 07:26:57

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

2012-08-28 20:24:02

使用querySelector和querySelectorAll

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

IE9及以上版本

2018-03-15 11:05:16

另一种方式

const result = [...(parentElement.children)].find(child => {
  return child.classList.contains('some-class-name');
});

首先，我们展开NodeList的元素，将其转换为Array，以便使用find()方法。最后，find()将返回classList属性包含给定类名的第一个元素。

2021-10-15 02:29:27

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

推荐文章

最新文章

标签