JavaWeb基础（2）---------JavaScript全部内容（第三次整理）

JavaScript基础

• 概念：一门客户端脚本语言
  • 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
  • 脚本语言:不需要编译，直接就可以被浏览器解析执行了
• 功能
  增强用户和html页面的交互过程，可以来控制html元素，让页面有一 些动态的效果，增强用户的体验

JavaScript = ECMAScript + JavaScript自己所特有的内容(BOM+DOM)

ECMScript

客户端脚本语言的标准

基本语法

• 与html结合的方法

  1.内部JS：

  在html内部定义一个Script标签，

  <Script>
  	alert("hello js")
  </Script>
  

  2.外部JS：

  通过src属性引入外部js文件

  <Script src="路径"></Script>
  
  

  3.特点：

  • Script标签写在任何地方都可以，但是定义的位置会影响执行顺序
  • Script可以定义多个

• 注释

  1.单行注释：//

  2.多行注释：/* … */

• 数据类型

  1.原始数据类型(基本数据类型)

  • number：数字。整数/小数/NaN(Not a number 一个不是数字的数字类型)
  • string：字符串。字符串：“abc” 、“a”、‘abc’
  • boolean：true、false
  • null：一个对象为空的占位符
  • undefined：未定义。如果一个变量没有被初始化，则会被默认赋值为undefined

  2.引用数据类型：对象

• 变量

  • 变量：一块储存数据的内存空间

    强类型的语言：Java，已经指定好是什么数据类型，就只能存放上面指定类型的值

    弱类型的语言：JS，它申请的是一块空间，但是没有定义是什么数据类型的值，可以在这块空间里放任何类型的值

    • 语法：

      var 变量名 = 初始化值;

      var num = ;//number类型
      var num = NaN;
      
      var str = "abc";//String类型
      var srt1 = 'abc';
      
      var flag = true;//boolean
      
      var obj = null;//定义null
      var obj = undefined;//undefined
      

    • typeof：查看数据是什么类型

      typeof(num)
      ....
      

• 运算符

  • 一元运算符：只有一个运算数的运算符

    ++，–，+(正号)

    • ++(–)：在前，先自增(自减)，再运算

      var num = 3;
      var a = num++;
      //a= 3
      //num =4
      

    • ++(–)：在后，先运算，再自增(自减)

    • +：正负号，在不是数字的前面加+号， 会有自动的转换规则

      在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换，

      • 其他类型转number：

        • String转number：按照字面值转换，如果字面值不是数字，则转为NaN

        • boolean转number：true转为1；false转为0

  • 算数运算符：

    +，-，*，/，%，…

  • 赋值运算符

    =，+=，-=，…

  • 比较运算符

    >，<，>=，<=，==，===(全等于)
    

    • 比较方式

      • 类型相同：直接比较

        字符串：安装字典顺序比较，按位一一比较，直到得到大小为止

      • 类型不同：先进行类型转换，再比较

        ===：全等于，在比较之前先判断类型，如果类型类型不一样，直接返回false

  • 逻辑运算符

    &&，|| ，！

    • 其他类型转boolean
      • number：0或NaN为假，其他为真
      • string：除了空字符串("")，其他都为真
      • null&undefined：都是false
      • 对象：所有对象都为true

  • 三元运算符

    ? :

    • 语法：

      表达式 ? 值1 : 值2

      判断表达式的值，如果是true则取值为1，如果是false则取值为2

• 流程控制语句

  • if…else…

  • switch:

    switch(变量)
    	case 值:
    

    • java中，switch语句可以接受的数据类型：byte，int，short，char，枚举(1.5)，String(1.7)
    • 在js中，switch可以接收任意的原始数据类型

• 特殊语法：

  • JS里面语句以;结尾，如果一行只有一条语句则;可以省略
  • 变量的定义使用var关键字，也可以不使用
    • var用不用的区别
      • 用：定义的变量是局部变量
      • 不用：定义的变量是全局变量(不建议)

