Question

我有一个像这样的代码块

<span class='Wrapper'>
    <span class="title"></span>
    <span class="body">
        <ul class="items">
        <li></li>
        <li></li>
        </ul>
    <span>
</span>

使用document.getElementsByTagName（'span'）访问span包装元素后; 如何使用标题类和带有类body的span元素的ul元素访问内部span元素。我需要使用普通的javascript

Answer 1

首先得到一个包含所有span元素的数组：

var yourSpans = document.getElementsByTagName('span');

然后遍历数组中的每个元素，检查元素是否具有特定的类：

for(var i in yourSpans){
    if (yourSpans[i].className == "title" || yourSpans[i].className == "body") {
        // your code here
    }
}

Answer 2

var spans = document.getElementsByTagName('span');

将返回一组跨度。您可以使用spans[0]，spans[1]等

来访问范围

Answer 3

根据里根的回答，你需要做一些像

这样的事情

 for( var i = 0, j= spans.length; i < j; i+=1 ) {
    var classes = span[i].getAttribute("class");
    if( classes ) {
       if( classes.indexOf("your_class_name") != -1) {
          //span[i] is one of thelements you need containing 'your_class_name'.
       }
    }
 }

Answer 4

我真的建议使用jQuery，它会让你的生活更轻松！

$('.title').dostuff...

但是如果你想要一个只有JS的解决方案，那你就去......

function editClass(matchClass,content) {
    var elems = document.getElementsByTagName('*'),i;
    for (i in elems) {
        if((" "+elems[i].className+" ").indexOf(" "+matchClass+" ") > -1) {
            elems[i].innerHTML = content;
        }
    }
}

Here是一个小提琴（Pure-JS，没有jQuery）作为例子。

访问span元素内的元素

4 个答案: