如何使用getElementsByClassName获取子元素？

Question

我有一个简单的javascript使用getElementsByClassName获取其子元素，但它不起作用：

var parent = document.getElementsByClassName('parent');
var child = parent.getElementsByClassName('child');
child.style.color='red';

我尝试了很多次并进行了搜索，有些答案使用for循环，但我想不用循环来实现。我该怎么做？

- user3556821

---

getElementsByClassName 返回一个元素列表，因此您需要使用循环。 - Niklas

如果您只想操作匹配类的第一个子元素（或者您确定只有一个匹配类的子元素），您可以这样做：child[0].style.color='red'; - techfoobar

为什么不应该使用jQuery？“$('.parent .child').css('color'，'red')” - Justinas

techfoobar -- 我也尝试了这个：child[0].style.color='red'; 但是没有起作用。 - user3556821

Answer 1

您可以一步获取完整的节点列表。

var children = document.querySelectorAll(".parent .child");

但是你将不得不循环遍历该节点列表。

如果你只对第一个感兴趣，那么可以这样做：

document.querySelector(".parent .child").style.color = 'red';

- Thilo

Answer 2

试试这个：

var parent = document.getElementsByClassName('parent');
for(var i=0;i<parent.length;i++){
  var child = parent[i].getElementsByClassName('child');
for(var j=0;j<child.length;j++){
      child[j].style.color='red';
    }

document.getElementsByClassName() 返回一个集合，因此您需要应用索引或循环。

- Naveen Chandra Tiwari

Answer 3

多个元素可以是同一类的成员。这就是类的意义。

在 getElementsByClassName 中，单词 elements 是复数形式。它返回一个 NodeList，而不是单个 Element。

您可以将其视为数组。您必须循环遍历返回的每个节点，或者假设它只返回一次匹配并使用 [0]。

- Quentin