基本对象

Function

函数(方法)对象

• 创建：

  • xx方式1：var fun = new Function(形式参数列表,方法体);

  • 方式2：function 方法名称(形式参数列表){

    ​ 方法体

    ​ }

  • 方式3：var 方法名 = function 方法名称(形式参数列表){

    ​ 方法体

    ​ }

       <script>
            //方式1，了解
            var fun1 = new Function("a","b","alert(a);");
            //调用方法
            fun1(3,4);
    
            //方式2
            function fun2(a,b){
                alert(a+b);
            }
            fun2(3,4);
    
            //方式3
            var fun3 = function fun2(a,b){
                alert(a+b);
            }
            fun3(3,4);
        </script>
    

• 方法：

• 属性：

  • length：代表形参的个数

• 特点：

  • 1.方法定义时，形参的类型不用写，返回值类型也可以不用写

  • 2.方法是一个对象，如果定义名称相同的方法，会覆盖

            var fun3 = function fun2(a,b){
                alert(a+b);
            }
            fun3(3,4);
            fun3 = function (a,b){
                alert(a);
            }
            fun3(2,4);//并不会报错,只是覆盖
    

  • 3.在JS中，方法的调用只与方法的名称有关，和参数列表无关

            var fun3 = function fun2(a,b){
                alert(a+b);
            }
            fun3(3,4);
            fun3 = function (a){
                alert(a);
            }
            fun3(2);//传有关参数也可以，2个也可以，多个也可以
    

  • 4.在方法声明中有一个隐藏的内置对象(数组)，arguments，封装所有的实际参数

            //求两个参数的和
            function add(a,b){
                return a + b;
            }
            var sum = add(1,2);
            alert(sum);
            //求任意个数的和
            function add1(){
                var sum = 0;
                for (var i = 0; i < arguments.length; i++){
                    sum += arguments[i];
                }
                return sum;
            }
            var sum = add(1,2);
            alert(sum);//3
            var sum1 = add(1,2,3,4);
            alert(sum1);//10
    

• 调用：

  • 方法名称(实际参数列表)

Array

数组对象

• 创建

  • var arr = new Array(元素列表);

  • var arr = new Array(默认长度);

  • var arr = [元素列表];

        <script>
            var arr1 = new Array(1,2,3);
            var arr2 = new Array(5);
            var arr3 = [1,2,3,4];
    
            document.write(arr1+"<br>");
            document.write(arr2+"<br>");
            document.write(arr3+"<br>");
        </script>
    /*
    1,2,3
    ,,,,
    1,2,3,4
    */
    

• 方法

• join()：将一个数组转为字符串

  • 功能：将数组转换成字符串
  • 语法：arrayObject.join([separator])
  • 参数：separator可选。指定要使⽤的分隔符。如果省略该参数，则使⽤逗
    号作为分隔符。

          var arr1 = [1,2,true,"abd"];
          document.write(arr1+"<br>");
  
          arr1[10] = "ads";
          document.write(arr1[10]+"<br>");
          document.write(arr1[5]+"<br>");
  
          document.write(arr1.length);
  
          document.write(arr1.join()+"<br>");
          document.write(arr1.join("---")+"<br>");
  /*
  1,2,true,abd
  ads
  undefined
  111,2,true,abd,,,,,,,ads
  1---2---true---abd---------------------ads
  */
  

• shift ( )

  • 功能：把数组的第⼀个元素从其中删除，并返回第⼀个元素的值。
  • 语法：arrayObject.shift()
  • 说明：shift()⽅法将删除arrayObject的第⼀个元素，把数组⻓度减1，并返
    回它删除的元素的值。该⽅法将修改原数组。

• unshift( )

  • 功能：向数组的开头添加⼀个或更多元素，并返回新的⻓度。
  • 语法：arrayObject.unshift(element1,element2,…,elementX)
  • 返回值：arrayObject 的新⻓度。

