『笔记』JavaScript基础学习笔记 5 — DOM（文本对象模型） - Brains

DOM（文档对象模型）

1、DOM的简介

（1）什么是DOM：

DOM：文档对象模型（Document Object Model）

（2）模型：

（3）节点：

节点的类型

节点的属性

例：

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
      /*
      浏览器已经提供了文档节点对象，这个对象是window属性
      可以在页面直接使用，文档节点代表的是整个网页
      */
      console.log(document);

      //获取到button对象
      var btn = doucument.getElementById("btn");
      //修改按钮的文字
      console.log(btn.innerHTML);
      btn.innerHTML = "I'm Button";
    </script>
  </body>
</html>

（4）事件（Event）

事件：就是用户和浏览器之间的交互行为

可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码将会执行
onclick 点击一次、ondblclick点击两次
可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <!--结构和行为耦合，不推荐使用-->
    <!-- <button id="btn" onclick="alert('你点我干嘛！')；">我是一个按钮</button> -->
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
      //获取到button对象
      var btn = doucument.getElementById("btn");
      //可以为按钮的对应事件绑定处理函数的形式来响应事件
      //这样当事件被触发时，其对应的函数将会被调用
      
      //绑定一个单击事件
      //为单击事件绑定的函数，称为单击响应函数
      btn.onclick = function(){
        alert("单击时触发");
      };
      btn.ondblclick = function(){
        alert("双击才会出现");
      };
    </script>
  </body>
</html>

（5）文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行
将js代码编写到页面的下部是为了可以在页面加载完毕后再执行js代码
onload事件会在整个页面加载完毕后才触发
可以为window绑定一个onload事件，可以确保代码执行时所有的DOM对象都已经加载完毕了

<head>
  <script type="text/javascript">
    //为window绑定一个onload事件
    window.onload = function(){
      //获取id为btn的按钮
      var btn = document.getElementById("btn");
      //为按钮绑定一个单击响应函数
      btn.onclick = function(){
        alert("hello");
      };
    };
  </script>
</head>
<body>
  <button id="btn">点我一下</button>
  <!-- <script type="text/javascript">
    //将js代码编写到页面的下部是为了可以在页面加载完毕后再执行js代码
    //获取id为btn的按钮
    var btn = document.getElementById("btn");
    //为按钮绑定一个单击响应函数
    btn.onclick = function(){
      alert("hello");
    };
  </script> -->
</body>

2、DOM查询

（1）获取元素节点

window.onload = function(){
  //为id为btn01的按钮绑定一个单击响应函数
  var btn01 = document.getElementById("btn01");
  btn01.onclick = function(){
    var bj = document.getElenmentById("bj");
    //打印bj
    //innerHTML 通过这个属性可以获取到元素内部的html代码
    alert(bj.innerHTML);
  };

   //为id为btn01的按钮绑定一个单击响应函数
  var btn02 = document.getElementById("btn02");
  btn02.onclick = function(){
    //查找所以li节点
    //getElementsByTagName()可以根据标签名来获取一组元素节点对象
    //这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
    //即使查询到的元素只有一个也会封装到一个对象中
    var lis = document.getElenmentsByTagName("li");
    //打印lis
    //alert(lis);
    //变量lis
    for(var i=0; i<lis.length; i++){
      alert(lis[i].innerHTML);
    }
  };

  //为id为btn03的按钮绑定一个单击响应函数
  var btn03 = document.getElementById("btn03");
  btn03.onclick = function(){
    //查找name=gender的所有节点
    var inputs = document.getElenmentsByNmae("gender");
    //alert(inputs.length);
    for(var i=0; i<inputs.length; i++){
      //对于自结束标签，innerHTML无效
      //alert(inputs[i].innerHTML);
      //如果需要读取元素节点属性直接使用：元素.属性名
      //class属性不能采用这种方式，读取class属性时需要使用：元素.className
      alert(inputs[i].value);
      alert(inputs[i].name);
      alert(inputs[i].className);
    }
  };
};

（2）图片切换的练习

<html>
  <head>
    <mata charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{
        margin:0;
        padding:0;
      }
      #outer{
        width:500px;
        margin:50px auto;
        padding:10px;
        background-color:yellowgreen;
        /* 设置文本居中 */
        text-align:center;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        // 点击按钮切换图片
        // 获取两个按钮
        var prev = document.getElementById("prev");
        var naxt = document.getElementById("naxt");

        // 获取img标签
        var img = docunments.getElementsByTagName("img")[0];

        //创建一个数组，用来保存图片的路径
        var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]

        //创建一个变量来保存当前正在显示的图片的索引
        var index = 0;

        //获取id为info的p元素来修改提示文字
        var info = document.getElementById("info");
        //设置提示文字
        info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
        
        // 分别为两个按钮绑定单击响应函数
        prev.onclick = function(){
          //alert("上一张");
          // 切换到上一张，索引自减
          index--;
          //判断index是否小于0，小于0则改变为0
          if(index<0){
            //index = 0;
            //让图片可以循环
            index = imgArr.length - 1;
          };
          img.src = imgArr[index];
          //当点击按钮以后，重新设置信息
          info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
        };
        
        next.onclick = function(){
          //alert("下一张");
          //切换图片就是修改img的src属性
          //要修改一个元素的属性元素：元素.属性 = 属性值
          // 切换到下一张，索引自增
          index++;
          //判断index是否大于最后一个索引，最后一个索引为imgARrr.length - 1
          if(index>imgArr.length - 1){
            //index = imgArr.length - 1;
            //让图片可以循环
            index = 0;
          };
          img.src = imgArr[index];
          //当点击按钮以后，重新设置信息
          info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
        };
      }
    </script>
  </head>
  <body>
    <div id="outer">
      <p id="info"></p>
      <img src="img/1.jpg" alt="冰棍" />
      
      <button id="prev">上一张</button>
      <button id="next">下一张</button>
    </div>
  </body>
</html>

（3）获取元素节点的子节点

