用JavaScript批量访问HTML元素

使用JavaScript，可以利用一个循环来访问多了元素。

实例JavaScript代码

本例的代码中，我们定义一个名为test的函数，首先，我们获得id为testUL的ul，之后再将所有的li元素存储在一个数组中。最后，遍历数组，给每个li添加鼠标事件。当鼠标经过的时候，将元素的class设置为important，当鼠标移开的时候再将该class这只为空。

<script type="text/javascript">
function test(){
	var testUL = document.getElementById("testUL");
	var listItems = testUL.getElementsByTagName("LI");
	for (var i=0; i<listItems.length; i++) {
		listItems[i].onmouseover=function() {
			this.className = "important";
		}
		listItems[i].onmouseout=function() {
			this.className = "";
		}
	}
}
</script>

HTML代码

点击按钮，调用test函数。

<ul id="testUL">
  <li>HTML写内容</li>
  <li>CSS控制外观</li>
  <li>JavaScript控制行为</li>
</ul>
<button onclick="test(); return false;" value="批量访问元素">
	给所有的li元素添加鼠标事件</button>

效果

点击按钮之前，鼠标滑过下面的列表不会有任何反应。点击按钮调用test函数后再用鼠标滑过ul试试。

HTML写内容
CSS控制外观
JavaScript控制行为