• pop( )

  • 功能：⽤于删除并返回数组的最后⼀个元素
  • 语法：arrayObject.pop()
  • 说明：pop() ⽅法将删除 arrayObject 的最后⼀个元素，把数组⻓度减 1，
    并且返回它删除的元素的值。如果数组已经为空，则pop() 不改变数组,并返
    回undefined 值。

• sort( )

  • 功能：⽤于对数组的元素进⾏排序。
  • 语法：array.sort([sortby])
  • 参数：sortby可选，规定排序顺序，必须是函数。
  • 返回值：对数组的引⽤。请注意，数组在原数组上进⾏排序，不⽣成副
    本。
  • 说明：如果调⽤该⽅法时没有使⽤参数，将按字⺟顺序对数组中的元素进
    ⾏排序（说得更精确点，是按照字符编码的顺序进⾏排序）。如果想按照
    其他标准进⾏排序，就需要提供⽐较函数，该函数要⽐较两个值，然后返
    回⼀个⽤于说明这两个值的相对顺序的数字。

• reverse()

  • 功能：颠倒数组中元素的顺序。
  • 语法：arrayObject.reverse()
  • 提示：该⽅法会改变原来的数组，⽽不会创建新的数组。

• push()：

  • 功能：⽤于删除并返回数组的最后⼀个元素
  • 明：pop() ⽅法将删除 arrayObject 的最后⼀个元素，把数组⻓度减 1，
    并且返回它删除的元素的值。如果数组已经为空，则pop() 不改变数组,并返
    回undefined 值。

          arr1.push(12);
          document.write(arr1.join("---")+"<br>");
  /*
  1---2---true---abd---------------------ads---12
  */
  

• 属性

  • length:数组的长度

• 特点

  • JS中，数组元素类型是可变的

  • JS中，数组的长度是可变的

            var arr1 = [1,2,true,"abd"];
            document.write(arr1+"<br>");
            arr1[10] = "ads"
            document.write(arr1[10]+"<br>")
            document.write(arr1[5]+"<br>")
    /*
    1,2,true,abd
    ads
    undefined
    */
    

Boolean

Date

日期对象

• 创建：

  • var date = new Date();

• 方法

  toLocaleString()：返回当前date对象对应的时间本地字符串格式

  getTime()：获取毫秒值，返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差

    <script>
        var date = new Date();

        document.write(date + "<br>");

        document.write(date.toLocaleString() + "<br>");

        document.write(date.getTime() + "<br>");
    </script>
/*
Tue Aug 24 2021 20:43:09 GMT+0800 (中国标准时间)
2021/8/24 下午8:43:09
1629808989724
*/

1.指定时间戳创建实例

• 语法：dateName = new Date(millisecondsNum);

• 说明：指定⼀个整数参数时，将该参数作为对象实例距离1970年1⽉1⽇0时
  0分0秒的毫秒数，以此创建实例。

• 实例：myDate = new Date(10000); //对应的是1970年1⽉1⽇0时0分10秒

2.创建当前系统⽇期和时间的实例

• 语法：dateName = new Date();
• 说明：当不提供任何参数时，Date()构造函数创建⼀个当前系统时间对应的
  Date实例，采⽤本地时间。

3.指定时间字符串创建对应指定时间的实例

• 语法：dateName = new Date(millisecondsNum);
• 说明：指定⼀个整数参数时，将该参数作为对象实例距离1970年1⽉1⽇0时
  0分0秒的毫秒数，以此创建实例。

4.创建Date对象实例

• 语法：dateName = new Date(dateString);
• 其中，dateString是⼀个表示时间的字符串

5.指定年、⽉、⽇、时间等创建Date对象实例

• 语法：dateName = new
  Date(year,month,date[,hours[,minutes[,seconds]]]);
