如何从类列表对象中获取子元素？答案

【问题标题】：How do I get child elements from class list object?如何从类列表对象中获取子元素？
【发布时间】：2017-07-07 15:38:16
【问题描述】：

认为我有一些相同的内容

 <div class="parentclass">

         <div class="childClass">
         </div>
         <div class="childClass">
         </div>
         <div class="childClass">
         </div>
    </div>

  <div class="parentclass">

         <div class="childClass">
         </div>
         <div class="childClass">
         </div>
         <div class="childClass">
         </div>
    </div>

我可以通过

得到一个数组中的所有父类对象

var pClassList= document.getElementsByClassName("parentclass");

我的问题是如何从 pClassList 数组中访问子类“childClass”，将其称为索引，如

var childClassList1= pClassList[0].getElementsByClassName("childClass");
var childClassList2= pClassList[1].getElementsByClassName("childClass");

【问题讨论】：

hmm.. 这与 html node.js 或 css3 有什么关系？

标签： javascript html node.js css

【解决方案1】：

简单地循环初始集合并使用每次迭代的索引来访问单个元素

var pClassList= document.getElementsByClassName("parentclass");

for(var i=0; i < pClassList.length; i++){

  var parentElement = pClassList[i];
  // do something to each parent as needed
  // access children of parent element
  var childClassList= parentElement.getElementsByClassName("childClass");
  // do something with `childClassList`
  for (var j= 0; j < childClassList.length; j++){
    var child = childClassList[j];
    // do something with each child here
  }
}

【讨论】：

【解决方案2】：

可能是：

var childClassList1= pClassList[0].getElementsByClassName("childClass")[0];
var childClassList2= pClassList[1].getElementsByClassName("childClass")[0];

我更喜欢使用 JQuery，在这种情况下是这样。

var pClassList = $(".parentclass")
var childClassList1 = $(pClassList[0]).children().first() 
var childClassList2 = $(pClassList[1]).children().first()

【讨论】：

【解决方案3】：

以下将检索 pClassList 数组中第一个元素的 classname="childClass" 的子节点：

for (var i = 0; i < pClassList[0].childNodes.length; i++) {
if (pClassList[0].childNodes[i].className == "childClass") {
  //Do something with pClassList[0].childNodes[i]
}        
}

您可以通过迭代每个元素来对 pClassList 数组中的其余元素执行相同的操作。

【讨论】：

【解决方案4】：

我认为另一种选择是您根据需要选择 childClass 就像：

var childClassList1= document.querySelector('.childClass:nth-child(2)');

【讨论】：

@NateAnderson 谢谢！