javaWeb学习笔记 --- JavaScript

JavaScript

JavaScript概述

JavaScript是干什么的?

  1. HTML 定义了网页的内容

  2. CSS 描述了网页的布局

  3. JavaScript 指定了网页的行为

js特点

  1. JavaScript 是脚本语言,不需要编译,是解释运行的语言。
  2. JavaScript 是可插入 HTML 页面的编程代码,可由所有的现代浏览器执行。
  3. JavaScript 是基于对象,弱类型的语言。
  4. JavaScript 很容易学习。

js优点

  1. 交互性:可以与用户进行动态交互。
  2. 安全性:只能在浏览器内运行,不能访问本地硬盘或其他资源。
  3. 跨平台:有浏览器即可运行,与操作环境无关。

在html中引入js代码

  1. 直接在html中书写js代码:在html中可以在script标签内部直接书写js代码,通常写在head中!
  2. 引入外部的js文件
    • 如果js代码特别多的情况下,可以将js代码抽取到一个独立的文件中,在html中通过script标签引入该js文件
    • 注意: script标签如果是用来引入外部的js文件,标签内部不要再书写js代码,并且标签不要自闭,否则可能会导致引入失败
<head>
    <title>title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    
    <script type="text/javascript">
        // 定义一个函数fn1,并弹出提示框
        function fn1() {
            alert("为什么要点我");
        }
    script>

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

head>

JavaScript语法

  1. 注释

    • 单行注释: // 注释内容
    • 多行注释: /* 注释内容 */
  2. 数据类型

    • 基本数据类型:数值类型(number)、字符串类型(string)、布尔类型(boolean)、undefined类型、null类型

    • 数值类型

      • 在js中, 所有的数值底层都是浮点型, 在需要时,整型和浮点型会自动的进行类型的转换。例如:2.4+3.6=6
      • Infinity 正无穷大 -Infinity 负无穷大
      • NaN (not a number) 非数字 :NaN和任何数值都不相等, 包括它本身;如果要判断一个值是否是非数字,不能用 NaN == xx 来判断, 而是应该使用isNaN(xx) 进行判断。
      • 在js中, 为number类型提供了对应的包装对象 – Number
    • 字符串类型

      • 在js中,字符串类型是基本数据类型的一种,字符串常量,可以用单引号或者双引号引起来

        例如:var s1 = "aaa"; var s2 = 'bbb';

      • 在js中,为string类型提供了对应的包装对象 – String

    • 布尔类型

      • boolean,值为true或false

      • 在js中,为boolean类型提供了对应的包装对象 – Boolean

    • undefined

      • undefined类型的值只有一个,就是undefined表示变量未定义。如果声明了一个变量,但是没有初始化值,该变量的值就是undefined
        例如:var a; 则a的值即为undefined。
    • null

      • null类型的值也只有一个,就是null,表示此处的值现在为空。常用来作为函数的返回值, 表示该返回值是一个没有任何内容的空对象
    • 复杂数据类型

      • 复杂数据类型: 对象 (普通对象 数组 函数)

js中的数据类型的转换

js中的数据类型在需要时会自动的进行类型转换,转换时遵循如下规则:

  1. 数值类型:

    • 转字符串类型, 直接转成对应值的字符串,3 --> "3"

    • 转布尔类型,0NaN转成false,其他数值转成true

    • 在需要时,会自动转成对应的包装对象,100 --> new Number(100)

  2. 字符串:

    • 空字符串(""): 转数值为0, 转布尔值为false

    • 非空纯数值字符串("123"): 转数值为对应的数值, 转布尔值为true

    • 非空非数值字符串("abc"): 转数值为NaN, 转布尔值为true

    • 在需要时,会自动转成对应的包装对象,"aaa" --> new String("aaa")

  3. 布尔类型:

    • true: 转数值为 1,转字符串为"true"

    • false: 转数值为 0,转字符串为"false"

    • 在需要时,会自动转成对应的包装对象.

  4. undefined

    • 转数值为NaN, 转字符串为"undefined", 转布尔值为false转对象会抛出异常!
  5. null

    • 转数值为 0,转字符串为"null",转布尔值为false转对象会抛出异常!

