如何使用getElementsByClassName获取子元素

How to get child element with getElementsByClassName?

本文关键字：元素 获取 getElementsByClassName 何使用      更新时间：2023-09-26

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

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

我试了很多次，也搜索过，但我找到了一些有循环的答案，但我想在没有循环的情况下完成。我该怎么做？

您可以在一步中获得完整的节点列表

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

但是，您将不得不在该节点列表上循环。

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

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

试试这个：

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中，单词元素是复数。它返回一个NodeList，而不是单个Element。

你可以把它当作一个数组。您必须在它返回的每个节点上循环，或者假设它只返回一个匹配并使用[0]。

相关文章：