window.onload = function(){
  //为id为btn04的按钮绑定一个单击响应函数
  var btn04 = document.getElementById("btn04");
  btn04.onclick = function(){
    //获取id为city的元素
    var city = document.getElementById("city");
    //查找#city下所有的li节点
    var lis = city.getElementsByTagName("li");
    for(var i=0; i<lis.length; i++){
      alert(lis[i].innerHTML);
    }
  };

  //为id为btn05的按钮绑定一个单击响应函数
  var btn05 = document.getElementById("btn05");
  btn05.onclick = function(){
    //返回id为city的节点
    var city = document.getElementById("city");
    //返回#city下所有子节点
    //childNodes属性会获取包括文本节点在内的所有节点
    //根据DOM标准，标签与标签之间的空白也会当成文本节点
    //但是IE8及以下的浏览器，不会将空白文本当成子节点
    var cns = city.childNodes;
    //alert(cns.length);
    // for(var i=0; i<cns.length; i++){
    //   alert(cns[i]);
    // }
    //children属性可以获取当前元素的所有子元素
    var cns2 = city.chileren;
    alert(cns2.length);
  };

  //为id为btn06的按钮绑定一个单击响应函数
  var btn06 = document.getElementById("btn06");
  btn06.onclick = function(){
    //获取id为phone的元素
    var phone = document.getElementById("phone");
    //返回#phone的第一个子节点
    //phone.childNodes[0];
    //firstChild属性可获取到当前元素的第一个子节点（包括空白文本节点）
    var fir = phone.firstChild;
    //firstElementChild属性可以获取当前元素的第一个子元素，IE8及以下不支持
    // fir = phone.firstElementChild;
    alert(fir.innerHTML);
  };
};

（4）获取元素节点的父节点和兄弟节点

//定义一个函数，专门为指定的元素绑定单击函数
/* 参数
 idStr 要绑定单击响应函数的对象的id属性值
 fun 事件的回调函数，当单击元素时，该函数将会被触发
*/ 
function myClick(idStr,fun){
  var btn = document.getElementById("idStr");
  btn.onclick = fun;
};

window.onload = function(){
   //为id为btn07的按钮绑定一个单击响应函数
  myClick("btn07",function(){
    // 获取id为bj的节点
    var bj = document.getElementById("bj");
    // 返回#bj的父节点
    var pn = bj.parentNode;
    // alert(pn.innerHTML);
    // innerText 该属性可以获取到元素内部的文本内容，会去除html标签
    alert(pn.innerText);
  });

  //为id为btn08的按钮绑定一个单击响应函数
  myClick("btn08",function(){
    // 获取id为Android的元素
    var and = document.getElementById("android");
    //返回id为Andrid的前一个兄弟元素(也可能获取到空白文本)
    var ps = and.previousSibling;
    // 获取前一个元素兄弟（不包含空白文本），IE8以下不支持
    var pe = and.previousElementSibling
    alert(ps.innerHTML);
    alert(pe.innerHTML);
  });

  // 读取#username的value属性值
  myClick(btn09,function(){
    // 获取id为username的元素
    var um = document.getElementById("username");
    // 读取um的value属性值
    // 文本框的value属性值，就是文本框中填写的内容
    alert(um.value);
  });

   // 读取#username的value属性值
  myClick(btn10,function(){
    // 获取id为username的元素
    var um = document.getElementById("username");
    // 设置um的value属性值
   um.value = "今天天气真不错";
  });

  // 返回#bj的文本值
  myClick(btn11,function(){
    // 获取id为bj的元素
    var bj = document.getElementById("bj");
    // alert(bj.innerHTML);
    // alert(bj.innerText);
    // 获取bj中的文本
    // var fc = bj.firstChild;
    // alert(fc.nodeValue);
    // 与上面相同
    alert(bj.firstChild.nodeValue);
  });
};

{nextPage/}

（5）全选练习

