JavaWeb(第六周)

作者: mwj610 | 来源:发表于2019-04-07 21:28 被阅读0次

一、javascript的简介

是基于对象和事件驱动的语言，应用与客户端。

基于对象：提供了好多对象，可以直接拿过来用
事件驱动：html做网站静态效果，JavaScript动态效果
客户端：专门指的是浏览器

JavaScript的特点：
（1）交互性：信息的动态交互
（2）安全性：JavaScript不能访问本地磁盘的文件
（3）跨平台性：只有能够支持JavaScript的浏览器，都可以运行

JavaScript的组成：
（1）ECMAScript
-ECMA：欧洲计算机协会
（2）BOM
-broswer object model：浏览器对象模型
（3）DOM
-document object model：文档对象模型

二、JavaScript和html的结合方式(两种)

1.使用一个标签<script type="text/javascript"> js代码 </script>

<script type="text/javascript">
    alert("aaaa");
</script>

2.使用script标签，引入一个外部的js文件；创建一个js文件，写js代码

<script type="text/javascript" src="day02-1.js">    </script>

三、JavaScript的原始类型和声明变量

定义变量都使用关键字 var
JavaScript的原始类型(五个)
-string：字符串

var str = " abc";

-number：数字类型

var m = 123;

-boolean

var flag = true;

-null

var date = new Date();

获取对象的引用，null表示对象引用为空，所有对象的引用也是Object
-undifined
定义一个变量，没有赋值

var aa;

typeof( )；查看当前变量的数据类型

     var str = "abc";
     //alert(str);
     alert(typeof (str));  //String

四、JavaScript的语句

1.if语句

     var a = 5;
     if(a==5){
         alert("5");
     }
     else {
         alert("6");
     }        //5

2.switch语句

    var b = 6;
    switch (b) {
        case 3:
            alert("3");
            break;
        case 6:
            alert("6");
            break;
        default:
            alert("other"); 
    }

3.while循环

      var i = 5;
      while (i>1){
          alert(i);
          i--;
      }  // 5  4  3  2

4.for循环

        for(var mm = 0;mm<=5;mm++){
            alert(mm);
        }  // 0 1 2 3 4 5

五、JavaScript的运算符

1.在JavaScript里面不区分整数和小数
2.如果相加的时候做的是字符串连接；
如果相减的时候，执行减法运算。
3.提示NaN:表示不是一个数字
字符串的相减：

    var a = 123;
    alert(a-3);  //120

boolean类型也可以操作：
如果设置成true，相当于这个值是1；如果设置成false，相当于这个值是0.
4. == 和 === 的区别：
==：比较的只是值。
===：比较的是类型。
5.直接向页面输出的语句(可以把内容显示在页面上)
document.write("aaa");
document.write("<hr/ >");

六、JavaScript的数组

定义方式：
1.var arr = [1,2,3];
2.使用内置对象Array对象

var arr1 = new Array（5）；

3.使用内置对象Array对象

var arr2 = new Array（3,4,5）;//定义一个数组，数组里面的元素是3,4,5。

数组的属性：
length：获取数组的长度
数组可以存放不同数据类型的数据

七、JavaScript的函数

定义函数方法：
1.使用关键字function

function 方法名(参数列表){
方法体；
返回值(可以可无)
}

无返回值：

     function test1(a,b) {
         var c = a+b;
         alert(c);
     }
     test1(9,32)  //41

有返回值：

     function test2(a,b,c) {
         var d = a+b+c;
         return d;
     }
     alert(test2(9,8,6)); //23

2.匿名函数
var test = function(参数列表){
方法体和返回值；
}

   var test3  = function (a,v) {
         alert(a+v);
     }
     test3(3,5);  //8

3.动态函数

var test4 = new Function("参数列表","方法体和返回值")；

    var test4 = new Function("a,b","alert(a+b)");
    test4(6,4);//10

八、JavaScript的全局变量和局部变量

全局变量：在script标签里面定义一个变量，这个变量在页面中JavaScript部分都可以使用。
在方法外部使用，在方法内部使用，在另外一个script标签使用。
局部变量：在方法内部定义一个变量，只能在方法内部使用

九、Script标签的位置

建议把Script标签放在</body>后面

十、JavaScript的重载

=====================================================================================================================================================================================================================

一、JavaScript的String对象

