首页 | 简单教程,简单编程

代码编辑器：

<style>
div {
    border: 1px solid black;
    margin: 5px;
}
</style>
<div class="example">
  <p class="child">在 class="example" 的第一个 div 元素中 class="child" 的 P 元素。  P 的索引值为 0，Div 的索引值为 0</p>
</div>
<div class="example">
  <p class="child color">
	在 class="example" 的第二个 div 元素中 class="child color" 的第一个 P 元素。  P 的索引值为 0，Div 的索引值为 1。
  </p>
  <p class="child color">
  在 class="example" 的第二个 div 元素中 class="child color" 的第二个 P 元素。  P 的索引值为 1，Div 的索引值为 1。
  </p>
</div>
<div class="example">
  <p class="child color">在 class="example" 的第三个 div 元素中 class="child color" 的 第一个P 元素。  P 的索引值为 0，Div 的索引值为 2</p>
  <p class="child color">在 class="example" 的第三个 div 元素中 class="child color" 的 第二个P 元素。  P 的索引值为 1，Div 的索引值为 2</p>
</div>
<p>点击按钮修改 class="example" 的 div 元素中类名为 "child" 和 "color"的第一个 p 元素</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法</p>
<script>
function myFunction() {
    var x = document.getElementsByClassName("example")[1];
    x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
}
</script>

运行结果：