<script type="text/javascript">
    //1.数值类型
    //1.1.弹出数字6与字符串"66"的和
    alert(6+"66");

    //1.2.对数字进行判断,若为0或NaN(false),则弹出"世界如此美好!" 若为其他数字,则弹出"我却如此暴躁!"(true)
    if (0){
        alert("我却如此暴躁!")
    }
    else{
        alert("世界如此美好!")
    }

    //2.字符串
    //2.1.弹出字符串"1000"与数字334的差
    alert("1000" - 334)  // 666
    //2.2.字符串判断,若为空字符串(""),弹出"师傅,大师兄说的对!",若为非空字符串,弹出"大师兄,师傅被妖怪抓走了!"
    if(""){
        alert("大师兄,师傅被妖怪抓走了!")
    }
    else{
        alert("师傅,大师兄说的对!")
    }

    //3.布尔类型
    /* 已知:var a = [3>2>1, 1<2<3] 则a[0]和a[1]的值分别是什么?*/

    var a = [3>2>1, 1<2<3]
    alert(a[0])  // false 3>2 true true > 1 --- > 1> 1 false
    alert(a[1])  // true  1<2 true true < 3 --- > 1 <3 true
script>

变量的定义

  • 在js中有数据类型,但是变量不区分类型,所以称js是一门弱类型的语言。
  • 在js中通过var关键字声明变量,变量不区分类型,可以指向任意类型的值!
  • 例如:var s1 = "aaa"; var i = 100;

运算符

  • jS中的运算符和java中的运算符大致相同
  • JS中与java运算符不同之处:
  • 比较运算符除了==,还有===
    • == 在进行比较时, 如果两端的值不是同一种数据类型, 先自动转成同一种数据类型,再进行比较, 如果转换之后再比较,相等则返回true,不相等则返回false;
    • ===为严格相等,在进行比较时, 如果两端的值不是同一种数据类型,直接返回false;如果是同一种类型再次比较值是否相等,是则返回true,不是则返回false
  • typeof: 用来返回变量/常量/表达式的数据类型
    格式:var x = 123; typeof x
  • delete: 用来删除数组中的元素或者删除对象中的属性或方法

<script type="text/javascript">
    //1.分别用"=="和"==="判断数字666和字符串"666"是否相等
    alert(66 == "66")  // true
    alert(66 === "66")  // false

    //2.分别对x进行不同的赋值,利用typeof查看x的数据类型
    var x = 12.3
    alert(typeof x)  // number
    x = "12.3"
    alert(typeof x)  // string
    x = true
    alert(typeof x)  // boolean
    //3.问题:判断typeof 6+"66" 的值是什么?
    alert(typeof 6 + "66")  // number66
    alert(typeof (6 + "66"))  // string

    //4.删除下面数组中的第二个元素
    var arr = [111,"abc",true];
    alert(arr)  // 111,abc,true
    delete arr[1]
    alert(arr[1])  // undefined
script>

语句

  • js中的语句和java中的语句也大致相同
  1. if条件语句:如果判断条件不是布尔类型,会自动转换成布尔值

  2. switch语句:语法和Java中大致相同,并且也支持字符串类型

  3. 循环语句

    • while(){}

    • do{}while()

    • for(){}

    语法和Java中的很相似,但是js中不支持增强for循环

函数

  1. 通过function关键字来定义一个函数

    function 函数名(形参列表){
    	// 函数体
    }
    

    调用函数: 函数名(实参列表)

  2. 通过函数表达式来定义一个函数

    var fn = function (形参列表){
    	// 函数体
    }
    

    调用函数: 函数名(实参列表)

<script type="text/javascript">
    // 分别用两种方式定义一个方法,将姓名与年龄作为参数传入,调用方法时弹出姓名与年龄
    //方式一
    function fn1(name, age){
    return name + ":" + age;
}

var c = fn1("lili",20);
alert(c);
//方式二
var fn2 = function(name, age){
    alert(name + ":" + age);
}
fn2("Sam",18);
</script>

数组

  1. 通过Array()构造函数来创建数组

    var arr1 = new Array();  //创建一个空数组
    var arr2 = new Array(10);  //创建一个长度为10的空数组
    var arr3 = new Array("aa", 55, true);  //创建一个具有指定初始值的数组
    
  2. 通过数组直接量来创建数组

    var arr4 = [];    //创建一个空数组
    var arr5 = ["x", 100, false]; //创建一个具有指定初始值的数组
    
  3. 数组中的细节问题:

    • 数组的长度可以被任意改变
    var arr =["aa", "bb", "cc"];   
    arr.length=1;    //["aa"]
    
    • 如果数组中某一个位置没有元素, 该位置的值为undefined
    var arr =["aa", "bb", "cc"];   
    arr[10];    //undefined
    
    • js中的数组可以存放任意类型的数据
    var arr = ["x", 100, false];
    

