嵌套div 层次查找的问题

典型 DOM 操作，同层遍历！object.firstChild
object.nextSibling

解决方案 »

  1.   

    楼上的大哥能说得详细一点吗？对javascript不甚明白
      

  2.   

    举个简单的例子，自己揣摩：
    <html>
    <head>
    </head>
    <style type="text/css">
    #div1{
    height:400px;
    width:400px;
    background:red;
    margin-top:50px;
    margin-left:50px;
    }
    #div2{
    height:300px;
    width:300px;
    background:green;
    margin-top:50px;
    margin-left:50px;
    }
    #div3{
    height:200px;
    width:200px;
    background:blue;
    margin-top:50px;
    margin-left:50px;
    }
    #div4{
    height:100px;
    width:100px;
    background:yellow;
    margin-top:50px;
    margin-left:50px;
    }
    </style>
    <body>
    <div id="div1">
    第一层
     <div id="div2">
     第二层
      <div id="div3">
      第三层
       <div id="div4">
       第四层
       </div>
      </div>
     </div>
    </div>
    <div>
    <p>
    <input type="button" value="第一层" id="btn1">
    <input type="button" value="第二层" id="btn2"></div>
    <script>
    var btn1=document.getElementById("btn1");
    var btn2=document.getElementById("btn2");
    var btn3=document.getElementById("btn3");
    var btn4=document.getElementById("btn4");
    var div1=document.getElementById("div1");
    btn1.onclick=function(){
     alert("第一层的内容："+div1.innerHTML);
    }
    btn2.onclick=function(){
    for(var i=0;i<div1.childNodes.length;i++){
     alert("第一层的内容："+div1.innerHTML+"\n"+"第二层的内容："+div1.childNodes[i].innerHTML);
    }
    }</script>
    </body>
    </html>