• 说明：在这种格式中，时间由7部分组成，其中，年、⽉、⽇必须指定，其
  余可选。
• ⽉份从0开始计数，范围0-11

Math

• 创建

• 特点：不用创建，直接使用。Math.方法名();

• 方法：

  • random()：返回0~1之间的随机数，含0不含1
  • ceil(x)：对数进行上舍入
  • floor(x)：对数进行下舍入
  • round(x)：把书四舍五入为最接近的整数
    

• 属性

  • PI

    <script>
        document.write(Math.PI + "<br>")
        document.write(Math.random() + "<br>")
        document.write(Math.ceil(3.14) + "<br>")
        document.write(Math.floor(3.14) + "<br>")
        document.write(Math.round(3.49) + "<br>")
        document.write(Math.round(3.51) + "<br>")

    </script>
/*
3.141592653589793
0.5041609564993705
4
3
3
4
*/

Number

String

		<script>
			var str = "HjkkjaSShjkS";
			document.write(str.toLowerCase()+"<br />");
			document.write(str.toUpperCase()+"<br />");
			
			email = "guasydhj_ssadsa@163.com";
			document.write(str.indexOf("k",1)+"<br />");
		</script>

substr(startIndex,[length])

• 从起始索引号提取字符串中指定数目的字符。
• 参数startIndex为起始位 置索引(包含该位置字符)。
• 参数length为要提取的子字符串的长度，可选。
  • 若不指定length, 则提取startIndex开始的所有字符。length不能为负。

substring( startIndex, [endIndex])

• 提取字符串中两个指定的索引号之间的字符

toLowerCase()

• —>转小写

toUpperCase()

• —>转大写

length()

• ---->该属性得到字符串的长度，即字符串所包含的字符个数。

charAt(index)

• —>返回字符串中index指定位置处的一个字符，
• index为字符在字符串的位置索引值。
• 参数:如果index超出了索引范围(即不在0 length-1范围内)则返回空字符串

indexOf(str,[startIndex])

• ---->在当前字符串中从左到右查找子字符串str,并返回子字符串 str第一 次出现时的位置索引，如果找不到则返回-1。

• 参数startIndex可选， 表示开始搜索的位置。如果不指定startIndex则由字符串首位开始搜索，否则由startIndex对 应的位置(包含该位置)开始搜索。

lastlndexOf( search, [startlndex])

• 与indexOf方法作用相同，但是查找的方向为从右到左。如果找到，返回子字符串在字符串中的起始位置，否则返回一1。

split(separator, [limitInteger])

• 一该方法将字符串中的字符通过指定的分隔符进行分隔，并使用所得各个字符串组成一个数组。
• 参数separator为要使用的分隔符。参数limitlnteger 为产生的数组的最大元素数，可选。当指定该参数时，数组元素个数不能超过该值。

replace(substr,replacement)

• 在字符串中用一些字符替换另一些字符，参数substr规定要查找的子字符串，replacement规定替换后的字符串。
• 提示:只能替换次。

RegExp

正则表达式

正则表达式：定义字符串的组成规则。

• 单个字符：[]

  如：只是取一个字符
  	[a]:一个字符
  	[ab]:a或者b
  	[a-z]:表示abcd...z
  	[a-zA-z0-9_]:大小字母或小写字符a到z或0到9或_
  

  特殊符号代表特殊含义的单个字符

  • \d：单个数字字符[0-9]
  • \w：单个单词字符[a-zA-Z0-9_]

• 量词符号：

  ?：表示出现0次货1次
  *：表示出现0次货多次
  +：出现1次货多次
  
  {m,n}：表示 数量大于等于m或小于等于n  m<= 数量 <= n
  	m如果缺省：{,n}：最多n次
  	n如果缺省：{m,}：最少m次
  

• 结束开始符号

  • ^：开始
  • $：结束

正则表达式对象

RegExp：正则表达式对象