<html>
  <head>
    <meta content="text/html; charset=UTF-8">
    <title>全选练习</title>
    <script type="text/javascript">
      window.onload = function(){
        // 获取四个多选框items
        var items = document.getElementsByName("items");
        // 1.全选按钮，点击按钮后四个多选框全部选中
        // 给id为checkAllBtn的按钮绑定一个单击响应函数
        var checkAllBtn = document.getElementById("checkAllBtn");
        // 给id为checkedAllBox的按钮绑定一个单击响应函数
        var checkedAllBox = document.getElementById("checkedAllBox");
        
        checkAllBtn.onclick = function(){
          // 遍历items
          for(var i=0; i<items.length; i++){
            // 通过多选框的checked属性可以来获取或者设置多选框的选中状态
            // alert(items[i].checked;)
            // 设置四个多选框变为选中
            items[i].checked = true;
          }
          // 将全选/全不选设置为选中
          checkedAllBox.checked = true;
        };

        // 2.全不选按钮，点击按钮后四个多选框全部不选中
        // 给id为checkNoBtn的按钮绑定一个单击响应函数
        var checkNoBtn = document.getElementById("checkNoBtn");
        checkNoBtn.onclick = function(){
          // 遍历items
          for(var i=0; i<items.length; i++){
            // 设置四个多选框变为不选中
            items[i].checked = false;
          }
          // 将全选/全不选设置为不选中
          checkedAllBox.checked = false;
        };

        // 3.反选按钮，点击按钮后选中的变为不选中，没选中的变为选中
        // 给id为checkRevBtn的按钮绑定一个单击响应函数
        var checkRevBtn = document.getElementById("checkRevBtn");
        checkRevBtn.onclick = function(){
          // 设置checkedAllBox为默认选中状态
          checkedAllBox.checked = true;
          // 遍历items
          for(var i=0; i<items.length; i++){
            // 判断多选框状态
            // if(items[i].checked){
            //   // 证明多选框为已选中，则设置为没选中状态
            //   items[i].checked = false;
            // }else{
            //   // 证明多选框为没选中，则设置为选中状态
            //   items[i].checked = true;
            // }
            // 直接取反
            items[i].checked = !items[i].checked;
            // 在反选时也需要判断四个多选框是否全都选中
            // 判断四个多选框是否全选
            // 只有有一个没选中则不是全选
            if(!items[i].checked){
              // 一旦进入判断则证明不是全选
              // 将checkedAllBox设置为没选中状态
              checkedAllBox.checked = false;
            }
          }
        };

        // 4.提交按钮，点击按钮后，将弹出所有选中的多选框的value属性值
        // 给id为sendBtn的按钮绑定一个单击响应函数
        var sendBtn = document.getElementById("sendBtn");
        sendBtn.onclick = function(){
          // 遍历items
          for(var i=0; i<items.length; i++){
            // 判断多选框是否选中
            if(items[i].checked){
              alert(items[i].value);
            }
          }
        };

        // 5.全选/全不选多选框，当他选中时其余的也选中，当他取消时其余的也取消
        // // 给id为checkedAllBox的按钮绑定一个单击响应函数
        // var checkedAllBox = document.getElementById("checkedAllBox");
        checkedAllBox.onclick = function(){
          // 在事件响应函数中，响应函数是给谁绑定的，this就是谁
          // alert(this == checkedAllBox);
          // 设置多选框的选中状态
          for(var i=0; i<items.length; i++){
            // items[i].checked = checkedAllBox.checked;
            items[i].checked = this.checked;
          }
        };

        // 如果四个多选框全选中，则checkedAllBox也应该选中
        // 如果四个多选框没有全选中，则checkedAllBox也不应该选中
        // 6.为四个多选框分别绑定点击函数
        for(var i=0; i<items.length; i++){
          items[i].onclick = function(){
            // 设置checkedAllBox为选中状态
            checkedAllBox.checked = true;
            for(var j=0; j<items.length; j++){
              // 判断四个多选框是否全选
              // 只有有一个没选中则不是全选
              if(!items[j].checked){
                // 一旦进入判断则证明不是全选
                // 将checkedAllBox设置为没选中状态
                checkedAllBox.checked = false;
                // 一旦进入判断则已经得出结果，不用再继续执行循环
                break;
              }
            }
          };
        }

        
      };
    </script>
  </head>
  <body>
    <form method="post" action="">
      你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
      <br/>
      <input type="checkbox" name="items" value="足球" />足球
      <input type="checkbox" name="items" value="篮球" />篮球
      <input type="checkbox" name="items" value="羽毛球" />羽毛球
      <input type="checkbox" name="items" value="乒乓球" />乒乓球
      <br/>
      <input type="button" id="checkAllBtn" value="全 选"/>
      <input type="button" id="checkNoBtn" value="全不选"/>
      <input type="button" id="checkRevBtn" value="反 选"/>
      <input type="button" id="sendBtn" value="提 交"/>
    </form>
  </body>
</html>

（6）DOM查询的其他方法

<html>
  <head>
    <script>
      window.onload = function(){
        // 获取body标签
        // var body = document.getElementsByName("body")[0];
        // 在document中有一个属性body，他保存的是body的引用
        var body = document.body;
        console.log(body);
        
        // document.documentElenment保存的是html的根标签
        var html = document.documentElenment;
        console.log(html);
        
        // document.all代表页面中的所有元素
        var all = document.all;
        console.log(all.length); //输出6
        for(var i=0; i<all.length; i++){
          console.log(all[i]);
        }
        all = document.getElementsByTagName("*"); //相等于document.all
        console.log(all.length);

        // 根据元素的class属性值查询一组元素节点对象
        // getElementsByClassNmae可以根据元素的class属性值查询一组元素节点对象
        // 但是不支持IE8及以下浏览器
        var box1 = document.getElementsByClassNmae("box1");
        console.log(box1.length);

        // 获取页面中所有的div元素
        var divs = document.getElementsByTagName("div");
        
        // 获取class为box1中所有的div
        // 通过css选择器选择来获取
        /* 
          document.querySelector()
          需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
          可以兼容IE8浏览器
          使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个也只会返回第一个
        */
        var div = document.querySelector(".box1 div");
        console.log(div.innerHTML);
        var box1 = document.querySelector(".box1");
        console.log(box1);

        // document.querySelectorAll()
        // 该方法与querySelector()用法类似，但是可以将所有满足条件的元素封装到一个数组中返回
        // 即使符合条件的元素只有一个也会返回为数组
        var box1 = document.querySelectorAll(".box1");
        console.log(box1.length);
      };
    </script>
  </head>
  <body>
    <div class="box1">
      我是box1中的div
      <div>我是box1中的div</div>
    </div>
    <div class="box1">
      <div>我是box1中的div</div>
    </div>
    <div class="box1">
      <div>我是box1中的div</div>
    </div>
    <div> </div>
  </body>
</html>

