Question

我用简单的javascript来获取带有getElementsByClassName的子元素，但它不起作用：

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

我已经尝试了很多并且搜索得到它但是我已经找到了一些for循环的答案但是我想在没有循环的情况下这样做。我怎么能这样做？

Answer 1

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

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

但是你必须遍历那个节点列表。

如果你真的只对第一个感兴趣，那么你可以做

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

Answer 2

多个元素可以是同一个类的成员。这就是课程的重点。

在getElementsByClassName中，元素一词是复数。它会返回NodeList，而不是Element。

你可以像对待数组一样对待它。您必须遍历它返回的每个节点，或者假设它只返回一个匹配并使用[0]。

Answer 3

试试这个：

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（）返回集合。所以你必须应用索引或循环。

如何使用getElementsByClassName获取子元素？

3 个答案: