JavaScript2带代码_script2编程示例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44325370/article/details/111224661

JavaScript

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

客户端脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

脚本语言：不需要编译，直接就可以被浏览器解析执行了

动态效果

增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

1. ECMAScript：
2. BOM：
3. DOM：
	1. 事件

ECMAScript

客户端脚本语言的标准

1.基本语法

1.1与html结合

		1. 内部JS：
			* 定义<script>，标签体内容就是js代码
    <script>
        alert("Hello World");
    </script>
		2. 外部JS：
			* 定义<script>，通过src属性引入外部的js文件
    <script src="js/a.js"></script>
		* 注意：
			1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
			2. <script>可以定义多个。

1.2注释

		1. 单行注释：//注释内容
		2. 多行注释：/*注释内容*/

1.3数据类型

		1. 原始数据类型(基本数据类型)：
			1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
			2. string：字符串。 字符串  "abc" "a" 'abc'
			3. boolean: true和false
			4. null：一个对象为空的占位符
			5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

		2. 引用数据类型：对象

1.4变量

		* 变量：一小块存储数据的内存空间
		* Java语言是强类型语言，而JavaScript是弱类型语言。
			* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
			* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
		* 语法：
			* 可变 let 变量名 = 初始化值;
			* 不可变 const 变量名 = 初始化值;
		
		* typeof运算符：获取变量的类型。
			* 注：null运算后得到的是object

    <script>
        //定义变量
        let a  = 3;
        alert(a);
        a = "abc";
        alert(a);

       //定义number类型
        let num = 1;
        const num2 = 1.2;
        let num3 = NaN;

        //输出到页面上
        document.write(num+"<br>");
        document.write(num2+"<br>");
        document.write(num3+"<br>");
        //定义string类型
        let str = "abc";
        let str2 = 'edf';
        document.write(str+"<br>");
        document.write(str2+"<br>");

        //定义boolean
        let flag = true;
        document.write(flag+"<br>");

        // 定义null,undefined
        let obj = null;
        const obj2 = undefined;
        let obj3 ;
        document.write(obj+"<br>");
        document.write(obj2+"<br>");
        document.write(obj3+"<br>");

    </script>

1.5运算符

           1. 一元运算符：只有一个运算数的运算符
				++，-- ， +(正号)  
				* ++ --: 自增(自减)
					* ++(--) 在前，先自增(自减)，再运算
					* ++(--) 在后，先运算，再自增(自减)
				* +(-)：正负号
			    * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
                    * 其他类型转number：
                        * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
                        * boolean转number：true转为1，false转为0
			2. 算数运算符
				+ - * / % ...

			3. 赋值运算符
				= += -+....

			4. 比较运算符
				> < >= <= == ===(全等于)
				* 比较方式
                  1. 类型相同：直接比较
                      * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
                  2. 类型不同：先进行类型转换，再比较
                      * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
             5. 逻辑运算符
				&& || !
				* 其他类型转boolean：
                   1. number：0或NaN为假，其他为真
                   2. string：除了空字符串("")，其他都是true
                   3. null&undefined:都是false
                   4. 对象：所有对象都为true
			
			6. 三元运算符
				? : 表达式
                 var a = 3;
		        var b = 4;
		
		        var c = a > b ? 1:0;
				* 语法：
					* 表达式? 值1:值2;
					* 判断表达式的值，如果是true则取值1，如果是false则取值2；
   
<title>一元运算符</title>
    <script>
        let num = 3;
        let a = ++ num ;

        document.write(num);// 4
        document.write(a); // 3 4
        document.write("<hr>");

        let b = +"123abc";
        document.write(typeof (b));
        document.write(b + 1);
        document.write("<hr>");

        let flag = + true;
        let f2 = + false;
        document.write(typeof (flag) + "<br>");//number
        document.write(flag + "<br>");// 1
        document.write(f2 + "<br>");// 0
    </script>

<title>算数运算符</title>
    <script>
        let a = 3;
        let b = 4;

        document.write(a+b +"<br>");
        document.write(a-b +"<br>");
        document.write(a*b +"<br>");
        document.write(a/b +"<br>");
        document.write(a%b +"<br>");
    </script>

    <title>比较运算符</title>
    <script>
        document.write((3 > 4) +"<br>");
        document.write(("abc" < "acd") +"<br>");
        document.write(("123" == 123) +"<br>");
        document.write(("123" === 123) +"<br>");
    </script>

<title>比较运算符</title>
    <script>
        let flag = true;
        document.write(flag+"<br>");
        document.write(!flag+"<br>");

        document.write("<hr>");
        //number
        let num = 3;
        let num2 = 0;
        let num3 = NaN;
        document.write(!!num+"<br>");
        document.write(!num+"<br>");

        document.write(!!num2+"<br>");
        document.write(!num2+"<br>");

        document.write(!!num3+"<br>");
        document.write(!num3+"<br>");

        /*while(1){

        }*/
        
        document.write("<hr>");
        
        //string
        let str1 = "abc";
        let str2 = "";
        document.write(!str1+"<br>");
        document.write(!!str1+"<br>");
        document.write(!str2+"<br>")
        document.write(!!str2+"<br>");
        document.write("<hr>");


        // null & undefined
        let obj = null;
        let obj2;
        document.write(!!obj+"<br>");
        document.write(!!obj2+"<br>");
        document.write("<hr>");

        // null & undefined
        let date = new Date();
        document.write(date+"<br>");
        document.write(!date+"<br>");
        document.write(!!date+"<br>");
        document.write("<hr>");
        
/*        obj = "123";
        if(obj.length > 0){//防止空指针异常
            alert(123);
        }
        //js中可以这样定义，简化书写。
        if(obj){//防止空指针异常
            alert(111);
        }*/
    </script>

<title>三元运算符</title>
    <script>
        let a = 3;
        let b = 4;

        let c = a > b ? 1:0;

        alert(c);
    </script>

1.6流程控制语句

		1. if...else...
		2. switch:
			* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
				* switch(变量):
					case 值:
			* 在JS中,switch语句可以接受任意的原始数据类型
		3. while
		4. do...while
		5. for
<title>for语句</title>
    <script>
       //1 ~ 100 求和  5050
       let sum = 50;
       for (let i = 1; i <= 100; i++){
           sum += i;
       }
        alert(sum);
    </script>

<title>switch语句</title>
    <script>
        let a = "other";
        switch (a){
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
            case true:
                alert("true");
                break;
            case null:
                alert("null");
                break;
            case undefined:
                alert("undefined");
                break;
            case "other":
                alert("other");
                break;
        }
    </script>      

<title>while语句</title>
    <script>
       //1 ~ 100 求和  5050
        let sum = 0;
        let num = 1;

        while (num <= 100){
            sum += num;
            num ++;
        }
        alert(sum);
    </script>

1.7JS特殊语法

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

2.基本对象

2.1Function：函数(方法)对象

1. 创建：
                1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
                2. 
                    function 方法名称(形式参数列表){
                        方法体
                    }

                3. 
                   var 方法名 = function(形式参数列表){
                        方法体
                   }
                   
            2. 方法：

            3. 属性：
                length:代表形参的个数
            4. 特点：
                1. 方法定义是，形参的类型不用写,返回值类型也不写。
                2. 方法是一个对象，如果定义名称相同的方法，会覆盖
                3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
                4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
            5. 调用：
                方法名称(实际参数列表);

<title>Function对象</title>
    <script >
        //1.创建方式1
        // let fun1 = new Function("a","b","c","alert(a);");
        //调用方法
       // fun1(3,4);
       // alert(fun1.length);
       //2. 创建方式2
/*        function fun2(a , b){
            alert(a + b);
        }
        fun2(1, 2);
        alert(fun2.length);*/

/*        let fun3 = function(a,b){
            alert(a+b);

        }
        alert(fun3.length);
        fun3(3,4);*/


/*        fun2 = function(a , b){
            alert(a - b);
        }*/

        // function fun2(a , b){
        //     alert(a - b);
        //     alert(a);
        //     alert(b);
        // }
        // fun2(3,4);

        //方法调用
        // fun2(1,2);
        // fun2(1);
        // fun2();
        // fun2(1,2,3);

        /*
         * 求两个数的和
         */
/*        function  add(a , b){
            return a + b;
        }*/
        /**
         * 求任意个数的和
         */
        function add (){
           let sum = 0;
            for (let i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

        let sum = add(1,2,3,4);
        alert(sum);
        add(1,3);

    </script>

2.2Array:数组对象

        1. 创建：
            1. var arr = new Array(元素列表);
            2. var arr = new Array(默认长度);
            3. var arr = [元素列表];
        2. 方法
            join(参数):将数组中的元素按照指定的分隔符拼接为字符串
            push()	向数组的末尾添加一个或更多元素，并返回新的长度。
        3. 属性
            length:数组的长度
        4. 特点：
            1. JS中，数组元素的类型可变的。
            2. JS中，数组长度可变的。

<script >
        //1.创建方式1
        let arr1 = new Array(1,2,3);
        let arr2 = new Array(5);
        let arr3 = [1,2,3,4];

        let arr4 = new Array();

        document.write(arr1 +"<br>");
        document.write(arr2 +"<br>");
        document.write(arr3 +"<br>");
        document.write(arr4 +"<br>");


       let arr = [1,"abc",true];
        document.write(arr +"<br>");

        document.write(arr[0] +"<br>");
        document.write(arr[1] +"<br>");
        document.write(arr[2] +"<br>");

        //document.write(arr[10] +"<br>");
        arr[10] = "hehe";
        document.write(arr[10] +"<br>");
        document.write(arr[9] +"<br>");

        //alert(arr.length);//11
        document.write(arr.join("--")+"<br>");
        arr.push(11);
        document.write(arr.join("--")+"<br>");
    </script>

2.3Boolean

2.4Date：日期对象

        1. 创建：
            var date = new Date();

        2. 方法：
            toLocaleString()：返回当前date对象对应的时间本地字符串格式
            getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
            
<title>Date对象</title>
    <script >
        let date = new Date();
        document.write(date + "<br>");
        document.write(date.toLocaleString() + "<br>");
        document.write(date.getTime() + "<br>");
    </script>

2.5Math：数学对象

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

        2. 方法：
            random():返回 0 ~ 1 之间的随机数。 含0不含1
            ceil(x)：对数进行上舍入。
            floor(x)：对数进行下舍入。
            round(x)：把数四舍五入为最接近的整数。
<title>Math对象</title>
    <script >
        document.write(Math.PI +"<br>");
        document.write(Math.random() +"<br>");
        document.write(Math.round(3.5) +"<br>");
        document.write(Math.round(-3.5) +"<br>");
        document.write(Math.round(-3.6) +"<br>");
        document.write(Math.ceil(3.14) +"<br>");
        document.write(Math.floor(3.14) +"<br>");
        /**
         * 取 1~100之间的随机整数
         *      1. Math.random()产生随机数：范围 [0,1)小数
         *      2. 乘以 100 --> [0,99.9999] 小数
         *      3. 舍弃小数部分 ：floor --> [0,99] 整数
         *      4. +1 -->[0,99] 整数 [1,100]
         *
         *
         */
       let number =  Math.floor((Math.random() * 100)) + 1;
       document.write(number);
    </script>

2.6Number

2.7String

2.8RegExp

正则表达式对象，定义字符串的组成规则

			1. 正则表达式：定义字符串的组成规则。
			    1. 单个字符:[]
					如： [a] [ab] [a-zA-Z0-9_]
					* 特殊符号代表特殊含义的单个字符:
						\d:单个数字字符 [0-9]
						\w:单个单词字符[a-zA-Z0-9_]
				2. 量词符号：
					?：表示出现0次或1次
					*：表示出现0次或多次
					+：出现1次或多次
					{m,n}:表示 m<= 数量 <= n
						* m如果缺省： {,n}:最多n次
						* n如果缺省：{m,} 最少m次
				3. 开始结束符号
					* ^:开始
					* $:结束
             2. 正则对象：
				1. 创建
					1. var reg = new RegExp("正则表达式");
					2. var reg = /正则表达式/;
				2. 方法	
					1. test(参数):验证指定的字符串是否符合正则定义的规范	
                    
<title>RegExp对象</title>
    <script >
        //1.
        let reg = new RegExp("^\\w{6,12}$");
        //2.
        let reg2= /^\w{6,12}$/;


        let username = "123456";

        //验证
        let flag = reg.test(username);
        alert(flag);

        let flag2 = reg2.test(username);
        alert(flag2)

        if (typeof(username)){
            alert(username)
        }
    </script>

2.9Global

			1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。  方法名();
			2. 方法：
			    encodeURI():url编码
			    decodeURI():url解码

			    encodeURIComponent():url编码,编码的字符更多
			    decodeURIComponent():url解码

			    parseInt():将字符串转为数字
			        * 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
			    isNaN():判断一个值是否是NaN
			        * NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

			    eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
            3. URL编码
               zhiliandad =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

<title>Global对象</title>
    <script >
        let str = "http://www.baidu.com";
        let encode = encodeURI(str);
        document.write(encode +"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        let s = decodeURI(encode);
        document.write(s +"<br>");
        
        let str1 = "http://www.baidu.com?wd=传智播客";
        let encode1 = encodeURIComponent(str1);
        document.write(encode1 +"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        let s1 = decodeURIComponent(encode);
        document.write(s1 +"<br>");//传智播客
        let str3 = "a234abc";
        let number = parseInt(str);
        //alert(number + 1);
        
        let a = NaN;
        document.write(a === NaN +"<br>");
        document.write(isNaN(a));
        
        let jscode = "alert(123)";
        eval(jscode);
    </script>

九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td{
            border: 1px solid;
        }

    </style>

    <script>

        document.write("<table  align='center'>");


        //1.完成基本的for循环嵌套，展示乘法表
        for (let i = 1; i <= 9 ; i++) {
            //生成一行<tr>
            document.write("<tr>");
            for (let j = 1; j <=i ; j++) {
                //生成一列
                document.write("<td>");

                //输出  1 * 1 = 1
                document.write(i + " * " + j + " = " + ( i*j ) +"&nbsp;&nbsp;");

                document.write("</td>");
            }
            /*//输出换行
            document.write("<br>");*/

            document.write("</tr>");
        }

        //2.完成表格嵌套
        document.write("</table>");

    </script>
</head>
<body>

</body>
</html>

BOM

Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象。有五种对象组成

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

1.窗口对象

1. 创建
2. 方法
     1. 与弹出框有关的方法：
        alert()	显示带有一段消息和一个确认按钮的警告框。
        confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
            * 如果用户点击确定按钮，则方法返回true
            * 如果用户点击取消按钮，则方法返回false
        prompt()	显示可提示用户输入的对话框。
            * 返回值：获取用户输入的值
     2. 与打开关闭有关的方法：
        close()	关闭浏览器窗口。
            * 谁调用我 ，我关谁
        open()	打开一个新的浏览器窗口
            * 返回新的Window对象
     3. 与定时器有关的方式
        setTimeout()	在指定的毫秒数后调用函数或计算表达式。
            * 参数：
                1. js代码或者方法对象
                2. 毫秒值
            * 返回值：唯一标识，用于取消定时器
        clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

        setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
        clearInterval()	取消由 setInterval() 设置的 timeout。

3. 属性：
    1. 获取其他BOM对象：
        history
        location
        Navigator
        Screen:
    2. 获取DOM对象
        document
4. 特点
    * Window对象不需要创建可以直接使用 window使用。 window.方法名();
    * window引用可以省略。  方法名();

<body>
    <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">

    <script>
        // alert("hello window");
        // window.alert("hello a")
         //确认框
         // var flag = confirm("您确定要退出吗？");
         //
         // if(flag){
         //     //退出操作
         //     alert("欢迎再次光临！");
         // }else{
         //     //提示：手别抖...
         //     alert("手别抖...");
         // }

               //输入框
       // var result =  prompt("请输入用户名");
       // alert(result);

        //打开新窗口
        var openBtn = document.getElementById("openBtn");
        var newWindow;
        openBtn.onclick = function(){
            //打开新窗口
            newWindow = open("https://www.baidu.com");
        }

        // var closeBtn = document.getElementById("closeBtn");
        // let cloWindow
        // closeBtn.onclick = function (){
        //     cloWindow = open("https://gitee.com")
        // }

        //关闭新窗口
        var closeBtn = document.getElementById("closeBtn");
        closeBtn.onclick = function(){
           // 关闭新窗口
            newWindow.close();
        }

       //一次性定时器
       // setTimeout("fun();",2000);
       //  var id = setTimeout(fun,2000);
       //  clearTimeout(id);
       //  function fun(){
       //      alert('boom~~');
       //  }

        //循环定时器
        // var id = setInterval(fun,2000);
        // clearInterval(id);


       //获取history
       // var h1 =  window.history;
       // var h2 = history;
       //
       // alert(h1);
       // alert(h2);
        var openBtn = window.document.getElementById("openBtn");
        alert(openBtn);
        // document.getElementById("");
    </script>
</body>

2.地址栏对象

1. 创建(获取)：
	1. window.location
	2. location

2. 方法：
	* reload()	重新加载当前文档。刷新
3. 属性
	* href	设置或返回完整的 URL。
    
<body>
    <input type="button" id="btn" value="刷新">

    <input type="button" id="goItcast" value="去lj">
    <script>
        //reload方法，定义一个按钮，点击按钮，刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick = function(){
            //3.刷新页面
            location.reload();
        }


        //获取href
        var href = location.href ;
        //alert(href);
        //点击按钮，去访问www.itcast.cn官网
        //1.获取按钮
        var goItcast = document.getElementById("goItcast");
        //2.绑定单击事件
        goItcast.onclick = function(){
            //3.去访问www.itcast.cn官网
            location.href = "https://www.baidu.com";
        }

    </script>
</body>

3.历史记录对象

    1. 创建(获取)：
        1. window.history
        2. history

    2. 方法：
        * back()	加载 history 列表中的前一个 URL。
        * forward()	加载 history 列表中的下一个 URL。
        * go(参数)	加载 history 列表中的某个具体页面。
            * 参数：
                * 正数：前进几个历史记录
                * 负数：后退几个历史记录
    3. 属性：
        * length	返回当前窗口历史列表中的 URL 数量。
        
<body>
    <input type="button" id="btn" value="获取历史记录个数">
    <a href="09_History对象2.html">09页面</a>
    <input type="button" id="forward" value="前进">
<script>
    //1.获取按钮
    var btn = document.getElementById("btn");
    //2.绑定单机事件
    btn.onclick = function(){
        //3.获取当前窗口历史记录个数
        var length = history.length;
        alert(length);
    }

    //1.获取按钮
    var forward = document.getElementById("forward");
    //2.绑定单机事件
    forward.onclick = function(){
       //前进
       // history.forward();
        history.go(1)
    }
</script>
</body>

<body>
    <img id="img" src="img/banner_1.jpg" width="100%">
    <input type="button" id="back" value="后退">
    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。
         */
        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }

        //2.定义定时器
        setInterval(fun,3000);
        //1.获取按钮
        var back = document.getElementById("back");
        //2.绑定单机事件
        back.onclick = function(){
            //后退
           // history.back();
            history.go(-1);
        }
    </script>
</body>

DOM

Document Object Model 文档对象模型

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

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

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

DOM树

在这里插入图片描述

1.核心DOM模型

1.1Document文档对象

	1. 创建(获取)：在html dom模型中可以使用window对象来获取
		1. window.document
		2. document
	2. 方法：
		1. 获取Element对象：
			1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一
			2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
			3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
			4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
		2. 创建其他DOM对象：
			createAttribute(name)
        	createComment()
        	createElement()
        	createTextNode()

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div class="cls1">div4</div>
    <div class="cls1">div5</div>
    <input type="text" name="username">
<script>
    //2.根据元素名称获取元素对象们。返回值是一个数组
    var divs = document.getElementsByTagName("div");
    // alert(divs.length);5
    //3.根据Class属性值获取元素对象们。返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
   // alert(div_cls.length);2
    //4.根据name属性值获取元素对象们。返回值是一个数组
    var ele_username = document.getElementsByName("username");
    // alert(ele_username.length);1
    var table = document.createElement("table");
    // alert(table);[object HTMLTableElement]
</script>
</body>

1.2Element元素对象

        1. 获取/创建：通过document来获取和创建
		2. 方法：
			1. removeAttribute()：删除属性
			2. setAttribute()：设置属性
            
<body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">
<script>
    //获取btn
    var btn_set = document.getElementById("btn_set");
    btn_set.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https://www.baidu.com");
    }

    //获取btn
    var btn_remove =document.getElementById("btn_remove");
    btn_remove.onclick = function() {
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }
</script>
</body>

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

        1. 特点：所有dom对象都可以被认为是一个节点
		2. 方法：
			* CRUD dom树：
				* appendChild()：向节点的子节点列表的结尾添加新的子节点。
				* removeChild()	：删除（并返回）当前节点的指定子节点。
				* replaceChild()：用新节点替换一个子节点。
		3. 属性：
			* parentNode 返回节点的父节点。
            
<body>
    <div id="div1">
        <div id="div2">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>
    //1.获取超链接
    let element_a = document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick = function(){
        let div1 = document.getElementById("div1");
        let div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

    //1.获取超链接
    let element_add = document.getElementById("add");
    //2.绑定单击事件
    element_add.onclick = function(){
        let div1 = document.getElementById("div1");
       //给div1添加子节点
        //创建div节点
        let div3 = document.createElement("div");
        div3.setAttribute("id","div3");

        div1.appendChild(div3);
    }
    let div2 = document.getElementById("div2");
    let div1 = div2.parentNode;
    // alert(div1);
</script>
</body>

2.HTML DOM

	1. 标签体的设置和获取：innerHTML
	2. 使用html元素对象的属性
	3. 控制元素样式
		1. 使用元素的style属性来设置
			如：
				 //修改样式方式1
		        div1.style.border = "1px solid red";
		        div1.style.width = "200px";
		        //font-size--> fontSize
		        div1.style.fontSize = "20px";
		2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
        
<body>
    <div id="div1">div</div>
    <script >
        var div = document.getElementById("div1");
        var innerHTML = div.innerHTML;
        // alert(innerHTML);
        //div标签中替换一个文本输入框
       div.innerHTML = "<input type='text'>";
        //div标签中追加一个文本输入框
        // div.innerHTML += "<input type='text'>";
    </script>
</body>

3.DOM案例

控制html文档的内容
获取页面标签(元素)对象：Element

document.getElementById("id值"):通过元素的id获取元素对象

操作Element对象

	1. 修改属性值：
		1. 明确获取的对象是哪一个？
		2. 查看API文档，找其中有哪些属性可以设置
	2. 修改标签体内容：
		* 属性：innerHTML
		1. 获取元素对象
		2. 使用innerHTML属性修改标签体内容

事件监听机制

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

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

1.点击事件

	1. onclick：单击事件
	2. ondblclick：双击事件
	
    <script>
        //2.加载完成事件  onload
        window.onload = function(){
            // 3.绑定鼠标点击事件
            document.getElementById("username").onmousedown = function(event){
               // alert("鼠标点击了....");
                alert(event.button);
            }
        }
    </script>

2.焦点事件

	1. onblur：失去焦点
	2. onfocus:元素获得焦点。
<script>
        window.onload = function(){
            // 1.失去焦点事件
            document.getElementById("username").onblur = function(){
                alert("失去焦点了...");
            }
</script>

3.加载事件

	1. onload：一张页面或一幅图像完成加载。
    <script>
        //2.加载完成事件  onload
        window.onload = function(){}
</script>

4.鼠标事件

	1. onmousedown	鼠标按钮被按下。
	2. onmouseup	鼠标按键被松开。
	3. onmousemove	鼠标被移动。
	4. onmouseover	鼠标移到某元素之上。
	5. onmouseout	鼠标从某元素移开。
    <script>
        window.onload = function(){}
            // 4.鼠标移到某元素之上
            document.getElementById("username").onmouseover = function(){
                alert("鼠标来了....");
            }
            // 1.鼠标按钮被按下
            document.getElementById("username").onmousedown = function(event){
               // alert("鼠标点击了....");
                alert(event.button);
            }
        }

5.键盘事件

	1. onkeydown	某个键盘按键被按下。	
	2. onkeyup		某个键盘按键被松开。		
	3. onkeypress	某个键盘按键被按下并松开。

    <script>
        //2.加载完成事件  onload
        window.onload = function(){
            //1. onkeydown某个键盘按键被按下。
            document.getElementById("username").onkeydown = function(event){
                alert("鼠标点击了....");
               alert(event.button);
                if(event.keyCode == 13){
                    alert("提交表单");
                }
            }
    </script>

6.选择和改变

	1. onchange	域的内容被改变。
	2. onselect	文本被选中。

    <script>
        window.onload = function(){
            document.getElementById("username").onchange = function(event){
                alert("改变了...")
            }
        }
    </script>

7.表单事件

    1.onsubmit确认按钮被点击。
    2.onreset重置按钮被点击。
    <script>
        window.onload = function(){
            document.getElementById("form").onsubmit = function(){
                //校验用户名格式是否正确
                var flag = false;
                return flag;
            }
        }
    </script>

<body>
<form action="#" id="form" onclick="return  checkForm();">
<input name="username" id="username">
<select id="city">
    <option>--请选择--</option>
    <option>北京</option>
    <option>上海</option>
    <option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>