js中的对象

内置对象

String对象

  • 创建:

    var str1 = new String("xxx");  //创建字符串对象
    var str2 = "xxx"; 
    
  • 常用属性和方法:

    • str.length:返回字符串长度。

    • str.charAt(index): 返回指定索引位置处的字符。

      var str = "abcdeabc";    
      str.charAt(3);  // d
      
    • str.indexOf(subString, startIndex) :从下标startIndex开始,返回第一次出现子字符串的位置。

      var str = "abcdeabc";   
      str.indexOf("bc",2);  // 6
      
    • str.lastIndexOf(substring, startindex): 从startindex开始,从后向前返回最后出现子字符串的位置。

      var str = "abcdeabc"; str.lastIndexOf("bc",7);  // 6
      
    • str.split(delimiter): 将字符串按照指定字符分割为字符串数组。

      var str = "a:b:c:d";  
      str.split(":");  //返回为一个数组[a,b,c,d]
      
    • str.slice(start, end): 提取字符串的某个部分,含头不含尾。

      var str = "abcdeabc";  
      str.slice(2,4);  // cd 
      
    • str.substr(start, length) : 返回从指定位置开始的指定长度的子字符串。

      var str = "abcdeabc";   
      str.substr(2,4);  //cdea
      
    • str.toLowerCase( ):字符串中的字母转换为小写。

      var str = "ABCDE";    
      str.toLowerCase();  //abcde
      
    • str.toUpperCase( ): 字符串中的字母转化为大写。

      var str = "abcde";   
      str.toUpperCase();  //ABCDE
      
    • str.match(regexp): 在字符串中查找指定匹配正则表达式的值。

    • str.replace(regexp, replaceText): 字符串中匹配正则的值替换为其他值。

    • str.search(regexp): 查找与正则表达式匹配的第一个子字符串的位置。

RegExp 对象(正则表达式)

  • 创建:

    var reg1 = new RegExp("", "");  
    var reg2 = /xxx/;
    
  • 标识符: g --- > Global 全局查找 i --- > IgnoreCase 忽略大小写

  • 如果正则需要从头到尾都匹配,需要以"^"开头,以"$"结尾

  • reg.test(str): 检查字符串是否符合该正则, 如果符合返回true,不符合返回false

<script type="text/javascript">
    //一、字符串String
    //1.将字符串中所有的"java"提取到一个数组中
    var str = "zhang,java,wang,JAVA,li,java,zhao";
    var reg1 = /java/;
    // g表示全局匹配
    var reg2 = /java/g;
    // match返回根据正则匹配的值
    alert(str.match(reg1));  // java
    alert(str.match(reg2));  // java, java


    //2.将字符串中所有的"java"不分大小写提取到一个数组中
    // i表示不区分大小写
    var reg3 = /java/ig;
    alert(str.match(reg3));  // java,JAVA,java

    //3.将所有的"java"不分大小写,全部换成"C++"
    // str.replace(regexp, replaceText)
    var str2 = str.replace(reg3,"c++")
    alert(str2)  // zhang,c++,wang,c++,li,c++,zhao

    //4.查找第一个"java"出现的位置(不分大小写)
    // str.search(regexp): 查找与正则表达式匹配的第一个子字符串的位置。
    var index = str.search(reg3)
    // alert(index)  // 6

    //5.检查str字符串是否符合如下正则
    var reg3 = /wang/;
    var reg4 = /^wang$/;
    // alert(reg3.test(str));  // true
    // alert(reg4.test(str));  // false
    var reg5 = /^[a-z]{5},.*/
    // alert(reg5.test(str));  // true		
script>

Array对象

  • 创建:
var arr1 = new Array();
var arr2 = [];
  • 常用属性和方法:

    • arr.length: 返回数组中元素的个数
    var arr = ["a","b","c"];   
    arr.length;  // 3
    
    • arr.concat(arr1,arr2,arr3...): 将多个数组合并成一个
    var arr1 = ["a","b","c"];   
    var arr2 = ["d","e","f"];   
    var arr3 = ["x","y","z"];  
    arr1.concat(arr2,arr3);   //["a","b","c","d","e","f","x","y","z"]
    
    • arr.join(string): 将数组中所有元素按照指定字符串连接成一个字符串
    var arr = ["aaa",123,true];   
     arr.join("-");   // aaa-123-true
    
    • arr.reverse(): 返回一个元素顺序被反转的 Array 对象。
    var arr = ["a","b","c"];   
    arr.reverse();  //["c","b","a"]
    
    • arr.slice(start, end): 返回一个数组的一段,含头不含尾。
    var arr = ["a","b","c",1,2,3];   
    arr.slice(2,4);  // ["c",1]
    
    • arr.splice(start, deleteCount,value...):
      从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。
    var arr = ["a","b","c","d","e","f"];     
    arr.splice(2,2,"zzz");  // 返回值为["c","d"],arr则变为["a","b","zzz","e","f"]
    
    • arr.pop(): 移除数组中的最后一个元素并返回该元素
    var arr = ["aaa",123,"x",true,8];    
    arr.pop();  // 返回值为 8,arr则变为["aaa",123,"x",true]
    
    • arr.push(value): 在数组的末尾加上一个或多个元素,并返回新数组的长度值
    var arr = ["aaa",123,"x",true,8];   
    arr.push("last")  // //返回值为6,arr则变为 ["aaa",123,"x",true,8,"last"]
    
    • arr.shift(): 移除数组中的第一个元素并返回该元素
    var arr = ["aaa",123,"x",true,8];    
    arr.shift();  // //返回值为 "aaa" ,arr则变为[123,"x",true,8]
    
    • arr.unshift(value): 为数组的开始部分加上一个或多个元素,并且返回该数组的新长度
    var arr = ["aaa",123,"x",true,8];    
    arr.unshift("first");  //返回值为6,arr则变为["first","aaa",123,"x",true,8]
    
    • arr.sort(sortfunction): 返回排序后的数组。
    var arr = ["aaa",123,"x",true,8];
    alert(arr.sort().reverse());   // 倒序 x,true,aaa,8,123
    

date对象

  • 创建:

    var date1 = new Date();    // 当前时间
    var date2 = new Date(,,[,,,]);  //指定时间,可以只有年月日
    

    注意:当创建指定时间的时候,月是从0开始,例如:var date2 = new Date(2008,7,8,20,0,0); 这个时间是2008年8月8日晚上8点整

  • 常用方法:

    • data.toLocaleString(): 把日期(一个数值)转变成本地日期格式字符串

    • data.getFullYear(): 获取日期对象中所表示时间的年份

    • data.getMonth(): 获取日期对象中所表示时间的月份,返回一个 0 到 11 之间的整数,0表示一月

    • data.getDate(): 获取日期对象中所表示一个月的日期值,返回值是一个处于 1 到 31 之间的整数,代表了相应的日期值。

    • data.getDay(): 获取日期对象中所表示一个周的日期值。 返回的值是一个处于 0 到 6 之间的整数,0表示周日,6表示周六。

      var date = new Date(2008,7,8);   
      date.getDay();  // 5,表示周五
      
    • data.getTime(): 返回从 1970 年 1 月 1 日至指定时间的毫秒数。

      var date = new Date(2008,7,8);  
      date.getTime();  //1218124800000
      

Math对象

  • 常用属性和方法:

    • Math.PI: 返回圆周率的值
    • Math.exp(number): 返回 e(自然对数的底)的幂。
    • Math.abs(number): 返回数字的绝对值。
    • Math.ceil(number): 向上取整
    • Math.floor(number): 向下取整
    • Math.round(number): 四舍五入到整数
    • Math.random(): 返回介于 0 和 1 之间的伪随机数。
     //1.返回一个1-100之间的随机整数
     var num = Math.ceil(Math.random()*100);
    //2.返回一个30-50直接的随机数
    var num = Math.round(Math.random()*20 + 30);
    

