獲取指定元素下所有li元素程式碼例項

antzone發表於2017-03-22

li元素是最為常用的佈局元素之一，它可能有序的組織內容，使用javascript獲取指定元素下的li元素物件集合也是常用的操作，下面就通過程式碼例項介紹一下如何獲取li元素集合。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
  for(var index=0;index<lis.length;index++){
    lis[index].style.color="green";
  }
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body> 
</html>

上面的程式碼可以通過getElementsByTagName()函式獲取ul下的li元素集合，並且將字型顏色設定為綠色。

相關文章