1.创建String对象
var str = "abc";
2.方法和属性
属性 length：字符串的长度

   var str = "abcdef";
    document.write(str.length);//6

方法：
-bold() :加粗
-fontcolor():设置字符串颜色
-fontsize()：设置字体的大小
-link()：将字符串显示成超链接
sub() sup()：下标和上标

-concat()：连接字符串

    var s3 = "asd";
    var s4 = "231";
    document.write("<hr/>");
    document.write(s3.concat(s4));  //asd231

-charAt():返回指定位置的字符串

    var s5 = "awoidjao1321";
    document.write(s5.charAt(4));  //d     字符位置不存在，返回空字符串

-indexOf():返回字符串位置

    var s6 = "amiaowenjie";
    document.write(s6.indexOf("e")); //6   字符不存在，返回-1

-split()：把字符串切分成数组

    var s7 = "a0n0m0nn0h";
    var arr = s7.split("0");
    document.write(arr.length);//5

-replace()：替换字符串；传递两个参数：原始字符和要替换成的字符

    var s8 = "miaowen";
    document.write(s8.replace("o","23")); //mia23wen

-substr()和-substring()

    var s9 = "function";
    document.write(s9.substr(2,4));//ncti  从第五位开始，向后截取五个字符
    document.write("<br/>")
    document.write(s9.substring(2,4));//nc   从第几位开始到第几位结束  [3,5）

二、JavaScript的Array对象

属性：length：查看数组的长度

方法：
-concat()：数组的连接

    var arr1 = [1,2,3];
    var arr2 = [5,7,8];
    document.write(arr1.concat(arr2)); //1,2,3,5,7,8

-join()：根据指定的字符分割数组

    var arr3 = new Array(3);
    arr3[0] = "a";
    arr3[1] = "b";
    arr3[2] = "c";
    document.write(arr3.join("*")); //a*b*c

-push()：向数组末尾添加元素，返回数组新的长度
如果添加的是一个数组，这个时候把一个数组当做一个整体字符串加进去

    var arr4 = new Array(3);
    arr4[0] = "maio";
    arr4[1] = "wen";
    arr4[2] = "jie";
    document.write(arr4);
    document.write("<hr/>");
    document.write(arr4.push("abcd123")); //4

-pop()：删除最后一个元素，返回删除的那个元素

    var arr = ["zhangsan","lisi","wanghwu","zhaoliu"];
    document.write(arr.pop()); //zhaoliu
    document.write("<hr/>");
    document.write(arr);//zhangsan,lisi,wanghwu

-revese()：颠倒数组中的元素顺序

    var arr = ["zhangsan","lisi","wanghwu","zhaoliu","liuqi"];
    document.write(arr);//zhangsan,lisi,wanghwu,zhaoliu,liuqi
    document.write("<hr/>");
    document.write(arr.reverse());//liuqi,zhaoliu,wanghwu,lisi,zhangsan

三、JavaScript的Date对象

获取当前时间：
var date = new Date();

    var date = new Date();
    document.write(date);//Tue Apr 02 2019 17:09:40 GMT+0800 (中国标准时间)
    document.write("<hr/>");
    document.write(date.toLocaleString());//2019/4/2 下午5:12:16

getFullYear()：获取当前年的方法：

 var date = new Date();
 document.write(date.getFullYear());//2019

getMonth()：获取当前月的方法：

    var date1 = date.getMonth()+1;//只能获取0~11的月份，所以要+1
    document.write(date1);  //4

getDay()：获取当前的星期的方法：

    var date = new Date();
    document.write(date.getDay());  // 2   返回值是0~6，所以为0时是星期日

getgetDate()：获取当前的日：

    var date = new Date();
    document.write(date.getDate());  //2

getHours()：获取当前的小时：

    var date = new Date();
    document.write(date.getHours());   //17

getMinutes()：获取当前的分钟：

    var date = new Date();
    document.write(date.getMinutes());  //52

getSeconds()：获取当前的秒：

    var date = new Date();
    document.write(date.getSeconds());   /13

getTime()：获取毫秒数：
应用场景：使用毫秒数处理缓存的结果(不有缓存)

    var date = new Date();
    document.write(date.getTime());  //1554199046428

四、JavaScript的Math对象

里面都是静态的方法，使用可以直接使用Math.方法();
ceil(x)：向上舍入
floor(x)：向下舍入
round(x)：四舍五入
random()：得到随机数 0~1之间的随机数

   document.write(Math.floor(Math.random()*10)); //将随机数乘以10然后向下舍入可得到0~9的随机数

