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

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

当前回答

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

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

2013-07-17 06:22:48

其他回答

您可以通过添加下面的行来获取父类。如果您有一个id，那么使用getElementById会更容易。尽管如此,

var parentNode = document.getElementsByClassName("progress__container")[0];

然后你可以在父类<div>上使用querySelectorAll来获取所有匹配的div类。progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAll将获取progress__marker类的每个div

2020-02-20 07:26:57

使用文档。childNodes遍历每个span，然后筛选className = 4的:

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

2012-08-28 20:10:26

YUI2有getElementsByClassName的跨浏览器实现。

2012-08-28 20:33:56

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

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')

2021-04-02 17:59:40

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

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

推荐文章

最新文章

标签