定义和使用
getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
</head>
<body>
<ul class="qipa250">
<li class="child">Coffee</li>
<li class="child">Tea</li>
</ul>
<p>点击按钮修改第一个列表项的文本信息 (索引值为 0)。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
var list = document.getElementsByClassName("qipa250")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
div {
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div id="qipa250DIV">
<p class="child">div 元素中第一个 class="child" 的 p 元素 (索引值为 0).</p>
<p class="child">div 元素中第二个 class="child" 的 p 元素 (索引值为 1).</p>
<p class="child">div 元素中第三个 class="child" 的 p 元素 (索引值为 2).</p>
</div>
<p>点击按钮为 div 元素中第二个 class="child" 的 p 元素添加背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
var x = document.getElementById("qipa250DIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
}
</script>
</body>
</html>