• 创建
  • var reg = new RegExp(“正则表达式”);
  • var reg = /正则表达式/;
• 方法
  • test(参数) :验证指定的字符串是否符合正则定义的规范

        var reg1 = new RegExp("\w{6,12}");
        var reg2 = /^\w{6,12}$/;


        document.write(reg1 + "<br>");
        document.write(reg2 + "<br>");

        var username1 = "zhangsan";
        var username2 = "zhangsandsfsffsfsfsfs";
        //验证
        var flag1 = reg2.test(username1);
        document.write(flag1 + "<br>");
        var flag2 = reg2.test(username2);
        document.write(flag2 + "<br>");
        
        // 下面这个不正确的原因，应该是转义符的原因，过后去改改
//将上面的改为下面这个，就能够实现和reg2一样的效果了，就是转义字符的原因
//var reg1 = new RegExp("^\\w{6,12}$");
        var flag3 = reg1.test(username1);
        document.write(flag3 + "<br>");
        var flag4 = reg1.test(username2);
        document.write(flag4 + "<br>");
/*
/w{6,12}/
/^\w{6,12}$/
true
false
false
false
*/

Global

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();

/*
方法：
	
	encodeURI():ur1编码
	decodeURI():ur1解码
	
	encodeURIComponent() :ur1编码，更上面的用法原因，只是它编码的字符更加多
	decodeURIComponent() :url解码
	
	parsent():将字符串转为数字
	逐一判断每一 个字符是否是数字，直到不是数字为止，将前边数字部分转为number
	
	isNaN():判断一个值是否是NaN
		NaN。NaN参与的==比较全部问false
	
	eval():将JavaScript字符串，并把它作为脚本代码来执行。

URL编码：


*/
        var str = "原因搜索";
        var encode = encodeURI(str);
        document.write(encode +"<br>");//%E5%8E%9F%E5%9B%A0%E6%90%9C%E7%B4%A2
        var s = decodeURI(encode);
        document.write(s +"<br>");//原因搜索


        var str = "123asasdd";
        var str1 = "a123asasdd";
        var num = parseInt(str)
        var num1 = parseInt(str1)
        document.write(num +"<br>");//123
        document.write(num1 +"<br>");//NaN

        var a1 = "acb";
        var a2 = NaN;
        document.write(a1 == NaN );//false
        document.write(a2 == NaN );//false
        document.write(isNaN(a1));//true
        var a3 = 12;
        document.write(isNaN(a3));//false

        var js = "alert(123)";//正常输出是字符串
        eval(js);//会弹出123

BOM

概念：Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象

组成

• Window：窗口对象
• Navigator：浏览器对象不重要
• Screen：显示器屏幕对象不重要
• History：历史记录对象
• Location：地址栏对

Window

1.创建

2.方法

1.与弹出框有关的方法：

• alert() 显示带有一段消息和一个确认按钮的警告框。
• confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
  如果用户点击确定按钮，则方法返回true
  如果用户点击取消按钮，则方法返回false

<script>
    confirm("是否退出？");
</script>

• prompt() 显示可提示用户输入的对话框。
  返回值：获取用户输入的值

<script>
    prompt("请输入用户名：");
</script>

2.与打开关闭有关的方法：

• close() 关闭浏览器窗口。
  谁调用我 ，我关谁
• open() 打开一个新的浏览器窗口
  返回新的Window对象

     <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">
<script>
    var btn = document.getElementById("openBtn");
    var newwindow ;
    btn.onclick = function (){
        //返回的是一个window对象
        newwindow = open("https://www.baidu.com");//点击按钮，打开新的窗口,跳转的是百度的页面
    }
    var btnc = document.getElementById("closeBtn");
    btnc.onclick = function (){
        newwindow.close();//关闭刚刚打开的窗口，newWindow
    }
</script>

3.与定时器有关的方式

• setTimeout() 在指定的毫秒数后调用函数或计算表达式。

  • 参数：

    1.js代码或者方法对象

    2.秒值

  • 返回值：唯一标识，用于取消定时器

  <script>
      setTimeout(fun,2000);//2秒钟后调用fun里面的alert
      function fun(){
          alert("bii");
      }
  </script>
  

• clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

<script>
    var id = setTimeout(fun,2000);//2秒钟后调用fun里面的alert
    clearTimeout(id);
    function fun(){
        alert("bii");
    }
</script>

• setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

<script>
    setInterval(fun,2000);//每两秒调用一次
    function fun(){
        alert("bii");
    }
</script>

• clearInterval() 取消由 setInterval() 设置的 timeout。

<script>
    var id = setInterval(fun,2000);
    clearInterval(id)
    function fun(){
        alert("bii");
    }
</script>

4.属性：

• 1.获取其他BOM对象：

  history

  location
  Navigator
  Screen:

<script>
    var h1 = window.history;
    var h2 = history;
</script>

• 2.获取DOM对象
  document

5.特点

• Window对象不需要创建可以直接使用 window使用。 window.方法名();
• window引用可以省略。 方法名();

<script>
    alert("hadj");
    window.alert("zzcc");
</script>

History

历史记录对象

1.创建(获取)

• window.history

• history

2.方法

• back() 加载 history 列表中的前一个 URL。go(1)
• forward() 加载 history 列表中的下一个 URL。go(-1)
• go(参数) 加载 history 列表中的某个具体页面。
  • 参数：
    • 正数：前进几个历史记录
    • 负数：后退几个历史记录

3.属性

• length 返回当前窗口历史列表中的 URL 数量。

    <input type="button" id="btn" value="获取当前窗口的历史记录个数">
    <input type="button" id="btn1" value="前进">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function (){
        //获取
        var length = history.length;
        alert(length)
    }

    var btn1 = document.getElementById("btn1");
    btn1.onclick = function (){
        //前进
        history.forward();//跟浏览器的向右按钮差不多，返回也是这样定义的
    }
</script>

Location

1.创建(获取)：

• window.location

• location

2.方法：

• reload() 重新加载当前文档。刷新

3.属性

• href 设置或返回完整的 URL。

    <input id="Btn" type="button" value="刷新">
    <input id="Btn1" type="button" value="去百度">
<script>
    //reload:定义一个按钮，点击按钮，就去刷新
    var btn = document.getElementById("Btn");
    //绑定单击时间
    btn.onclick = function(){
        location.reload();
    }
    //获取href
    var href = location.href;
    document.write(href);

    //点击按钮，去访问www.baidu.com
    var btn1= document.getElementById("Btn1");
    //绑定单击时间
    btn1.onclick = function(){
        location.href = "https://www.baidu.com";
    }
</script>

DOM

1.功能

• 功能：控制html文档的内容
• Document Object Model 文档对象模型
• 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

DOM 标准被分为 3 个不同的部分:

• 核心 DOM - 针对任何结构化文档的标准模型

  • Document：文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment:注释对象

  • Node：节点对象，其他5个的父对象

• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

核心DOM模型

1.Document：文档对象

• 创建(获取)：在html dom模型中可以使用window对象来获取

  • window.document
  • document

• 方法

  • 1.获取Element对象

    • getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
    • getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组，在(" ")里面添加要获取的标签名称
    • getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组…
    • getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组…
    • 使用innerHTML属性修改标签体内容
    • innerText属性是修改标签里面的文本等内容的
    • get…().value：获取文本内容

   获取页面标签(元素)对象：Element
   
   
   document.getElementById("id值"):通过元素的id获取元素对象
   
   
   操作Element对象：
   
   1.修改属性值：
   
   - 明确获取的对象是哪一个
   
   - 查看API文档，找其中有哪些属性可以设置
   
   2.修改标签体内容：

//使用innerHTML属性修改标签体内容
//innerText属性是修改标签里面的文本等内容的