其他方法：

image.png

五、JavaScript的全局函数

由于不属于任何一个对象，直接写名称使用
eval( )：执行JavaScript代码(如果字符串是一个JavaScript代码，使用方法直接执行)

      var str = "alert('abc')";
      eval(str);   //abc

encodeURI()：对字符进行编码 //%E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87123
decodeURI()：对字符进行解码 //测试中文123
isNaN()：判断当前字符串是否是数字
如果是数字返回false；如果不是数字返回true

      var m = "124";
      alert(isNaN(m));  //false

parseInt()：类型转换

      var m1 = "123";
      document.write(parseInt(m1)+1);   //124

六、JavaScript的函数的重载

JavaScript不存在重载，但是可以通过其他方式模拟重载（面试题目）
调用最后一个方法；
把传递的参数保存到arguments数组里面；

七、JavaScript的BOM对象

BOM：浏览器对象模型(BrowserObjectModel)
BOM中的对象：
1.navigator：获取客户机的信息（浏览器的信息）
-navigator.appName

     document.write(navigator.appName);  //Netscape

2.screen：获取屏幕信息

3.location：请求url地址
-href：获取请求的url地址；设置url地址。

4.history：请求url的历史记录
history.back(); 到访问的上一个页面
history.forward()；到访问的下一个页面

5.window

窗口对象；
顶层对象（所有的bom对象都是在window里面操作的）
方法：
-alert：页面弹出一个框，显示内容
-confirm()：确认框

confirm("删除内容");

-prompt():输入的对话框

     prompt("please input :","0");    //prompt("输入框显示的内容","输入框里面的默认值");

-open():打开一个新的窗口
open("打开新窗口的地址url"," ","窗口特征：比如宽度和高度");

   window.open("day02-1.html"," ",'width=200,height=200');

-close():关闭窗口（浏览器兼容性差）

做定时器：

setInterval("JavaScript代码",毫秒数) 1秒=1000毫秒

    window.setInterval("alert('123')",3000);  //每3秒执行一次alert

setTimeout("JavaScript代码",毫秒数) ：在毫秒数之后执行，只会执行一次

   window.setTimeout("alert('miao')",3000);//4秒只会执行alert，只会执行一次

clearInterval()：清除setInsetInterval设置的定时器
clearTimeout()：清除setTimeout设置的定时器

清除演示
<body>
   <input type="button" value="interval" onclick="clear1();"/>
   <br/>
   <input type="button" value="timeout" onclick="clear2();"/>
  <script type="text/javascript">
      var id1 = setInterval("alert('WEN')",4000);
      var id2 = setTimeout("alert('miao')",3000);

      function clear1() {
          clearInterval(id1);
      }
      function clear2() {
          clearTimeout(id2);
      }
  </script>
</body>

八、JavaScript的dom对象

文档对象模型（Document Object Model）
文档：超文本文档（超文本标记文档）html、xml
对象：提供了属性和方法
模型：使用属性和方法来操作超文本标记型文档
可以使用JavaScript里面的dom提供的对象，使用这些对象的属性和方法，对标记型文档进行操作；
想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象

DHTML：是很多技术的简称
html：封装数据
css：使用属性和属性值设置样式
dom：操作html文档
JavaScript：专门指的是JavaScript的语法语句

九、document对象

表示整个的文档
常用方法：
write()方法：
（1）向页面输出变量（值）
（2）向页面输出html代码

              document.write("abc");
              document.write("<hr/>");

getElementById():通过id得到元素（标签）

<body>
   <input type="text" value="mmm" name="nameid" id="a"/>
          <script type="text/javascript">
        var v = document.getElementById("a");  //传递的参数是标签里面的ID的值
        alert(v.value);  //mmm     标签对象.属性名称
  </script>
</body>

getElementsByName()：通过标签的name属性值得到标签，返回的是一个集合（数组）

<body>
   <input type="text" value="mmm" name="name1"/><br/>
   <input type="text" value="qqqq" name="name1"/><br/>
   <input type="text" value="kkk" name="name1"/><br/>
   <input type="text" value="zzzz" name="name1"/><br/>
          <script type="text/javascript">
              var v = document.getElementsByName("name1");  //传递的值是标签里面name的值
              for(var i = 0;i<v.length;i++){  //通过遍历数组，得到每个标签里面具体的值
                  var v1 = v[i];   //每次循环得到v对象，赋值到v1里面
                  alert(v1.value);  //得到每个input标签里面的value值
              }
  </script>
