我试图得到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。

其他回答

现代的解决方案

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

文档

使用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>

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

我相信这能最好地回答你的问题

document.querySelector('* > span.four')

这将匹配它发现的第一个子元素(任何父元素),它是一个span,并且也有一个类“4”设置给它

但是,由于在您的示例中还有一个可以通过id检索的父元素,您也可以使用this代替

document.querySelector('#test > span.four')

如果您有一个父元素保存在一个变量中,就像您的例子中那样,并且您希望搜索该元素的子树,使用:scope(正如Billizzard已经提到的)可能是您的最佳选择

doc.querySelector(':scope > span.four');

额外提示:如果您要查找的子元素不是直接的子后代元素,而是在子树的更远位置,您实际上可以像这样省略>

document.querySelector('#test span.four')

我将使用jquery这样做的方式是这样的..

Var targetedchild = $("#test").children().find("span.four");