函数方法

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
   /*
    * 定义一个函数，专门为指定元素绑定单击响应的函数
    * 参数：
    * idstr 要绑定单击响应函数的对象的id属性
    * fun 事件的回调函数当单击元素时，该函数会被触发
    */
   function myclick (idStr,fun){
    var btn=document.getElementById(idStr);
    btn.onclick = fun;
   }

   window.onload=function(){
    myclick("btn07",function(){
     //获取id为北京的节点
    var bj=document.getElementById('bj');
    //返回#bj的父节点一说父就是元素
    var pn = bj.parentNode;
//    alert(pn.innerHTML);
    /*
     * innerText该属性获取到元素内部的文本内容
     * 和innerHTML类似，不同的是它会自动将html去掉
     */
    alert(pn.innerText);
   });

   myclick("btn08",function(){
    var and=document.getElementById('andi');
    //返回#andi的前一个兄弟节点（可能获取到空白文本）
    var ps = and.previousSibling;
    //获取前一个兄弟元素，不包括空白
     var pe=and.previousElementSibling;
    alert(ps.innerHTML);
   });
   myclick("btn09",function(){
    var un=document.getElementById('username');
    alert(un.value);
   });
   myclick("btn10",function(){
//    获取bj文本节点
//    1. var fc=bj.firstChild;
//    alert(fc.nodeValue);
//    2.
    alert(bj.firstChild.nodeValue);

   });
   }

  </script>
</head>
<body>
  <button id="btn07">点击</button>
  <button id="btn08">点击</button>
  <button id="btn09">点击</button>
  <button id="btn10">点击</button>
  <input id="username" value="123" type="button" />
  <ul id="city">
   <li id="bj">北京</li>
   <li>东京</li>
   <li>首尔</li>
  </ul>

  <ul><li>IOS</li><li id="andi"></li></ul>
</body>
</html>