（7）DOM增删改

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style/css.css" />
        <script type="text/javascript">
            window.onload = function() {
                //1.创建一个"广州"节点,添加到#city下
                myClick("btn01",function(){
                    //创建广州节点 <li>广州</li>
                    //创建li元素节点
                    // document.createElement()可以用于创建一个元素节点对象，
                    // 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
                    var li = document.createElement("li");
                    //创建广州文本节点
                    // document.createTextNode()可以用来创建一个文本节点对象
                    // 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                    var gzText = document.createTextNode("广州");
                    //将gzText设置li的子节点
                    // appendChild()向一个父节点中添加一个新的子节点
                    // - 用法：父节点.appendChild(子节点);
                    li.appendChild(gzText);
                    //获取id为city的节点
                    var city = document.getElementById("city");
                    //将广州添加到city下
                    city.appendChild(li);
                });
                
                //2.将"广州"节点插入到#bj前面
                myClick("btn02",function(){
                    //创建一个广州
                    var li = document.createElement("li");
                    var gzText = document.createTextNode("广州");
                    li.appendChild(gzText);
                    //获取id为bj的节点
                    var bj = document.getElementById("bj");
                    //获取city
                    var city = document.getElementById("city");
                     // insertBefore()可以在指定的子节点前插入新的子节点
                     //  - 语法：父节点.insertBefore(新节点,旧节点);
                    city.insertBefore(li , bj);
                });
                
                //3.使用"广州"节点替换#bj节点
                myClick("btn03",function(){
                    //创建一个广州
                    var li = document.createElement("li");
                    var gzText = document.createTextNode("广州");
                    li.appendChild(gzText);
                    //获取id为bj的节点
                    var bj = document.getElementById("bj");
                    //获取city
                    var city = document.getElementById("city");
                     // replaceChild()可以使用指定的子节点替换已有的子节点
                     //     - 语法：父节点.replaceChild(新节点,旧节点);
                    city.replaceChild(li , bj);
                });
                
                //4.删除#bj节点
                myClick("btn04",function(){
                    //获取id为bj的节点
                    var bj = document.getElementById("bj");
                    //获取city
                    var city = document.getElementById("city");
                    // removeChild()可以删除一个子节点
                    //     - 语法：父节点.removeChild(子节点);
                    //city.removeChild(bj);
                    // 子节点.parentNode.removeChild(子节点);
                    bj.parentNode.removeChild(bj);
                });
                
                //5.读取#city内的HTML代码
                myClick("btn05",function(){
                    //获取city
                    var city = document.getElementById("city");
                    alert(city.innerHTML);
                });
              
                //6.设置#bj内的HTML代码
                myClick("btn06" , function(){
                    //获取bj
                    var bj = document.getElementById("bj");
                    bj.innerHTML = "昌平";
                });
                
                myClick("btn07",function(){
                    //向city中添加广州
                    var city = document.getElementById("city");
                    // 使用innerHTML也可以完成DOM的增删改的相关操作
                    // 一般我们会两种方式结合使用
                    //city.innerHTML += "<li>广州</li>";
                    //创建一个li
                    var li = document.createElement("li");
                    //向li中设置文本
                    li.innerHTML = "广州";
                    //将li添加到city中
                    city.appendChild(li);
                });
            };
            
            function myClick(idStr, fun) {
                var btn = document.getElementById(idStr);
                btn.onclick = fun;
            }
        </script>
    </head>
    <body>
        <div id="total">
            <div class="inner">
                <p>
                    你喜欢哪个城市?
                </p>
                <ul id="city">
                    <li id="bj">北京</li>
                    <li>上海</li>
                    <li>东京</li>
                    <li>首尔</li>
                </ul>
            </div>
        </div>
        <div id="btnList">
            <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
            <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
            <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
            <div><button id="btn04">删除#bj节点</button></div>
            <div><button id="btn05">读取#city内的HTML代码</button></div>
            <div><button id="btn06">设置#bj内的HTML代码</button></div>
            <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
        </div>
    </body>
</html>

（8）添加删除记录-删除

<html>
  <head>
    <title>添加删除记录练习</title>
    <script>
      window.onload = function(){
        // 点击超链接后删除一个员工信息
        // 获取所有的超链接
        var allA = document.getElementsByTagName("a");
        // 为每一个超链接都绑定一个单机响应函数
        for(var i=0; i<allA.length; i++){
          allA[i].onclick = function(){
            // 点击超链接后要删除超链接所在行
            // 这里点击哪个超链接this就是谁
            // 获取a标签父元素的父元素 tr
            var tr = this.parentNode.parentNode;
            // 获取要删除的员工的名字
            // var name = tr.getElementsByTagName("td")[0].innerHTML;
            var name = tr.children[0].innerHTML;
            // 删除之前弹出提示框
            // alert("确认删除吗？");
            // confirm()用于弹出一个带有确认和取消的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示
            // 如果用户点击确认返回true，点击取消返回false
            var flag = confirm("确认删除"+name+"吗？");
            // 如果用户点击确认
            if(flag){
              // 删除tr，tr的父元素删除子元素tr
              tr.parentNode.removeChild(tr);
            }
            // 点击超链接后会跳转页面，是超链接的默认行为
            // 但是此时不需要默认行为，可以通过在响应函数的最后return false来取消默认行为
            return false;
          };
        }
      };
    </script>
  </head>
  <body>
    <table id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
    </table>
    <div id="formDiv">
      <h4>添加新员工</h4>
      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp">
            <input type="text" name="enmName" id="empName"
          </td>
        </tr>
        <tr>
          <td class="word">email:</td>
          <td class="inp">
            <input type="text" name="email" id="email"
          </td>
        </tr>
        <tr>
          <td class="word">salary:</td>
          <td class="inp">
            <input type="text" name="salary" id="salary"
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button id="addEmpButton" value="abc">
              Submit
            </button>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

{nextPage/}

（9）添加删除记录-添加