<h1 id="title">aaaaa</h1>
    <img id="light" src="../img/on.gif">

    <script>
        var light = document.getElementById("light");
        light.src = "../img/off.gif";//将img里面的src属性修改为现在的这个路径

        var title = document.getElementById("title");
        //修改内容
        title.innerHTML = "abbbb";//可以修改上面id为title的aaaa的值为abbbb
    </script>

/*
3.事件

- 功能： 某些组件被执行了某些操作后，触发某些代码的执行。

4.绑定事件

- 方式1：直接在html标签上，指定事件的属性(操作)，属性值就是js代码

  - 属性：onclick--- 单击事件

*/
  //1.
  <img id="light" src="../img/on.gif" onclick="alert('被点击了');">//效果：当点击图片时，会弹出alert里面的内容；点击其他地方并不会
  //2.     
  	<script>
          function fun(){
              alert("被点击了");
          }
      </script>
   <img id="light" src="../img/on.gif" onclick="fun()">
<script>
    function fun1(){
        alert("qq被点击了");
    }
    //获取对象
    var l = document.getElementById("light");
    /*
		- 方式2：通过js获取元素对象，指定事件属性，设置一个函数
  	*/
   <img id="light" src="../img/on.gif">
    //绑定事件
    l.onclick = fun1;//这里不能添加()，添加过后会直接运行方法，先弹出alert，但是点击没有效果出现
</script>

• 2.创建其他DOM对象，了解

  • createAttribute(name)
  • createComment()
  • createElement()
  • createTextNode()

• 3.Element：元素对象

  • 获取/创建：通过document来获取和创建
  • 方法
    • removeAttribute()：删除属性
    • setAttribute()：设置属性

      <a>点击</a>
      <input type="button" id="bset" value="给a添加属性">
  <script>
      var bs = document.getElementById("bset");
      bs.onclick = function (){
          var ea = document.getElementsByTagName("a")[0];
          ea.setAttribute("href","https://www.baidu.com");//点击过后，就给a设置href属性，使他可以点击
      }
  </script>
  

• 4.Node：节点对象，其他5个的父对象

  • 特点：所有dom对象都可以被认为是一个节点

  • 方法

    • CRUD dom树：
      • appendChild()：向节点的子节点列表的结尾添加新的子节点。
      • removeChild() ：删除（并返回）当前节点的指定子节点。
      • replaceChild()：用新节点替换一个子节点。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                border: 1px solid red;
            }
            #div1{
                width: 200px;
                height: 200px;
            }
            #div2{
                width: 100px;
                height: 100px;
            }
            #div3{
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2"></div>
            div1
        </div>
        <a href="javascript:void(0);" id="del">删除子节点</a>
        <a href="javascript:void(0);" id="add">添加子节点</a>
    <!--    <input type="button" id="del" value="删除子节点">-->
        <script>
            var d = document.getElementById("del");
            d.onclick = function (){
                var d1 = document.getElementById("div1");
                var d2 = document.getElementById("div2");
                d1.removeChild(d2);
            }
    
            var add = document.getElementById("add");
            add.onclick = function (){
                var div = document.createElement("div");
                div.setAttribute("id","div3");
                add.appendChild(div);
            }
        </script>
    </body>
    </html>
    

  • 属性

    • parentNode 返回节点的父节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
    <img id="light" src="../img/on.gif">

    <script>
        /*
        1.获取图片对象        2.绑定单击事件         每次点击切换图片
        * 规则：
         如果灯是开的 on,切换图片为 off
        * 如果灯是关的 off,切换图片为 on
        * 使用标`记flag来完成
         */
        // 1.获取图片对象
        var light = document.getElementById("light");
        var flag = true;
        // 2.绑定单击事件
        light.onclick = function (){
            if (flag){//通过等是开着的
                light.src = "../img/off.gif";
                flag = false;
            }else {
                light.src = "../img/on.gif";
                flag = true;
            }
        }
    </script>