全局对象

  • 全局对象没有语法。直接调用其方法。

    • parseFloat(numString): 将字符串转换成浮点数。

      parseFloat("13.14");  // 返回number类型的13.14
      
    • parseInt(numString): 将字符串转成整数,非四舍五入。

      parseInt("9.99")  // 返回number类型的9
      
    • isNaN(numValue): 判断一个值是否为非数字。

      isNaN("abc")  // true 
      isNaN("123")  // false
      
    • eval(codeString): 判断一个字符串并将其以脚本代码的形式执行 (字符串以代码的形式执行)

      eval("alert(1+2)");  //会直接将"alert(1+2)"当作代码执行,弹出3
      

自定义对象

  • 方式一:构造函数定义对象

    function Person(){}  // 定义一个空的Person对象
    
    function Person2(参数1,参数2...){
        对象内容...
    }  //定义一个带参数的对象
    
  • 方式二:对象直接量(*)— json格式

    var p3 = {
            "key1" : "value1",
            "key2" : "value2".........
        }
    
  • 对象中取值:

    P3.key1 或者 p3["key1"]

    var p2 = {
        "name" : "lili",
        "age" : 25,
        "gender" : "女",
        "boyfrided": {"name":"Sam","age":18,"gender":"男"}
    } 
    alert(p2.boyfrided.name)  // Sam
    alert(p2["boyfrided"]["name"])  // Sam
    

