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

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

使用 querySelector 和 querySelectorAll

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

IE9及以上版本