</body>
</html>

HTML DOM

• 标签体的设置和获取：innerHTML
• 使用html元素对象的属性
• 控制元素样式
  • 1.使用元素的style属性来设置
  • 2.提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

<body>
    <div id="div1">
        div
    </div>
<script>
    var d = document.getElementById("div1");
    var innerHTML = d.innerHTML;//获取div里面的文本内容，包括了换行的内容
    // alert(innerHTML)
    //div标签中替换一个文本输入框
    d.innerHTML = "<input type='texr'>";
    //div标签中追加一个文本输入框
    d.innerHTML += "<input type='texr'>";
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .d2{
            border: 1px solid orange;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div>
<script>
    var div1 = document.getElementById("div1");
    div1.onclick = function (){
        //修改设置样式方法1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size ---->  fontSize
        div1.style.fontSize = "20px";
    }
    var div2 = document.getElementById("div2");
    div2.onclick = function (){
        //修改设置样式方法
        div2.className = "d1";
    }
</script>
</body>
</html>

事件监听机制

1.概念：某些组件被执行了某些操作后，触发某些代码的执行。
	事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
	事件源：组件。如： 按钮 文本输入框...
	监听器：代码。
	注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

* 常见的事件：
1. 点击事件：
	1. onclick：单击事件
	2. ondblclick：双击事件
2. 焦点事件
	1. onblur：失去焦点：当鼠标移出指定位置后触发
		一般用于表单校验
	2. onfocus:元素获得焦点。
3. 加载事件：
	1. onload：一张页面或一幅图像完成加载。当页面加载完了，才触发
4. 鼠标事件：
	1. onmousedown 鼠标按钮被按下。
	2. onmouseup 鼠标按键被松开。
	3. onmousemove 鼠标被移动。
	4. onmouseover 鼠标移到某元素之上。
	5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
	1. onkeydown 某个键盘按键被按下。
	2. onkeyup 某个键盘按键被松开。
	3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
	1. onchange 域的内容被改变。
	2. onselect 文本被选中。
7. 表单事件：
	1. onsubmit 确认按钮被点击。
		可以阻止表单的提交，方法要返回false，则表单被阻止提交
    2. onreset 重置按钮被点击。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>
        //2.加载完成事件  onload
        window.onload = function(){
            /*//1.失去焦点事件
            document.getElementById("username").onblur = function(){
                alert("失去焦点了...");
            }*/
            /*//3.绑定鼠标移动到元素之上事件
            document.getElementById("username").onmouseover = function(){
                alert("鼠标来了....");
            }*/

           /* //3.绑定鼠标点击事件
            document.getElementById("username").onmousedown = function(event){
               // alert("鼠标点击了....");
                alert(event.button);
            }*/

          /*  document.getElementById("username").onkeydown = function(event){
                // alert("鼠标点击了....");
               // alert(event.button);
                if(event.keyCode == 13){
                    alert("提交表单");
                }

            }*/

           /* document.getElementById("username").onchange = function(event){

                alert("改变了...")

            }

            document.getElementById("city").onchange = function(event){

                alert("改变了...")

            }*/
            //表单提交方法1
            /*document.getElementById("form").onsubmit = function(){
                //校验用户名格式是否正确
                var flag = false;


                return flag;
            }*/
        }
        //方法2：自定义
        // 这个方法需要在onclick里面还需要return一次这个函数
        function checkForm(){
            return true;
        }
    </script>
</head>
<body>
<!--
    function fun(){
       return  checkForm();
    }
 -->

<!--方法2-->
<form action="#" id="form" onclick="return  checkForm();">
<!--&lt;!&ndash;<form action="#" id="form">&ndash;&gt;//方法1-->
<input name="username" id="username">

<select id="city">
    <option>--请选择--</option>
    <option>北京</option>
    <option>上海</option>
    <option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>