DHTML

  1. DHTML概述

    • DHTML: Dynamic HTML 动态的 html

    • DHTML并不是一门新的技术, 而是将现有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技术.

    • DHTML分为BOM和DOM。

      • BOM:Browse Object Modle 即浏览器对象模型,其中封装了浏览器操作相关对象。

      • DOM:Document Object Modle 即文档对象模型,将整个HTML文档按照文档结构组织成了树形结构。

        javaWeb学习笔记 --- JavaScript_第1张图片

  2. BOM

    1. Window 对象: 此对象为全局对象,因此,调用方法或属性时,可以省略window。

      • 常用事件:
        onclick事件 – 当窗口被点击时触发
        onfocus事件 – 当窗口获得焦点时触发
        onblur事件 – 当窗口失去焦点时触发
        onload事件 – 当整个html文档加载完之后立即触发
      • 常用方法:
        alert() – 消息对话框
        confirm() – 确认对话框,返回boolean
    2. location对象

      • 属性:href – 获取或设置浏览器地址栏url
    <html>
    	<head>
    		<title>title>
    		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    		
    		<script type="text/javascript">
    			//window对象
    			//1.在按钮点击时弹出提示框
    			function clickfn(){
    				alert("点我,点我,点我");
    			}
    
    			//2.输入框1获得焦点时弹出提示框
    			function focusfn(){
    				alert("获得焦点")
    			}
    
    			//3.输入框2失去焦点时弹出提示框
    			function blurfn(){
    				alert("格式不正确")
    			}
    
    			//4.弹出输入框3中的value值
    			// 当整个文档加载完成后再触发
    			onload = function(){
    				// document.getElementById 获取元素
    				var r1 = document.getElementById("input3");
    				alert(r1.value);
    			}
    					
    			//5.点击删除商品按钮,弹出提示是否删除,如果确定,则弹出商品已删除,否则弹出商品还在
    			function delfn(){
    				var r2 = confirm("是否删除");
    				// 确定为返回true,取消返回false
    				if (r2){  // true
    					alert("商品已删除");
    				}
    				
    			}
    
    			//location对象
    			//1.弹出当前url
    			alert(location.href);
    			
    			//2.将页面url设置为"http://www.baidu.com"
    			location.href = "http://www.baidu.com";  // 跳转到了百度页面
    			
    		script>
    	head>
    	<body>
    		<input type="button" name="test1" value="按钮" onclick="clickfn()"/><br /><br />
    		输入框1:<input type="text" name="test2" onfocus="focusfn()"/><br /><br />
    		输入框2:<input type="text" name="test3" onblur="blurfn()"/><br /><br />
    		输入框3:<input type="text" name="test4" id="input3" value="第三个输入框"/><br /><br />
    		<input type="button" name="test5" value="删除商品"  onclick="delfn()"/>
    	body>
    html>
    
  3. DOM

    1. 获取元素

      • document.getElementById("id值"): 通过id值获取指定id的元素
      • document.getElementsByName("name属性值"): 通过name属性获取指定name值的所有元素组成的集合数组
      • document.getElementsByTagName("元素名"): 通过元素的名称获取指定元素名的所有元素组成的集合数组
      • value属性: 获取或设置输入框的value值
      • innerText: (部分浏览器不支持) 获取或设置元素内的文本内容
      • innerHTML: 获取或设置元素的html内容
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>如何通过document获取数据title>
      <style>
      	input{ margin: 5px 5px;}	
      style>
      <script>
      	/* --通过ID获取并弹出用户名输入框的值-- */
      	function getId(){
      		var r1 = document.getElementById("username")
          	alert(r1.value)
          	r1.value = "002"
          }
      	
      	/* --通过name属性获取并弹出密码输入框的值-- */
      	function  getPwd(){
      		var r2 = document.getElementsByName("password")[0];
      		alert(r2.value)
      	}
      	
      	/* --通过元素名称获取并弹出确认密码输入框的值-- */
      	function getCpwd(){
      		var r3 = document.getElementsByTagName("input")[2];
      		alert(r3.value)
      	}
      		
      	/* --获取元素内容-- */
          function getPvalue(){
      	    var r4 = document.getElementById("pid");
      	    // alert(r4.innerHTML);  // 这是P标签中的文字
      	    alert(r4.innerText);  // 这是P标签中的文字
      	    // 将文字改为绿色
      	    r4.innerHTML = "这是P标签中的文字"
          }
      script>
      head>
      <body>
      	用户名:<input type="text" name="username" id="username" value = "001"/><br />
          密码:<input type="password" name="password" id="password" /><br />
          确认密码:<input type="password" name="rd" id="password2" /><br />
          
          <hr />
          <input type="button" value="通过ID获取并弹出用户名输入框的值" id="b1" onclick = "getId()"/>
      
          <input type="button" value="通过name属性获取并弹出密码输入框的值" id="b2"  onclick = "getPwd()"/>
      
          <input type="button" value="通过元素名称获取并弹出确认密码输入框的值" id="b3" onclick = "getCpwd()"/>        
          
          <hr  />
          <p id="pid"><font color="red">这是P标签中的文字font>p>
      	<input type="button" value="获取P中的文字" onclick = "getPvalue()"/>
      	
      body>
      html>
      
    2. 元素的增删改

      • docuemnt.createElement("元素名"): 创建一个元素
      • body.appendChild(Div): 往body中追加一个子元素
      • body.removeChild(oDiv): 删除oDiv子元素
      • body.replaceChild(newDiv, oDiv): 用newDiv替换已有的子元素oDiv
      • body.insertBefore(oDiv1, oDiv): 往body中插入一个子元素oDiv1, 子元素是插入在oDiv的前面
      • oDiv.cloneNode([boolean]): 克隆oDiv元素,参数默认值为false,表示只克隆元素本身,不克隆oDiv内的所有子孙元素,如果希望克隆元素还克隆元素内容所有子孙元素, 可以传入参数true
      <script type="text/javascript">
          /* --添加节点: 添加一个div元素到body的最后面-- */
          function cereatfun(){
          var body = document.getElementsByTagName("body")[0];
          // 创建了一个游离的div
          var newdiv = document.createElement("div");
          newdiv.innerHTML = "这是一个新的div";
          // 将游离的div添加到body上
          body.appendChild(newdiv);
      }
      
      
      /* --删除节点: 删除body中id值为 div_3 的div元素-- */
      function delfun(){
          var body = document.getElementsByTagName("body")[0];
          var div3 = document.getElementById("div_3");
          body.removeChild(div3);
      }
      
      /* --更新节点: 用新节点替换id值为 div_2 的div元素  -- */
      function replfun(){
          var body = document.getElementsByTagName("body")[0];
          var div2 = document.getElementById("div_2")
          var newdiv = document.createElement("div")
          newdiv.innerHTML = "替换的div"
          body.replaceChild(newdiv,div2)
      }
      
      /* --克隆节点、插入节点到第二个元素的前面--*/
      function clonefun(){
          var body = document.getElementsByTagName("body")[0];
          var div4 = document.getElementById("div_4")
          var clonediv = div4.cloneNode(true);
          var div2 = document.getElementById("div_2")
          body.insertBefore(clonediv,div2);
      }
      script>
      

总结

javaWeb学习笔记 --- JavaScript_第2张图片

你可能感兴趣的:(java,javascript,前端,html)