</body>

getElementsByTagName()：通过标签名称得到元素

<body>
   <input type="text" value="mmm" name="name1"/><br/>
   <input type="text" value="OOOO" name="name1"/><br/>
   <input type="text" value="kkk" name="name1"/><br/>
   <input type="text" value="zzzz" name="name1"/><br/>
   <script type="text/javascript">
       var v = document.getElementsByTagName("input");  //传递的参数是标签名称
       for(var i = 0;i<v.length;i++){
           var v1 = v[i];
           alert(v1.value);
       }
   </script>
</body>

如果只有一个标签，不需要遍历，可以直接通过数组的下标获取到值

<body>
<input type="text" value="mmm" name="name1"/><br/>
<script type="text/javascript">
    var v = document.getElementsByTagName("input")[0];  //通过数组下标获取值
    alert(v.value);
</script>
</body>

十、案例：window弹窗案例

widnow页面

<body>
    编号：<input type="text" id="numid"/><br/>
    姓名：<input type="text" id="nameid"/><br/>
    <input type="button" value="选择" onclick="open1()"/>

<script type="text/javascript">
     function open1() {
         window.open("user.html","","width=250,height=150");
     }
</script>
</body>

弹窗页面

<body>
<table border="1" bordercolor="blue" >
    <tr>
          <td>操作</td>
          <td>编号</td>
          <td>姓名</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s1('100','猴子');"/></td>
        <td>100</td>
        <td>猴子</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s1('101','老鼠');"/></td>
        <td>101</td>
        <td>老鼠</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s1('102','蛇');"/></td>
        <td>102</td>
        <td>蛇</td>
    </tr>
</table>
<script type="text/javascript">
    //需要把num1和name1赋值到window窗口
    //跨页面操作  opener ：得到创建这个窗口的窗口  得到window页面
     function s1(num1,name1) {
         var pwin = window.opener;  //得到window页面
         pwin.document.getElementById("numid").value = num1;
         pwin.document.getElementById("nameid").value = name1;
         window.close(); //关闭窗口
     }
</script>
</body>

opener:属性；获取创建当前窗口的窗口

案例一：在末尾添加节点

第一步：获取ul标签
第二步：创建li标签

document.createElement("标签名称")

第三步：创建文本

document.createTextNode("文本内容")

第四步：把文本添加到li下面，使用appendChild( )方法
第五步：把li添加到ul末尾，使用appendChild( )方法

<body>
    <ul id="ulid">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <input type="button" value="add" onclick="add1();">
    
   <script type="text/javascript">
         function add1() {
             var ul1 = document.getElementById("ulid");  //获取到ul标签
             var li1 = document.createElement("li");   //创建标签
             var tex1 = document.createTextNode("5555");  //创建文本
             li1.appendChild(tex1);//把文本添加到li下面
             ul1.appendChild(li1);//把li添加到ul末尾
         }
   </script>
</body>

案例二：动态显示时间

    <script type="text/javascript">
        function getD1() {
            var date = new Date();//得到当前时间
            var d1 = date.toLocaleString();//得到当前时间
            var div1 = document.getElementById("times");//获取div
            div1.innerHTML = d1;//获取div
        }
        setInterval("getD1()", 1000);//使用定时器实现每秒写一次时间
    </script>

案例三：全选练习

使用复选框上面一个属性判断是否选中：
checked=true 选中； checked=false 没选中

        <body>
       <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
       <br/>
       <input type="checkbox" name="love" />篮球<br/>
       <input type="checkbox" name="love"/>排球<br/>
       <input type="checkbox" name="love"/>羽毛球<br/>
       <input type="checkbox" name="love"/>乒乓球<br/>
       <input type="button" value="全选" onclick="selAll();"/>
       <input type="button" value="全不选" onclick="selNo();"/>
       <input type="button" value="反选" onclick="selOther();"/>
    <script type="text/javascript">
        function selAllNo() {
            var box1 = document.getElementById("boxid");
            if(box1.checked == true){
                selAll();
            }
            else {
                selNo();
            }
        }
        function selOther() {
            var loves = document.getElementsByName("love");//获取要操作的复选框
            for (var i = 0;i<loves.length;i++) {//遍历数组
                var love1 = loves[i];//得到每一个复选框
                if(love1.checked == true){  //判断当前复选框是什么状态
                    love1.checked = false;
                }
                else {
                    love1.checked = true;
                }
            }
        }
        function selAll() {
            var loves = document.getElementsByName("love");//获取要操作的复选框
            for(var i =0;i<loves.length;i++){//遍历数组
                var love1 = loves[i];//得到每一个复选框
                love1.checked = true;
            }
        }
        function selNo() {
            var loves = document.getElementsByName("love");
            for(var i = 0;i<loves.length;i++){
                var love1 = loves[i];
                love1.checked = false;
            }
        }
    </script>
        </body>

