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

javascript yui

2022-08-30 00:52:12

我正在尝试获取班级 = 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。我不知道该怎么做。

答案 1

使用查询选择器和查询选择器全部

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

IE9 及上部

答案 2

用于循环访问每个，然后筛选其等于：doc.childNodesspanclassName4

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