<html>
  <head>
    <title>添加删除记录练习</title>
    <script>
      // 删除tr的响应函数
      function delA(){
        // 点击超链接后要删除超链接所在行
        // 这里点击哪个超链接this就是谁
        // 获取a标签父元素的父元素 tr
        var tr = this.parentNode.parentNode;
        // 获取要删除的员工的名字
        // var name = tr.getElementsByTagName("td")[0].innerHTML;
        var name = tr.children[0].innerHTML;
        // 删除之前弹出提示框
        // alert("确认删除吗？");
        // confirm()用于弹出一个带有确认和取消的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示
        // 如果用户点击确认返回true，点击取消返回false
        var flag = confirm("确认删除"+name+"吗？");
        // 如果用户点击确认
        if(flag){
        // 删除tr，tr的父元素删除子元素tr
          tr.parentNode.removeChild(tr);
        }
        // 点击超链接后会跳转页面，是超链接的默认行为
        // 但是此时不需要默认行为，可以通过在响应函数的最后return false来取消默认行为
            return false;
      };
        
      window.onload = function(){
        // 点击超链接后删除一个员工信息
        // 获取所有的超链接
        var allA = document.getElementsByTagName("a");
        // 为每一个超链接都绑定一个单机响应函数
        for(var i=0; i<allA.length; i++){
          allA[i].onclick = delA;
        }
        // 添加员工的功能，点击按钮后将员工信息添加到表格中
        // 为提交按钮绑定一个单击函数
        var addEmpButton = document.getElementById("addEmpButton");
        addEmpButton.onclick = function(){
          // 获取用户提交的员工信息
          // 获取员工的名字
          var name = document.getElementById("empName").value;
          // 获取员工的email和salary
          var email = document.getElementById("email").value;
          var salary = document.getElementById("salary").value;
          //需要将获取到的信息保存到tr中
          // 创建一个tr
          var tr =document.createElement("tr");
          // 创建四个td
          var nameTd =document.createElement("td");
          var emailTd =document.createElement("td");
          var salaryTd =document.createElement("td");
          var aTd =document.createElement("td");
          // 创建一个a元素
          var a = document.createElement("a");
          // 创建文本节点
          var nameText = document.createTextNode(name);
          var emailText = document.createTextNode(email);
          var salaryText = document.createTextNode(salary);
          var delText = document.createTextNode("Delete");
          // 将文本添加到td中
          nameTd.appendChild(nameText);
          emailTd.appendChild(emailText);
          salaryTd.appendChild(salaryText);
          // 向a中添加文本
          a.appendChild(delText);
          // 将a添加到td中
          aTd.appendChild(a);
          // 将td添加到tr中
          tr.appendChild(nameTd);
          tr.appendChild(emailTd);
          tr.appendChild(salaryTd);
          tr.appendChild(aTd);
          // 向a中添加href属性
          a.href = "javascript:;";
          // 为新添加的a再绑定一次单击响应函数
          a.onclick = delA;
          // 获取table
          var employeeTable = document.getElementById("employeeTable");
          // 获取employeeTable中的tbody
          var tbody = employeeTable.getElementsByTagName("tbody")[0];
          // 将tr添加到table中
          tbody.appendChild(tr);
        };
      };
    </script>
  </head>
  <body>
    <table id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
    </table>
    <div id="formDiv">
      <h4>添加新员工</h4>
      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp">
            <input type="text" name="enmName" id="empName"
          </td>
        </tr>
        <tr>
          <td class="word">email:</td>
          <td class="inp">
            <input type="text" name="email" id="email"
          </td>
        </tr>
        <tr>
          <td class="word">salary:</td>
          <td class="inp">
            <input type="text" name="salary" id="salary"
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button id="addEmpButton" value="abc">
              Submit
            </button>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

（10）添加删除记录-修改

<html>
  <head>
    <title>添加删除记录练习</title>
    <script>
      // 删除tr的响应函数
      function delA(){
        // 点击超链接后要删除超链接所在行
        // 这里点击哪个超链接this就是谁
        // 获取a标签父元素的父元素 tr
        var tr = this.parentNode.parentNode;
        // 获取要删除的员工的名字
        // var name = tr.getElementsByTagName("td")[0].innerHTML;
        var name = tr.children[0].innerHTML;
        // 删除之前弹出提示框
        // alert("确认删除吗？");
        // confirm()用于弹出一个带有确认和取消的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示
        // 如果用户点击确认返回true，点击取消返回false
        var flag = confirm("确认删除"+name+"吗？");
        // 如果用户点击确认
        if(flag){
        // 删除tr，tr的父元素删除子元素tr
          tr.parentNode.removeChild(tr);
        }
        // 点击超链接后会跳转页面，是超链接的默认行为
        // 但是此时不需要默认行为，可以通过在响应函数的最后return false来取消默认行为
            return false;
      };
        
      window.onload = function(){
        // 点击超链接后删除一个员工信息
        // 获取所有的超链接
        var allA = document.getElementsByTagName("a");
        // 为每一个超链接都绑定一个单机响应函数
        for(var i=0; i<allA.length; i++){
          allA[i].onclick = delA;
        }

        // 添加员工的功能，点击按钮后将员工信息添加到表格中
        // 为提交按钮绑定一个单击函数
        var addEmpButton = document.getElementById("addEmpButton");
        addEmpButton.onclick = function(){
          // 获取用户提交的员工信息
          // 获取员工的名字
          var name = document.getElementById("empName").value;
          // 获取员工的email和salary
          var email = document.getElementById("email").value;
          var salary = document.getElementById("salary").value;
          //需要将获取到的信息保存到tr中
          // 创建一个tr
          var tr =document.createElement("tr");
          // 设置tr中的内容
          tr.innerHTML = "<td>"+name+"</td>"+
                          "<td>"+email+"</td>"+
                          "<td>"+salary+"</td>"+
                          "<td><a href='javascript;:'>Delete</a></td>";
          // 获取刚添加的a元素，并为其绑定单击响应函数
          var a = tr.getElementsByTagName("a")[0];
          a.onclick = delA;
          // 获取table
          var employeeTable = document.getElementById("employeeTable");
          // 获取employeeTable中的tbody
          var tbody = employeeTable.getElementsByTagName("tbody")[0];
          // 将tr添加到table的tbody中
          tbody.appendChild(tr);
        };
      };
    </script>
  </head>
  <body>
    <table id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
    </table>
    <div id="formDiv">
      <h4>添加新员工</h4>
      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp">
            <input type="text" name="enmName" id="empName"
          </td>
        </tr>
        <tr>
          <td class="word">email:</td>
          <td class="inp">
            <input type="text" name="email" id="email"
          </td>
        </tr>
        <tr>
          <td class="word">salary:</td>
          <td class="inp">
            <input type="text" name="salary" id="salary"
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button id="addEmpButton" value="abc">
              Submit
            </button>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

（11）添加删除记录-a的索引问题

<html>
  <head>
    <title>添加删除记录练习</title>
    <script>
      window.onload = function(){
        // 点击超链接后删除一个员工信息
        // 获取所有的超链接
        var allA = document.getElementsByTagName("a");
        // 为每一个超链接都绑定一个单机响应函数
        for(var i=0; i<allA.length; i++){
            // for循环会在页面加载完成之后立即执行
            // 而响应函数会在超链接被点击才会执行
            // 当响应函数执行时，for循环早已经执行完毕
          alert("for循环正在执行"+i)；
          allA[i].onclick = function(){
            alert("响应函数正在执行"+i);
            // alert(allA[i]);
            return false;
          };
        }
      };
    </script>
  </head>
  <body>
    <table id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
    </table>
    <div id="formDiv">
      <h4>添加新员工</h4>
      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp">
            <input type="text" name="enmName" id="empName"
          </td>
        </tr>
        <tr>
          <td class="word">email:</td>
          <td class="inp">
            <input type="text" name="email" id="email"
          </td>
        </tr>
        <tr>
          <td class="word">salary:</td>
          <td class="inp">
            <input type="text" name="salary" id="salary"
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button id="addEmpButton" value="abc">
              Submit
            </button>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

