原生就javascript實現的獲取子元素程式碼例項

admin發表於2017-03-26
JavaScript

使用jquery獲取元素的子元素非常的遍歷，這裡就不多介紹了具體可以參閱使用jquery獲取指定元素的子元素程式碼例項一章節，下面就通過程式碼例項介紹一下如何獲取指定元素下的子節點。

程式碼例項如下:

[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");
  var lis=obox.children;
  for(var index=0;index<lis.length;index++){
    oshow.innerHTML=oshow.innerHTML+lis[index].innerHTML;
  }
}
</script> 
</head> 
<body>
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body> 
</html>

獲取box元素下所有的子元素，並且將它們的內容寫入show中，程式碼比較簡單，具體可以參閱相關閱讀。

相關閱讀:

1.innerHTML屬性可以參閱js innerHTML一章節。

2.children屬性可以參閱javascript children一章節。

相關文章