如何在一个div子元素来改变文字颜色在JavaScript

Question

网页的部分具有如下所示DIV元素：

<div class="nodePedigree node male " id="0:7" style="height:0.57em; width:2.95em; left:7.076em; top:0.07959999em;" T:NodeId="0:7"> 
    <div class="nodeContent"> 
     <div class="vAlignContent"> 
      <h6 class="nodeTitle">John Doe</h6> 
      <div class="nodeInfo">1860-1915</div> 
     </div> 
    </div> 
</div> 

<div class="nodePedigree node female " id="0:5" style="height:0.57em; width:2.95em; left:3.814em; top:4.081em;" T:NodeId="0:5"> 
    <div class="nodeContent"> 
     <div class="vAlignContent"> 
      <h6 class="nodeTitle">Jane Doe</h6> 
      <div class="nodeInfo">1903-2000</div> 
     </div> 
    </div> 
</div> 

正如你所看到的，有放在其他DIV元素内DIV元素。

这些只是网页中许多DIV元素中的2个元素。 “父”DIV元素可以通过id的值来区分。在这种情况下，它们是id =“0：7”和id =“0：5”，但在其他情况下，它可能是“0：1”，“0：2”...“0:20”，“ 0:21“等

在JavaScript中，我试图找到特定的”父“DIV元素，然后更改关联的”子“DIV元素（称为”nodeContent“）的背景颜色。换句话说，我不想更改所有“nodeContent”DIV元素的背景色，但只是具体的。因此，例如，我想将“nodeContent”DIV元素的背景颜色更改为“红色”，该DIV元素是id =“0：5”的“父级”DIV元素的“子级”。

我知道如何找到“父”的DIV下面的代码：

var myDiv = document.getElementById('0:5'); 

但我不知道怎么再找到相关DIV“子”元素称为“nodeContent”（使然后我可以改变背景颜色）。

Answer 1

父节点上调用getElementsByClassName()，然后使用第一个节点列表：

var parent = document.getElementById('0:5'); 
 
var nodes = parent.getElementsByClassName('nodeContent'); 
 

 
nodes[0].style.backgroundColor = '#F00';

<div class="nodePedigree node male " id="0:7" style="height:0.57em; width:2.95em; left:7.076em; top:0.07959999em;" T:NodeId="0:7"> 
 
    <div class="nodeContent"> 
 
     <div class="vAlignContent"> 
 
      <h6 class="nodeTitle">John Doe</h6> 
 
      <div class="nodeInfo">1860-1915</div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="nodePedigree node female " id="0:5" style="height:0.57em; width:2.95em; left:3.814em; top:4.081em;" T:NodeId="0:5"> 
 
    <div class="nodeContent"> 
 
     <div class="vAlignContent"> 
 
      <h6 class="nodeTitle">Jane Doe</h6> 
 
      <div class="nodeInfo">1903-2000</div> 
 
     </div> 
 
    </div> 
 
</div>