x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>蜜蜂教程(mifengjc.com)</title>6
<style>7
div {8
border: 1px solid black;9
margin: 5px;10
}11
</style>12
</head>13
<body>14
15
<div class="example">16
<p class="child">在 class="example" 的第一个 div 元素中 class="child" 的 P 元素。 P 的索引值为 0，Div 的索引值为 0。</p>17
</div>18
<div class="example">19
<p class="child color">20
在 class="example" 的第二个 div 元素中 class="child color" 的第一个 P 元素。 P 的索引值为 0，Div 的索引值为 1。21
</p>22
<p class="child color">23
在 class="example" 的第二个 div 元素中 class="child color" 的第二个 P 元素。 P 的索引值为 1，Div 的索引值为 1。24
</p>25
</div>26
<div class="example">27
<p class="child color">在 class="example" 的第三个 div 元素中 class="child color" 的 第一个P 元素。 P 的索引值为 0，Div 的索引值为 2。</p>28
<p class="child color">在 class="example" 的第三个 div 元素中 class="child color" 的 第二个P 元素。 P 的索引值为 1，Div 的索引值为 2。</p>29
</div>30
<p>点击按钮修改 class="example" 的 div 元素中类名为 "child" 和 "color"的第一个 p 元素。</p>31
<button onclick="myFunction()">点我</button>32
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>33
<script>34
function myFunction() {35
var x = document.getElementsByClassName("example")[1];36
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";37
}38
</script>39
40
</body>41
</html>