我试图得到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。但我不知道该怎么做。
接受的答案只检查直系子女。通常情况下，我们正在寻找具有该类名的任何后代。
而且，有时我们需要包含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;
}
但是要注意，旧的浏览器不支持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)、连字符(-)和下划线(_)。
使用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>
