获取元素的子节点

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
   window.onload=function(){
//    为id为btn04的按钮绑定一个单击响应函数
   var btn04=document.getElementById('btn04');
    btn04.onclick=function(){
     //查找#city下所有li节点
//     1.获取id为city的元素
     var city =document.getElementById('city');
//     document.getElementsByTagName('li');   //这样写不行，获取页面当中的所有li
        var lis = city.getElementsByTagName('li');

        for(var i=0;i<lis.length;i++){

      alert(lis[i].innerHTML);
     }
    }
    var btn05=document.getElementById('btn05');
    btn05.onclick=function(){
     var city =document.getElementById('city');
     /*
      * childNodes 属性会包括文本节点
      * 根据DOM标签空白也会当成文本节点
      * 在IE８及以下返回４个子元素
      */
     var cns = city.childNodes;
//     alert(cns.length);
//      for(var i=0;i<cns.length;i++){
//      alert(cns[i]);
//     }

//     children   包括子元素，不包括空白
//     该属性可以获取到当前元素的所有子元素   元素就是标签
     var cns2=city.children;
     alert(cns2.length)
    }

    var btn06=document.getElementById('btn06');
    btn06.onclick=function(){
     var city =document.getElementById('phone');
//     返回#phone的第一个子节点   一说节点就包括空白的文本
     //phone.childNodes[0];
//     firstChild可以获取到当前元素的第一个节点(包括空白文本节点)
     var fir = phone.firstChild;
     alert(fir.innerHTML);
//    fir = phone.firstElementChild   不建议使用
    }
   }
  </script>
</head>
<body>
<ul id="city">
   <li id="bj">北京</li>
   <li>东京</li>
   <li>首尔</li>
</ul>

<ul id="phone"><li>IOS</li></ul>

  <button id="btn04">点击</button>
  <button id="btn05">点击</button>
  <button id="btn06">点击</button>
</body>
</html>