获取子元素可以使用children和childNodes。

但上述个属性有一个共同的特点,只能够获取一级子节点,关于这两个属性的用法可以参阅下面两章节:

(1).childNodes参阅JavaScript childNodes一章节。

(2).children可以参阅JavaScript children一章节。

下面通过代码实例演示一下如何利用JavaScript获取指定元素下的所有后代元素。

代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title> 
<style type="text/css">
#box{
  width:200px;
  height:200px;
  background:blue;
  font-size:12px;
}
#middle{
  width:100px;
  height:100px;
  background:black;
}
#inner{
  width:50px;
  height:50px;
  background:green;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  var arr=[];
  function done(obj,arr){
    if(obj.children.length!=0){
      for(var index=0;index<obj.children.length;index++){
        arr.push(obj.children[index].id);
        done(obj.children[index],arr);
      }
    }
  }
  done(obox,arr);
  oshow.innerHTML=arr+"";
}
</script> 
</head> 
<body>
<div id="show"></div>
<div id="box">
  <div id="middle">
    <div id="inner">
      <div id="last">51前端</div>
    </div>
  </div>
</div>
</body> 
</html>

代码描述:JavaScript所有后代元素。JavaScript所有后代元素代码下载



104 139



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到