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 id="myDIV">16
<p class="child"> div 元素中 class="child" 的 p </p>17
<p class="child"> div 元素中 class="child" 的另外一个 p </p>18
<p>在 div 中的 p 元素插入 <span class="child">class="child" 的 span 元素</span> 。</p>19
</div>20
<p>点击按钮为 id="myDIV" 的 div 元素中所有 class="child" 元素添加背景颜色。 </p>21
<button onclick="myFunction()">点我</button>22
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>23
<script>24
function myFunction() {25
var x = document.getElementById("myDIV");26
var y = x.getElementsByClassName("child");27
var i;28
for (i = 0; i < y.length; i++) {29
y[i].style.backgroundColor = "red";30
}31
}32
</script>33
34
</body>35
</html>