如何在JavaScript

时间:2015-11-04 18:20:04

标签: javascript domdocument

网页的某个部分的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元素的背景颜色更改为“红色”,该元素是具有id =“0:5”的“父”DIV元素的“子”。

我知道如何使用以下代码找到“父”DIV:

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

但我不知道如何找到名为“nodeContent”的关联DIV“child”元素(这样我就可以更改背景颜色)。

1 个答案:

答案 0 :(得分:1)

在父节点上调用getElementsByClassName(),然后使用列表中的第一个节点:

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

nodes[0].style.backgroundColor = '#F00';
&#13;
<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>
&#13;
&#13;
&#13;