如何通过类名获得子元素?

我试图得到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。但我不知道该怎么做。

当前回答

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

2021-02-02 10:44:07

其他回答

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

2012-08-28 20:24:02

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

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

2013-07-17 06:22:48

你可以试试:

notes = doc.querySelectorAll('.4');

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}

2012-08-28 20:22:44

使用带有getElementById的id名，前面没有#符号。然后你可以使用getElementsByTagName获取span子节点，并循环遍历它们以找到具有正确类的子节点:

var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i < c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}

演示:http://jsfiddle.net/Guffa/xB62U/

2012-08-28 20:13:11

在我看来，只要可以，就应该使用Array及其方法。它们比遍历整个DOM /包装器或将东西推入空数组快得多。这里提出的大多数解决方案都可以调用Naive(顺便说一句，这是一篇很棒的文章):

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc

我的解决方案:(在Codepen上的实时预览:https://codepen.io/Nikolaus91/pen/wEGEYe)

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children

const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
   if(item.classList.contains('four')) // we place a test where we determine our choice
     item.classList.add('the-chosen-one') // your code here
})

2018-08-27 15:26:00

如何通过类名获得子元素?

推荐文章

最新文章

标签