The problem with getElementsByTagName

< html >
< head lang= "en" >

<meta charset="UTF-8">
<title> - </title>
<style type="text/css">
    *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
    -sharptabs {width:290px;padding:5px;height:150px;margin:20px;}
    -sharptabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
    -sharptabs ul li{background:-sharpfff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid -sharpaaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}
    -sharptabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid -sharpfff;}
    -sharptabs div{height:120px;line-height: 25px;border:1px solid -sharp336699;border-top:none;padding:5px;}
    .hide{display: none;}
</style>
<script type="text/javascript">
     window.onload = function(){
         var oTab = document.getElementById("tabs");
         var oUl = oTab.getElementsByTagName("ul")[0];
         var oLis = oUl.getElementsByTagName("li");
         var oDivs= oTab.getElementsByTagName("div");

         for(var i= 0,len = oLis.length;i<len;iPP){
             oLis[i].index = i;
             oLis[i].onclick = function() {
                 for(var n= 0;n<len;nPP){
                     oLis[n].className = "";
                     oDivs[n].className = "hide";
                 }
                 this.className = "on";
                 oDivs[this.index].className = "";
             }
         };
     }
</script>

< / head >
< body >
< div id= "tabs" >

<ul>
    <li class="on"></li>
    <li></li>
    <li></li>
</ul>
<div>
    275 20<br>
    200 140<br>
     53550<br>
    5000  <br>
</div>
<div class="hide">
    40 <br>
     90<br>
     66<br>
     <br>

</div>
<div class="hide">
    3260 2250w<br>
    32290 1302<br>
    260 12170!<br>
    280 2248<br>

</div>

< / div >

< / body >
< / html >

The

code is as above

         var oTab = document.getElementById("tabs");
         var oUl = oTab.getElementsByTagName("ul")[0];
         var oLis = oUl.getElementsByTagName("li");
         var oDivs= oTab.getElementsByTagName("div");

Why not directly
var oUl = getElementsByTagName ("ul") [0];
var oLis = getElementsByTagName ("li");
write this way? What do you mean by [0]? Isn"t there only one ul tag? Beginners are just learning and looking for answers!

Big Brother, getElementsByTagName ("ul") what is returned here is an array. If you don't believe it, you can print it out. Whenever you see the s in the middle of getElementsByXXXXXX , it always returns an array. No matter how many such elements you have, even if you have one, it returns an array of length 1, so you must follow a [0] .