案例四：动态生成表格

/*
1.得到输入的行和列的值。
2.生成表格：循环行；在行里面循环单元格。
3.显示到页面上：把表格的代码设置到div里面，使用innerHTML属性。
*/
<body>
     行：<input type="text" id="h"/>
     列：<input type="text" id="l"/><br/>
     <input type="button" value="生成" onclick="add2();"/>
     <div id="divv">

     </div>
  <script type="text/javascript">
          function add2(){
              var h = document.getElementById("h").value;
              var l = document.getElementById("l").value;
              var tab = "<table border='1' bordercolor='blue'>";
              for(var i =1;i<=h;i++){
                  tab += "<tr>";
                  for(var j =1;j<=l;j++){
                      tab += "<td>aaaaaa</td>"
                  }
                  tab += "</tr>";
              }
              tab += "</table>";
              var divv = document.getElementById("divv");
              divv.innerHTML = tab;
          }
  </script>
</body>

二、元素对象（element对象）

1.要操作element对象，首先必须要获取到element，使用document里面相应方法获取

方法：getAttribute():获取属性里面的值

                  alert(input1.getAttribute("value"));

setAttribute():设置属性的值

                  input1.setAttribute("class","haha");  //("属性","值")

removeAttribute()：删除属性的值

                  input1.removeAttribute("name");  //不能删除value

getElementsByTagName()：获取标签下面的字标签

var lis = ul11.getElementsByTagName("li");

三、Node对象属性

（1）

nodeName
nodeType
nodeValue
使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象
标签节点对应的值：
nodeType：1
nodeName：大写标签名称比如SPAN
nodeValue：null
属性节点对应的值：
nodeType：2
nodeName：属性名称
nodeValue：属性的值
文本节点对应的值：
nodeType：3
nodeName：#text
nodeValue：文本内容

        <body>
        <span id="spanid">哈哈呵呵</span>
    <script type="text/javascript">
        var span1 = document.getElementById("spanid");
        alert(span1.nodeType);  //1
        alert(span1.nodeName);  //SPAN
        alert(span1.nodeValue); //null
        var id1 = span1.getAttributeNode("id");
        alert(id1.nodeType);  //2
        alert(id1.nodeName);  //id
        alert(id1.nodeValue); //spanid
        var text1 = span1.firstChild;
        alert(text1.nodeType);  //3
        alert(text1.nodeName);  //#text
        alert(text1.nodeValue); //内容
    </script>
        </body>

（2）

        <ul>
            <li>qqq</li>
            <li>www</li>
        </ul>

父节点：
ul是li的父节点
parentNode:

        <body>
        <ul id="ulid">
            <li id="li1">qqq</li>
            <li id="li2">www</li>
            <li id="li3">yyy</li>
            <li id="li4">test111</li>
        </ul>
    <script type="text/javascript">
        var li1 = document.getElementById("li1");
        var ul1 = li1.parentNode;
        alert(ul1.id);
    </script>
        </body>

子节点：
li是ul的父节点
childNodes：得到所有子节点，但是兼容性很差
firstChild：获取第一个子节点

        var ul1 = document.getElementById("ulid");
        var li1 = ul1.firstChild;
        alert(li1.id);

lastChild：获取最后一个子节点

        var ul1 = document.getElementById("ulid");
        var li4 = ul1.lastChild;
        alert(li4.id);

同辈节点：
li之间关系是同辈节点
nextSibling:返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。

        var li3 = document.getElementById("li3");
        alert(li3.nextSibling.id);
        alert(li3.previousSibling.id);

四、操作dom树

appendChild()；添加子节点到末尾，

类似于剪切，粘贴的效果