{nextPage/}

（12）操作内联样式

<html>
  <head>
    <title></title>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
      }
    </style>
    <script>
      window.onload = function(){
        // 点击按钮后，修改box1的大小
        // 获取box1
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
          // 修改box1的宽度
          // 通过JS修改元素的样式
          // 语法：元素.style.样式名 = 样式值
          // 如果CSS的样式名中含有减号-，这种名称在JS中是不合法的
          // 需要将这种样式名修改为驼峰命名法，去掉减号-，然后将-后的字母大写
          // border-top-width需要改为borderTopWidth
          // 通过style属性设置的样式都是内联样式，优先级较高
          // 通过JS修改的样式基本都会立即显示，但是如果在样式中写了!important，则此样式会有最高的优先级，即使通过JS也不能覆盖此样式
          box1.style.width = "300px";
          box1.style.height = "300px";
          // box1.style.background-color = "blue";
          box1.style.backgroundColor = "blue";
        };

        // 点击按钮2后读取元素的样式
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function(){
          // 读取box1的样式
          // 语法：元素.style.样式名
          // 通过style设置或读取的都是内联样式
          // 无法读取到样式表里的样式
          // alert(box1.style.width);
          alert(box1.style.backgroundColor);
        }
      };
    </script>
  </head>
  <body>
    <button id="btn01">点我一下</button>
    <button id="btn02">点我一下2</button>
    <div id="box1"></div>
  </body>
</html>

（13）获取元素的样式

元素.currentStyle.样式名

getComputdeStyle()方法

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:yellow;
      }
    </style>
    <script>
      window.onload = function(){
        var box1 = document.getElementById("Box1");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
          // 获取元素当前显示的样式
          // 语法：元素.currentStyle.样式名
          // 如果当前没有设置样式，则返回样式的默认值
          // currentStyle只有IE支持
          // alert("box1.currentStyle.backgroundColor");
          // 在其他浏览器中可以使用getConputedStyle()方法来获取元素当前的样式，这个方法是window的方法，可以直接使用
          // 需要两个参数（第一个：要获取样式的元素，第二个：可以传递一个伪元素，一般都传null）
          // 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式来读取样式
          // var obj = getComputedStyle(box1,null);
          // alert(obj);
          // 如果获取的样式没有设置样式，则还是会返回一个值
          // IE8及以下不支持该方法
          // 通过currentStyle和getComputdeStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性
          // 正常浏览器的方式
          // alert(getComputedStyle(box1,null).backgroundColor);
          // IE8的方式
          // alert(box1.currentStyle.backgroundColor);
          alert(getStyle(box1,"width"));
        };
      };
      // 定义一个函数用来获取指定元素当前的样式
      // 参数：obj 要获取样式的元素，name要获取的样式名
      function getStyle(obj,name){
        // 正常浏览器的方式
        return getConputedStyle(obj,null)[name];
        // IE8的方式
        return obj.currentStyle[name];
      };
    </script>
  </head>
  <body>
    <button id="btn01">点我一下</button>
    <br/>
    <div id="box1"></div>
  </body>
</html>

getStyle方法

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:yellow;
      }
    </style>
    <script>
      window.onload = function(){
        var box1 = document.getElementById("Box1");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
          alert(getStyle(box1,"width"));
        };
      };
      // 定义一个函数用来获取指定元素当前的样式
      // 参数：obj 要获取样式的元素，name要获取的样式名
      function getStyle(obj,name){
        // 加入window后getConputedStyle会变成对象的属性
        if(window.getConputedStyle){
          // 正常浏览器的方式,具有getConputedStyle()方法
          return getConputedStyle(obj,null)[name];
        }else{
          // IE8的方式,没有getConputedStyle()方法
          return obj.currentStyle[name];
        }
        
        // 在IE11中优先级会改变
        // if(obj.currentStyle){
        //   return obj.currentStyle[name];
        // }else{
        //   return getConputedStyle(obj,null)[name];
        // }

        // 与第一种一样，但是结构较为复杂
        // return window.getConputedStyle?getConputedStyle(obj,null)[name]:obj.currentStyle[name];
        
      }
    </script>
  </head>
  <body>
    <button id="btn01">点我一下</button>
    <br/>
    <div id="box1"></div>
  </body>
</html>

（14）其他样式相关的属性

HTML DOM Element 对象

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:150px;
        background-color:red;
        padding:10px;
        border:10px solid yellow;
      }
      #box2{
        padding:100px;
        background-color:#bfa;
      }
      #box4{
        width:200px;
        height:300px;
        backgroun-color:#bfa;
        overflow:atuo;
      }
      #box5{
        width:450px;
        height:600px;
        backgroun-color:yellow;
      }
    </style>
    <script>
      window.onload function(){
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        var box4 = document.getElementById("box4");
        btn01.onclick = function(){
          // clientWidth和clientHeight可以获取元素的可见宽度与高度
          // 不带px的数字，可以直接计算
          // 会获取元素的宽度和高度，包括内容区和内边距
          // 这些属性都是只读的，不能修改
          alert(box1.clientWidth);
          alert(box1.clientHeight);

          // offsetWidth和offsetHeight可以获取元素的整个宽度和高度，包括内容区、内边距、边框
          alert(box1.offsetWidth);

          // offsetParent可以用来获取当前元素的定位父元素
          // 会获取到离当前元素最近的开启了定位的祖先元素
          // 如果所有的祖先元素都没有开启定位，则返回body
          var op = box1.offsetParent;
          alert(op.id)

          
          // offsetLeft当前元素相对于其定位父元素的水平偏移量
          // offsetTop当前元素相对于其定位父元素的垂直偏移量
          alert(box1.offsetLeft); //输出100px

          // scrollHeight滚动高度、scrollWidth滚动宽度，可以获取到元素整个滚动区域的高度和宽度
          alert(box4.scrollHeight);
          alert(box4.scrollWidth);

          // scrollLeft可以获取水平滚动条滚动的距离
          // scrollTop可以获取垂直滚动条滚动的距离
          alert(box4.scrollLeft);

          
          // alert(box4.clientHeight); //283
          alert(box4.scrollHeight - box4.scrollTop); //滚动条拉到最底部输出283
          // 当满足scrollHeight - scrollTop == clientHeight说明垂直滚动条滚动到底了
          // 当满足scrollWidth - scrollLeft == clientWidth说明水平滚动条滚动到底了
        };
      };
    </script>
  </head>
  <body id="body">
    <button id="btn01"></button>
    <div id="box4">
      <div id="box5"></div>
    </div>
    <br/><br/>
    <div id="box3">
      <div id="box2" style="position:relative">
        <div id="box1"></div>
      </div>
    </div>
  </body>
