獲取div元素下li元素的數目

admin發表於2017-03-24

本章節介紹一下如何獲取div元素下的所有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 oshow=document.getElementById("show");
  oshow.innerHTML=obox.getElementsByTagName("li").length;
}  
</script>   
</head>   
<body> 
<div id="show"></div>  
<div  id="box">
  <ul>
    <li>螞蟻部落一</li>
    <li>螞蟻部落二</li>
    <li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
    <li>螞蟻部落五</li>
  </ul>
</div>
</body>   
</html>

在以上程式碼中可以獲取div元素下li元素的數目，下面對上面程式碼的關鍵點做一下介紹。

getElementsByTagName函式的呼叫物件不但可以是document物件，也可以是其他物件，這個物件就限定了搜尋的範圍，就如上面的程式碼就是隻搜尋id屬性值為box元素下的所有li元素，此函式獲取的是一個元素集合，通過length屬性可以獲取li元素的數目。

相關文章