<head>
    <meta charset="UTF-8">
    <title>Title1</title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 150px;
            border: 2px solid red;
        }
        #div2 {
            width: 250px;
            height: 150px;
            border: 5px dashed green;
        }

    </style>
</head>
        <body>
        <div id="div1">
           <ul id="ulid11">
               <li>tom</li>
               <li>mary</li>
               <li>jack</li>
           </ul>
        </div>
        <div id="div2"></div>
          <input type="button" value="add1" onclick="add11();"/>
    <script type="text/javascript">
         function add11() {
             var div2 = document.getElementById("div2");//得到div2
             var ul11 = document.getElementById("ulid11");//获取ul
             div2.appendChild(ul11);//把ul添加到div2里面
         }
    </script>

        </body>

insertBefore(newNode,oldNode)：

在某个节点之前插入一个新的节点

        <body>
        <ul id="ulid21">
            <li id="li11">老鼠</li>
            <li id="li12">猫</li>
            <li id="li13">兔子</li>
            <li id="li14">大象</li>
        </ul>
        <input type="button" value="insert" onclick="insert1();"/>

    <script type="text/javascript">
        function insert1() {
            var li13 = document.getElementById("li13");//获取li13标签
            var li15 = document.createElement("li");//创建li
            var text15 = document.createTextNode("熊猫");//创建文本
            li15.appendChild(text15);//把文本添加到li下面
            var ul21 = document.getElementById("ulid21");//获取到ul
            ul21.insertBefore(li15,li13);//在<li>兔子</li>之前添加<li>熊猫</li>
        }
    </script>
        </body>

newNode：要插入的节点
oldNode：在谁之前插入

插入一个节点，节点不存在，需要创建

1.创建标签
2.创建文本
3.把文本添加到标签下面

removeChild(): 删除节点

通过父节点删除，不能自己删自己

        <body>
        <ul id="ulid31">
            <li id="li21">老鼠</li>
            <li id="li22">猫</li>
            <li id="li23">兔子</li>
            <li id="li24">大象</li>
        </ul>
        <input type="button" value="remove" onclick="remove1();"/>
    <script type="text/javascript">
          function remove1() {
              var li24 = document.getElementById("li24"); //获取li标签
              var ulid31 = document.getElementById("ulid31");//获取父节点
              ulid31.removeChild(li24);//删除
          }
    </script>
        </body>

replaceChild(newNode,oldNode):替换节点

newNode:替换成的节点
oldNode：被替换的节点
不能自己替换自己，通过父节点替换

        <body>
        <ul id="ulid31">
            <li id="li21">老鼠</li>
            <li id="li22">猫</li>
            <li id="li23">兔子</li>
            <li id="li24">大象</li>
        </ul>
        <input type="button" value="replace" onclick="replace1();"/>
    <script type="text/javascript">
         function replace1() {
             var li24 = document.getElementById("li24");//获取li
             var li25 = document.createElement("li");//创建li标签
             var text1 = document.createTextNode("小狗");//创建文本
             li25.appendChild(text1);//将文本添加到li
             var ulid31 = document.getElementById("ulid31");//获取父节点
             ulid31.replaceChild(li25,li24);//通过父节点替换
         }
    </script>
        </body>

cloneNode(boolean):复制节点

        <body>
        <ul id="ulid31">
            <li id="li21">老鼠</li>
            <li id="li22">猫</li>
            <li id="li23">兔子</li>
            <li id="li24">大象</li>
        </ul>
        <div id="divv">

        </div>
        <input type="button" value="copy" onclick="copy();"/>

        <script type="text/javascript">
            function copy() {
        var ulid31 = document.getElementById("ulid31");//获取ul
        var ulcopy = ulid31.cloneNode(true);//复制ul，放到剪切板里面
        var divv = document.getElementById("divv");//获取div
        divv.appendChild(ulcopy);//把副本放到div里面去
        }
    </script>
        </body>

五、innerHTML属性

1.获取文本内容

        var span1 = document.getElementById("sid");
        alert(span1.innerHTML);

2.向标签里面设置内容（可以是html代码）

        var div11 = document.getElementById("div11");
        div11.innerHTML = "<h1>AAAAA</h1>";

向div里面添加一个表格：

 div11.innerHTML = "<h1>AAAAA</h1>";
        var tab = "<table border='1'><tr><td>aaaa</td></tr><tr><td>bbbb</td></tr>
        <tr><td>cccc</td></tr></table>";