</html>

练习

<html>
  <head>
    <style>
      #info{
        width:300px;
        height:500px;
        background-color:#bfa;
        overflow:auto;
      }
    </style>
    <script>
      window.onload = function(){
        // 当垂直滚动条滚动到底时使表单项可用
        // onscroll该事件在滚动条滚动时会触发
        var info = document.getElementById("info");
        // 获取表单项
        var inputs = document.getElementsByTagName("input");
        // 为info绑定一个滚动条滚动事件
        info.onscroll = function(){
          // 检查垂直滚动条是否滚动到底
          // 这里出现了一个小问题，滚动条滚动到最底部时始终还差一点，所以只好使用离滚动条底部距离<1来判断
          if (info.scrollHeight - (info.scrollTop + info.clientHeight) < 1) {
            // 滚动条滚到底时使表单项可用
            // alert("我到底了");
            inputs[0].disabled = false;
            inputs[1].disabled = false;
          }
        };
        // 添加一个必须勾选阅读完成才能注册
        inputs[1].onclick = function(){
          // 判断表单项是否勾选
          if(inputs[0].checked == true){
            alert("恭喜您，注册成功！")
          }else{
            alert("请勾选同意本协议")
          }
        };
      };
    </script>
  </head>
  <body>
    <h3>欢迎亲爱的用户注册</h3>
    <p id="info">
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
      亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册
    </p>
    <!-- 如果为表单项添加disabled="disabled"则表单项将变为不可用的状态 -->
    <input type="checkbox" disabled="disabled" />我已仔细阅读
    <input type="submit" value="注册" disabled="disabled" />
  </body>
</html>

15、事件对象

<html>
  <head>
    <style>
      #areaDiv{
        border:1px solid black;
        width:300px;
        height:100px;
        margin-bottom:10px;
      }
      #showMsg{
        border:1px solid black;
        width:300px;
        height:20px;
      }
    </style>
    <script>
      window.onload = function(){
        // 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
        var areaDiv = document.getElementById("areaDiv");
        var showMsg = document.getElementById("showMsg");
        // onmousemove该事件将会当鼠标在元素中移动时被触发
        // 事件对象：
        // 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
        // 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下
        areaDiv.onmousemove = function(event){
          // 在IE8中，响应函数被触发时，浏览器不会传递事件对象
          // 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
          // 解决兼容性问题
          /* if(!evet){
               event = window.event;
             }
          */
          event = event || window.event;
          // clientX可以获取获取鼠标的水平坐标
          // clientY可以获取获取鼠标的垂直坐标
          var x = event.clientX;
          var y = event.clientY;
          // 在showMsg中显示鼠标的坐标
          showMsg.innerHTML = "x = " +x + ",y="+y;
        };
      };
    </script>
  </head>
  <body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
  </body>
</html>

{nextPage/}

练习：跟随鼠标移动

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        /* 开启box1的绝对定位 */
        position:absolute;
      }
    </style>
    <script>
      window.onload = function(){
        // 使div可以跟随鼠标移动
        var box1 = document.getElementById("box1");
        document.onmousemove = function(event){
          // 解决兼容性问题
          event = event || window.event;
          // 获取滚动条滚动的距离
          // Chrome可以获取到body的scrollTop
          // IE等浏览器获取不到body的scrollTop，但是能获取到html的scrollTop
          // 解决兼容问题
          // var st = document.body.scrollTop;
          // var st = document.documentElement.scrollTop;
          var st = document.body.scrollTop || document.documentElement.scrollTop;
          var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
          // 获取鼠标的坐标
          // clientX和clientY用于获取鼠标在当前可见窗口的坐标
          // div的偏移量是相对于整个页面的
          // pageX和pageX可以获取鼠标相对于整个页面的坐标，不兼容IE8
          // var left = event.pageX;
          // var top = event.pageY;
          var left = event.clientX;
          var top = event.clientY;
          // 设置div的偏移量
          box1.style.left = left + sl +"px";
          box1.style.top = top + st +"px";
        };
      };
    </script>
  </head>
  <body style="height:1000px;width:2000px">
    <div id="box1"></div>
  </body>
</html>

(16)事件冒泡

事件的冒泡：指事件的向上传导，当后代元素上的事件被触发时，其祖先元素的 相同事件 也会被触发

在开发中，大部分的事件冒泡都是有用的。如果不希望发生事件冒泡可以通过事件对象来取消冒泡
可以将事件对象的canceBubble=true用来取消冒泡

<html>
  <head>
    <style>
      #box1{
        width:200px;
        height:200px;
        background-color:yellowgreen;
      }
      #s1{
        background-color:red;
      }
    </style>
    <script>
      window.onload = function(){
        // 为s1绑定一个单击响应函数
        var s1 = document.getElementById("s1");
        s1.onclick = function(event){
          event = event || window.event;
          alert("我是span的单击响应函数");
          // 可以将事件对象的canceBubble设置为true用来取消冒泡
          event.cancelBubble = true;
        };
        // 为box1绑定一个单击响应函数
        var box1 = document.getElementById("box1");
        box1.onclick = function(){
          alert("我是div的单击响应函数");
        };
        // 为body绑定一个单击响应函数
        document.body.onclick = function(){
          alert("我是body的单击响应函数");
        };
      };
    </script>
  </head>
  <body>
    <div id="box1">
      我是box1
      <span id="s1">我是span</span>
    </div>
  </body>
