如何在一個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>