</html>

（17）冒泡的应用—事件的委派

事件委派：将事件统一绑定给元素的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

<html>
  <head>
    <script>
      window.onload = function(){
        // 点击按钮后添加超链接
        // 获取btn01
        var btn01 = document.getElementById("btn01");
        // 获取ul
        var u1 = document.getElementById("u1");
        btn01.onclick = function(){
          // 创建一个li
          var li = document.createElement("li");
          li.innerHTML = "<a href='javascript:;' class="link">新建的超链接</a>";
          // 将li添加到ul中
          u1.appendChild(li);
        };
        // 为每一个超链接都绑定一个单击响应函数
        // 本方法操作比较麻烦，且只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
        // 获取所有的a
        var allA = document.getElementsByTagName("a");
        // 遍历a
        /*for(i=0; i<allA.length; i++){
          allA[i].onclick = function(){
            alert("我是a的单击响应函数")
          };
        }*/
        // 希望只绑定一次即可应用到多个元素上，即使元素是后添加的
        // 为ul绑定一个单级响应函数
        u1.onclick = function(event){
          event = event || window.event;
          // event中的target表示触发事件的对象
          // alert("event.target");
          // 如果触发事件的对象是期望元素则执行，否则不执行
          if(event.target.className == "link"){
            alert("我是ul的单击响应函数");
          }
        };
      };
    </script>
  </head>
  <body>
    <button id="btn01">添加超链接</button>
    <ul id="u1">
      <li>
        <p>我是P元素</p>
      </li>
      <li><a href="javascript:;" class="link">超链接一</a></li>
      <li><a href="javascript:;" class="link">超链接二</a></li>
      <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
  </body>
</html>

（18）事件的绑定

<html>
  <head>
    <script>
      window.onload = function(){
        // 点击按钮后弹出一个内容
        // 获取按钮对象
        var btn01 = document.getElementById("btn01");
        // 使用对象.事件 = 函数的形式绑定响应函数
        // 只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个则后边的会覆盖掉前边的
        // 为btn01绑定一个单击响应函数
        /*btn01.onclick = function(){
          alert(1);
        };*/
        // 为btn01绑定第二个单击响应函数
        /*btn01.onclick = function(){
          alert(1);
        };*/
        /* addEventListener()
        *通过这个方法也可以为元素绑定单击响应函数
        *参数：
        *1.事件的字符串，不要on
        *2.回调函数，是事件触发时该函数会被调用
        *是否在捕获阶段触发，需要一个布尔值，一般都为false
        *使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，当事件被触发时，响应函数将会按照函数的绑定顺序执行
        *不支持IE8及以下浏览器
        */
        btn01.addEventListener("click",function(){
          alert(1);
        },false);
        btn01.addEventListener("click",function(){
          alert(2);
        },false);
        btn01.addEventListener("click",function(){
          alert(3);
        },false);
        /*attachEvent()可以在IE8中来绑定事件
        *1.事件的字符串，要on
        *2.回调函数
        *可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反
        *不支持IE8以上
        */
        btn01.attachEvent("onclick",function(){
          alert(1);
        });
        btn01.attachEvent("onclick",function(){
          alert(2);
        });
        // 自定义bind函数
        bind(btn01,"click",function(){
          alert(this);
        });
        bind(btn01,"click",function(){
          alert(2);
        });
      };
      // 自定义一个函数，用来为指定元素绑定响应函数
        // addEventListener()中的this是绑定事件的对象
        // attachEvent()中的this是window，需要统一两个方法的this
        /*参数：
        *obj要绑定事件的对象
        *eventStr事件的字符串(不要on)
        *callback回调函数
        */
      function bind(obj,eventStr,callback){
        if(obj.addEventListener){
          // 大部分浏览器兼容的方式
          obj.addEventListener(eventStr,callback,flase);
        }else{
          // this是由调用方式决定
          // 可以使用匿名函数调用回调函数，这样就可以指定this
          // IE及以下浏览器，加一个on
          // obj.attachEvent("on"+eventStr,callback);
          obj.attachEvent("on"+eventStr,function(){
            // 在匿名函数中调用回调函数
            callback.call(obj);
          });
        }
      };
    </script>
  </head>
  <body>
    <button id="btn01">点我一下</button>
  </body>
</html>

（19）事件的传播

事件的冒泡和捕获阶段

<html>
  <head>
    <style>
      #box1{
        width:300px;
        height:300px;
        background-color:yellowgreen;
      }
      #box2{
        width:200px;
        height:200px;
        background-color:yellow;
      }
      #box3{
        width:150px;
        height:15px;
        background-color:skyblue;
      }
    </style>
    <script>
      window.onload = function(){
        // 分别为三个div绑定单击响应函数
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        bind(box1,"click",function(){
          alert("我是box1的响应函数");
        });
        bind(box2,"click",function(){
          alert("我是box2的响应函数");
        });
        bind(box3,"click",function(){
          alert("我是box3的响应函数");
        });
      };
      function bind(obj,eventStr,callback){
        if(obj.addEventListener){
          // 大部分浏览器兼容的方式
          obj.addEventListener(eventStr,callback,flase);
        }else{
          // this是由调用方式决定
          // 可以使用匿名函数调用回调函数，这样就可以指定this
          // IE8及以下浏览器，加一个on
          // obj.attachEvent("on"+eventStr,callback);
          obj.attachEvent("on"+eventStr,function(){
            // 在匿名函数中调用回调函数
            callback.call(obj);
          });
        }
      };
    </script>
  </head>
  <body>
    <div id="box1">
      <div id="box2">
        <div id="box3"></div>
      </div>
    </div>
  </body>
</html>