# JS总结

## 一、变量

1. ### 程序运行过程中，其值是可以改变的。

```
// 声明变量 并赋值 变量的初始化
        var age = 8;
```

## 二、常用数据类型

1. ### 基础数据类型

   - Boolean Number String undefined null

   ```js
   // Boolean 布尔类型
       var a1 = true;
       console.log(a1,typeof(a1))
   
       
       // Number 数据类型
       var num = 0b001;
       var num = 0o007;
       var num = 0xff;
       var num = 3.13;
       var num = 1000;
       // Infinity 无穷大
       var num = 3.13e99999999999999999999;
   
       // -Infinity 负无穷大
       var num = -3.13e99999999999999999999;
       console.log(num,typeof(num))
   
       // NaN => not a number 不是一个数字
       /* 
           NaN 和任何数字计算都是 NaN
           与NaN作比较 除了 NaN != NaN 为真 其余都为假
       */
       var num = NaN + 1
   
   
   
       // string 字符串类型
   
       // '' 
       var string = 'i love you ';
       // "" 
       var string = "你好 世界";
       // `` 1.支持跨行 2.解析变量
       // 1.支持换行
       var string = `
       <ul>
           <li> 11 </li>
       </ul>  
       
       // undefined    未定义类型
       var a;
       console.log(a,typeof(a));
   ```

   

2. ### 引用数据类型

```js
// 2.解析变量 ${变量名}
    var name = "你好 世界";
    var string = `${name}`

    console.log(string,typeof(string))



    // object 对象类型
    // 1.定义一个空对象
    var obj = new Object();
    var obj = {};

    //2.js对象
    var obj = {"a":1,"b":2};
    console.log(obj,typeof(obj))

    // 3. js 对象 可以在类外添加成员
    obj.name = "张三";
    console.log(obj,typeof(obj))

    // 4.js对象（数组格式）
    var arr = new Array();
    var arr = [];
    arr[0] = 10;
    arr[1] = 11;
    arr[2] = 12;
    console.log(arr,typeof(arr));


    // function函数类型
    function func(){
        console.log("我是函数",typeof(func));
    }
    func()




    // null 
    var a = null;
    console.log(a,typeof(a));
```

## 三、运算符

JavaScript的运算符按运算符类型可以分为以下5种：

（1）算术运算符；

（2）比较运算符；

（3）赋值运算符；

（4）逻辑运算符；

（5）条件运算符；

1. ### 算术运算符

   - 

   - | 运算符 | 描述           | 实例                    |
     | ------ | -------------- | ----------------------- |
     | +      | 加             | 10 + 20 =30             |
     | -      | 减             | 10 - 20 =-10            |
     | *      | 乘             | 10 * 20 =200            |
     | /      | 除             | 10 / 20 =0.5            |
     | %      | 取余数（取模） | 返回出发的余数 9 % 2 =1 |

2. ### 比较运算符

   | 运算符名称 | 说明                        | 案例        | 结果  |
   | ---------- | --------------------------- | ----------- | ----- |
   | <          | 小于号                      | 1 < 2       | true  |
   | >          | 大于号                      | 1 > 2       | false |
   | >=         | 大于等于号(大于或者等于)    | 2 >= 2      | true  |
   | <=         | 小于等于号(小于或者等于)    | 3 <= 2      | false |
   | ==         | 判等号(会转型)              | 37 == 37    | true  |
   | !=         | 不等号                      | 37 != 37    | false |
   | === !==    | 全等 要求值和数据类型都一致 | 37 === ‘37’ | false |

3. ### 逻辑运算符

   | 运算符名称 | 说明                        | 案例        | 结果  |
   | ---------- | --------------------------- | ----------- | ----- |
   | <          | 小于号                      | 1 < 2       | true  |
   | >          | 大于号                      | 1 > 2       | false |
   | >=         | 大于等于号(大于或者等于)    | 2 >= 2      | true  |
   | <=         | 小于等于号(小于或者等于)    | 3 <= 2      | false |
   | ==         | 判等号(会转型)              | 37 == 37    | true  |
   | !=         | 不等号                      | 37 != 37    | false |
   | === !==    | 全等 要求值和数据类型都一致 | 37 === ‘37’ | false |

4. ### 赋值运算符

   | 赋值运算符 | 说明                 | 案例                        |
   | ---------- | -------------------- | --------------------------- |
   | =          | 直接赋值             | var usrName = ‘我是值’      |
   | += ，-=    | 加，减一个数后再赋值 | var age = 10； age+=5；//15 |
   | *=，/=，%= | 成，除，取模后再赋值 | var age = 2; age*=5; //10   |

5. ### 条件运算符

   ```js
    &&  ||  !  =>   and or not 
   ```

6. ### 运算符优先级

   | 优先级 | 运算符     | 顺序                          |
   | ------ | ---------- | ----------------------------- |
   | 1      | 小括号     | ()                            |
   | 2      | 一元运算符 | ++ – ！                       |
   | 3      | 算数运算符 | **先 \* / 后 + -**            |
   | 4      | 关系运算符 | **>, >= , < , <=**,           |
   | 5      | 相等运算符 | ，！=，=，！==                |
   | 6      | 逻辑运算符 | **先 && 后 \|\|（先与后或）** |
   | 7      | 赋值运算符 | =                             |
   | 8      | 逗号运算符 | ，                            |

## 四、流程控制语句

1. ### 分支结构：单向分支 双项分支 多项分支 巢状分支

   1. if分支

   ```js
   // 1. 单项分支：
           var a = 19;
           if(a == 19){
               alert("你好 北京")
           }
       
   
       // 2.双项分支
           var b = 80;
           if(b == 80){
               alert("你好 北京");
           }else{
               alert("你好 世界")
           }
   
       // 3. 多项分支
           var c = 90;
           if(c == 90){
               alert("你好 世界");
           }else if(c > 90){
               alert("你好 北京");
           }else if(c < 90){
               alert("你好 上海");
           }
   
           // 4.巢状分支
           var youqian = true;
           var youfang = true;
           if(youqian){
               if(youfang){
                   console.log("该结婚了")
               }
           }
   ```

   2. ### Switch分支

      ```js
      var date = new Date();
              console.log(date);
              var week = date.getDay();
              console.log(week);
      
              switch(week){
                  case 1:
                      console.log('星期一');
                  case 2:
                      console.log('星期二');
                  case 3:
                      console.log('星期三');
                  case 4:
                      console.log('星期四');
              }
      ```

      

   3. ### while循环

      - while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
        while语句的语法结构如下：

      ```js
      while (条件表达式) {
          // 循环体代码 
      }
      
      ```

      - **执行思路：**
        1. 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
        2. 执行循环体代码
        3. 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束
      - **注意：**
        1. 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
        2. while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

   4. ### do...while和while...do

      do... while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
      do... while 语句的语法结构如下：

      ```js
      do {
          // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
      } while(条件表达式);
      
      ```

      - **执行思路**
        1. 先执行一次循环体代码 
        2. 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
      - 注意
        1. 先再执行循环体，再判断，我们会发现 do…while 循环语句**至少会执行一次循环体**代码

   5. ### 循环总结

      - JS 中循环有 for 、while 、 do while 
      - 三个循环很多情况下都可以相互替代使用
      - 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用 for
      - while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些 
      - while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行
      - while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体， 而 while 可能一次也不执行
      - 实际工作中，我们**更常用for 循环语句**，它写法更简洁直观， 所以这个要重点学习

   6. ### continue和break

      1. #### continue关键字

         - continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。
           例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

         - ```js
           for (var i = 1; i <= 5; i++) {
               if (i == 3) {
                   console.log('这个包子有虫子，扔掉');
                   continue; // 跳出本次循环，跳出的是第3次循环 
                }
                console.log('我正在吃第' + i + '个包子呢');
           }
           ```

      2. #### break关键字

         - break 关键字用于立即跳出整个循环（循环结束）。
           例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

         - ```js
           for (var i = 1; i <= 5; i++) {
              if (i == 3) {
                  break; // 直接退出整个for 循环，跳到整个for下面的语句
              }
              console.log('我正在吃第' + i + '个包子呢');
            }
           
           ```

      3. #### **注意**

         - **continue和break之后的代码都不会被执行**

## 五、命名规范

- ### 代码规范

  - 使用 4 个空格做为一个缩进层级
  - switch 下的 case 和 default 必须增加一个缩进层级。
  - 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。
  - 用作代码块起始的左花括号 { 前必须有一个空格。
  - if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格。
  - 在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格。
  - 函数声明、匿名函数表达式、函数调用中，函数名和 ( 之间不允许有空格。
  - **,** 和 **;** 前不允许有空格。不得省略语句结束的分号。
  - 在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中，单行声明的数组与对象，如果包含元素，() 和 [] 内紧贴括号部分不允许有空格。
  - 每个独立语句结束后必须换行。
  - 在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中，不允许在 , 或 ; 前换行。
  - 不同行为或逻辑的语句集，使用空行隔开，更易阅读。
  - 在 if / else / for / do / while 语句中，即使只有一行，也不得省略块 {...}。
  - 函数定义结束不允许添加分号。IIFE 必须在函数表达式外添加 (，非 IIFE 不得在函数表达式外添加 ( 。
  - 页面中script标签与左侧缩进4个空格，script标签内部的代码不缩进，与script在同一列



## 六、字符串及其相关方法

1. ### 字符串概述

   - 定义

     字符串就是用单引号或者双引号包裹起来的，零个或多个排列在一起的字符。

   - 用途

     JavaScript 字符串用于存储和处理文本。

   - 嵌套

     字符串可以嵌套。
     	在单引号包裹的字符串内部，应该使用双引号进行嵌套。
     	在双引号包裹的字符串内部，应该使用单引号进行嵌套。

   - 注意

     总之字符串嵌套不能够出现容易引起混淆的使用方式。

2. ### 转义字符

   - 定义

     用特殊的符号来替代在字符串当中，容易引起歧义的内容。

   - 特殊符号

     反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：

   - 

   - | \'   | 单引号      |
     | ---- | ----------- |
     | \"   | 双引号      |
     | \\   | 反斜杠      |
     | \n   | 换行        |
     | \r   | 回车        |
     | \t   | tab(制表符) |
     | \b   | 退格符      |
     | \f   | 换页符      |

3. ### 相关方法

   ```html
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>
       <script>
           var str = "hhellow"
           // 1.length属性 返回字符串的长度
           console.log(str.length);
   
           // 2.查找方法
           // 2.1 charAt(index) 返回指定位置(index)的字符
           console.log(str.charAt(2));
   
           // 2.2 charCodeAt(index) 返回指定位置(index)字符的Unicode编码
           console.log(str.charCodeAt(3));
   
           // 2.3 IndexOf(str,index)   从index位置往后查找 返回第一个符合条件的字符的下标
           // 不写index 默认从头开始查找  
           console.log(str.indexOf("l"));
           // 找不动返回 -1
           console.log(str.indexOf("z"));
   
           // 2.4 lastIndexOf(str,index)  从index位置开始往前查找 返回第一个符合条件的字符串的下标
           // 不写index 默认从末尾开始查找
           console.log(str.lastIndexOf("w"));
           // 找不动返回 -1
           console.log(str.indexOf("z"));
   
           // 2.5 search(str) 查找字符串 返回第一个符合条件字符的下标  找不到返回 -1
           //  只有一个str参数 不及indexOf()
           console.log(str.search("z"));
   
           // 2.6 match(str)   匹配字符串 返回匹配的数据[返回数组或者集合] 找不到返回null
           // 可匹配正则表达式 match(/正则表达式/修饰符 g:全局匹配(匹配多个) i:不区分大小写 m:多行匹配/)
           console.log(str.match("o")); //返回['o', index: 5, input: 'hhellow', groups: undefined]
           var str4 = "hhellow1"
           console.log(str4.match(/\d/g)); //   ['1']
   
   
           // 3.拼接字符串
           // 3.1 "+"号拼接
           console.log(str + "world");
   
           // 3.2 concat(str1,str2,str3.....)
           var str1 = "world"
           var str2 = "北京"
           console.log(str.concat(str1,str2));
           // console.log(str);    不改变原字符
   
           // 4.截取字符串
           // 4.1 substring(from,to)   从开始位置下标到结束位置下标 【左闭右开】
           console.log(str.substring(1,3));
           // 当只有一个一个参数时，表示从开始位置(from)截取到最后
           console.log(str.substring(1,));
           // 当from的值大于to时，自动调换位置
           console.log(str.substring(4,1));
   
           // 4.2 substr(from,步长)    从开始位置(from) 截取字符 长度为步长
           console.log(str.substr(1,4));
   
           // 5. trim()去掉字符串两边的空格
           var str3 = "  love you  "
           console.log(str3.trim());
   
           // 6. 大小写转换toUpperCase()和toLowerCase()
   
           // 7.本地顺序比较
           console.log(str.localeCompare(str3));
   
           // 8. replace("oldStr","newStr")   替换字符串
           // 只替换符合条件的第一个字符 全部替换需要循环替换
           console.log(str.replace("h","z")); 
           function replac(str,oldStr,newStr){
               while(str.lastIndexOf(oldStr) != -1){
                   str = str.replace(oldStr,newStr)
               }
               console.log(str);
           }
           replac(str,"h","z")
   
   
           // 9. split(str)分割字符串
           // 切割首尾字符 会返回一个空字符串
           // 切割空字符串 返回字符串的每一个字符
           console.log(str.split("w"));
       </script>
   </body>
   </html>
   ```

## 七、对象 - 数组及其方法

1. ```js
   // 数组是按照一定顺序排列的一组数 有序的数据集合 
           // 数据类型object 引用数据类型
           // 数组的本质是对象 数组是对象的一种特殊表现形式    typeof()返回object
           // 
   
           // 1. 定义一个数组 new可以省略
           var arr = new Array();
           // 当只传入一个参数是 会默认将其看成是长度
           var arr = new Array(10);
   
           var arr = new Array(1,2,3,4);
           var arr = [1,2,4,3];
   
           // 数组的长度
           arr.length
           // 注意：数组的长度可以赋值 空位置会填入empty
   
           // 当赋值的长度大于原长度   多余的长度用空位补全
           // 当赋值的长度小于原长度  多余的数组元素直接忽略
           // 当赋值为负数时   会报错 RangeError,取值范围错误
   
           // 数组的遍历
           // 第一种方法 此方法 i的数据类型为Number
           for(var i =0;i <= arr.length-1;i++){
               console.log(arr[i],typeof(i));
           }
   
           // 第二种方法 此方法直接拿到数组的下标 i的数据类型为string
           for(var i in arr){
               console.log(i,arr[i],typeof(i));
           }
           
           // 第三种方法  此方法 拿到的是数组的每一个元素 i的数据类型为元素的数据类型
           for(var i of arr){
               console.log(i,typeof(i));
           }
   
           // 数组的空位 
           // 两个逗号之间没有值，称为数组的空位
           // 注意：最后一个数组元素后面加逗号不会产生空位，建议不加
           // 查看空位的值 会返回 undefined
   ```

   

2. ```html
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <script>
           var arr = [1,2,3,4,5]
           // 1. isArray() 判断是否为数组 返回布尔值
           // 语法： Array.isArray(obj)
           console.log(Array.isArray(arr));
   
           // 2增
           // 2.1 push()末尾增加 返回数组增加后的长度
           console.log(arr.push(6),arr);   // 6
           console.log(arr.push(7,8,10));   // 9
   
           // 2.2 unshift() 头部增加一个或者多个元素 返回数组增加后的长度
           console.log(arr.unshift(0));    // 10
           // 当有两个参数时，表示在索引位置插入
           arr.unshift(1,11)
   
           // 2.3 直接根据索引添加元素
           // 允许在一个临时的索引值上插入数据 前面会添加empty
           console.log(arr[13] = 13,arr);
   
           // 2.4 concat()方法 在末尾迭代追加 返回新的数组
           console.log(arr.concat([11,12,13]));
           // console.log(typeof(arr.concat()));
   
           // 2.5 splice(index,0,boj1,boj2....) 返回空
           console.log(arr);
           console.log(arr.splice(1,0,"1111","111111"));
           console.log(arr);
   
           // 3. 删
           //3.1 pop() 删除尾部的最后一个元素 并返回该元素
           console.log(arr.pop());
           console.log(arr); // empty会保留
   
           // 3.2 shift() 删除数组的第一个元素 并返回该元素
           console.log(arr.shift(),arr);
   
           // 3.3 delet删除
           console.log(delete arr[arr.length - 1]); // 返回true
   
           // 3.4 splice(index,howmany)  从index位置删除几个
           // 返回删除元素的数组
           console.log(arr); 
           a = arr.splice(1,3)
           console.log(a); // ['111111', 11, 0]
           console.log(arr);
   
           // 4. slice(from,to) 数组切片
           // class slice(stop)
           // class slice(start, stop[, step])
           console.log(arr);
           console.log(arr.slice(3)); // 从头删除到索引位置为3的位置停止 不包括3
           console.log(arr);
           console.log(arr.slice(1,3)); // 左闭右开 返回删除元素的数组
           console.log(arr);
           console.log(arr.slice(-3,-2)); // 当参数为负数时 开始位置需要小于 结束位置
           // 5. 查 indexOf(value,index)和lastIndexOf(value,index)
           // 找不到返回-1
   
           // 6. join() 拼接 不改变原数组 返回拼接好的字符串
           console.log(arr);
           console.log(arr.join("-"));
           console.log(arr);
   
           // 7. reverse() 数组反转 改变原数组 返回新的数组
           console.log(arr.reverse());
           console.log(arr);
   
           // 8. sort()排序
           var arr1 = [1,2,3,4,5]
           arr1.reverse()
           console.log(arr1);
           console.log(arr1.sort());
       </script>
   </head>
   <body>
       
   </body>
   </html>
   ```


## 八、JS对象

1. ```html
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>对象</title>
       <script>
   
           // 1. 对象的定义
           // 对象是由大括号包含的无序的数据集合 由键值对组成 键值对由键名和键值 组成
           // obj = {key1:vaalue,key2:value,key3:value}
   
           // 键名可以称为对象的属性 对象的数据类型为：string 所以引号可以不加
           // 一下情况必须加引号：
           //          数字开头 
           //          包含特殊符号 例如：空格 * %等
           // 注意：尽量不要用关键字和保留字作为键名
   
           // 键值就是对象的属性所对应的具体的值
           // 键值可以为任意数据类型
           // 当键值为函数时 键名习惯称为方法
   
   
           // 2.对象的创建
           // 2.1 直接定义
           var obj = {
               key:'value',
               func:function(){}
           }
           // 2.2 new对象创建
           var obj = new Object()
           obj.name = "李华"
           obj.age = 17
           obj.func = function(){
               console.log(`我叫${obj.name},今年${obj.age}岁了`);
           }
   
           // 3.对象的读写
           // 操作对象都是操作对象的属性（键名）返回属性值（键值）
   
           // 3.1 对象名.属性（键名）
           obj.name
           console.log(obj.age);
   
           // 3.2 对象["属性"]
           console.log(obj["age"]);
   
           // 注意 一下情况必须使用[]
           // (1) 键名以数字开头或者包含特殊字符
           // (2) 键名为字符串变量时
   
           var girlFriend = {
               girlFriendName: "杨紫",
               age: 27,
               "sex": "女",
               "1where": "地球上"
           };
           console.log(girlFriend.girlFriendName);
           console.log(girlFriend['girlFriendName']);
           console.log(girlFriend.sex);
           // console.log(girlFriend.'1where'); // 会报错
           console.log(girlFriend['1where']);
   
           var obj = {
               a: 10,
               b: 20
           }
           var str = 'a';
           console.log(obj.str); // 相当于 obj.'a' 返回 undefined
           console.log(obj.a);
           console.log(obj[str]);
   
       </script>
   </head>
   <body>
       
   </body>
   </html>
   ```

## 九、函数

```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <script>
        // 1. 定义
        // 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

        // 2.特点
        // 可重复使用 拥有特定功能 闭合倒的代码块

        // 3. 创建
        // 方式一 :存在预加载机制 提前把函数加载到内存当中 然后代码整体在执行   即 可以先调用在定义
        var func = function(形参1，形参2....（可有可无）){ return（可有可无）}
        
        // 方式二：匿名函数 必须先定义 在调用
        var func2 = function(){
            console.log("111111");
        }
        func2()
        
        //方式三：创建一个函数对象 
        var func3 = new Function("alert('我是func3');alert('我是func3 哈哈')");
		func3()
        
        // 方式四：闭包函数
        function func5(){
            var a = 100;
            function func6(){
                console.log(a)
            }
            return func6
        }
        func = func5()
        func()
        
        // 方式五：箭头函数
        var mysum = (x,y) =>{
            return x + y;
        }
        console.log(mysum());
        
    	// 函数的调用：
		// 方式一 正常调用
        func()

        // 方式二 函数的立即执行
        (function func(){
            console.log("函数正在执行");
        })();

        //方式三 匿名函数的立即执行
        (function(){
            console.log("函数正在执行");
        })();

        // 方式四 
        !function(){
            console.log("函数正在执行");
        }();

        // 方式五
        波浪线function(){
            console.log("函数正在执行");
        }();
	

        // 4.作用域
        // 4.1变量的使用范围
        //  1）全局变量    存在任何地方，
        //      任何位置都可以使用全局变量
        //  2）局部变量    只能在局部使用
        // 4.2局部变量
        //  1）形参
        //  2）在函数内  直接  用var 声明的变量
        var b = 100
        function fun1(a) {//局部变量
            console.log(a); //5
            console.log(b); //100
            var c = 100;
            console.log(c);//100
        }
        fun1(5);
        console.log(c);//
        console.log(a);//报错

		
		// 收集函数的参数arguments 自动收集所有的实参
        function func8(){
            console.log(arguments)
        }
        func8(1,2,9,3,4,5,6)
    </script>
</head>
<body>
    
</body>
</html>
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象的遍历</title>
    <script>
        var boyFriend = {
            "boyFriendName": ["李现", '小明', 'Mary'],
            "age": 29,
            "sex": "男",
            "height": "180"
        };
        // 遍历
        for (var key in boyFriend) {
            console.log(key); // 拿到属性名
            console.log(boyFriend[key]); // 拿到属性值
        }

        // in的使用 判断该属性是否在对象中 返回布尔值

        console.log('age' in boyFriend); // true
        console.log('object_' in boyFriend); //false
        
    </script>
</head>
<body>
    
</body>
</html>
```



- ### 函数的重载

  - **js中没有函数的重载**	
  - **若函数名相同，先定义的函数会被后定义的函数替换**

  ```js
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <script>
          function func(n1,n2){
              console.log(n1,n2);
          }
  
          function func(n1,n2){
              console.log(n2,n1);
          }
  
          func(1,2)
  
          // arguments 获取函数的参数
  		// 利用arguments可以实现函数的重载
          function func1(){
              if(arguments.length == 2){
                  console.log(arguments,typeof arguments); // object
              }else{
                  console.log(typeof arguments);
              }
              console.log(arguments.callee); // 获取arguments对象所在的方法
          }
          func1(1,2)
  
          function func2(){
              var sum = 0;
              for(var i =0; i < arguments.length;i++){
                  sum += arguments[i]
              }
              return sum
          }
  
          console.log(func2(1,2,3,4,5));
  
          // 
          var res = (function(num){
              
          })
      </script>
  </body>
  </html>
  ```




- ### this关键字

  - 面向对象语言中 this 表示当前对象的一个引用。
  - 但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
    - 在方法中，this 表示该方法所属的对象。
    - 如果单独使用，this 表示全局对象。
    - 在函数中，this 表示全局对象
    - 在函数中，在严格模式下，this 是未定义的(undefined)。
    - 在事件中，this 表示接收事件的元素。
    - 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

  ```js
  var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
      return this.firstName + " " + this.lastName;
    }
  };
  
  // 方法中的 this
  // 在对象方法中， this 指向调用它所在方法的对象。
  // 在上面一个实例中，this 表示 person 对象。
  // fullName 方法所属的对象就是 person。
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
  
  // 单独使用 this
  // 单独使用 this，则它指向全局(Global)对象。
  // 在浏览器中，window 就是该全局对象为 [object Window]:
  var x = this;
  
  // 严格模式下，如果单独使用，this 也是指向全局(Global)对象。
  "use strict";
  var x = this;
  
  // 函数中使用 this（默认）
  // 在函数中，函数的所属者默认绑定到 this 上。
  // 在浏览器中，window 就是该全局对象为 [object Window]:
  function myFunction() {
    return this;
  }
  
  // 函数中使用 this（严格模式）
  // 严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
  "use strict";
  function myFunction() {
    return this;
  }
  
  // 事件中的 this
  // 在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：
  <button onclick="this.style.display='none'">
  点我后我就消失了
  </button>
  
  // 对象方法中绑定
  // 下面实例中，this 是 person 对象，person 对象是函数的所有者：
  var person = {
    firstName  : "John",
    lastName   : "Doe",
    id         : 5566,
    myFunction : function() {
      return this;
    }
  };
  
  
  
  
  
  ```

  

## 十、DOM

1. ### JavaScrip组成部分

   1. ECMAScript
      - JavaScript的核心
      - 规定了js的基础语法、变量、数据类型、运算法、分支结构、循环结构、数组、对象、函数等
   2. DOM（document object model 文档对象类型）
      - 一套用来管理HTMl文档的规则
   3. BOM（browser object model 浏览器对象模型）
      - 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

2. 节点（node）

   1. 定义：

      - DOM规定HTML中一切内容都称为节点

   2. 节点分类

      - 整个文档为文档节点	(document node)

        - 浏览器一加载HTML文档就会自动生成document节点
        - document节点也可以称为document对象
        - document节点是HTML文档的根节点

      - 所有元素为元素节点 （element node）

      - 所有文本为文本节点  （text node）

      - 所有属性为属性节点   （attribute node）

      - 所有注释为注释节点    (comment node)

        ```js
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <div></div>
            <div class="box" id="box" name = "box" value = "hellow world"> hellow world</div><!-- 注释-->
            <script>
                // 元素节点 1
        
                var div = document.querySelector("#box")
                console.log(div.ownerDocument);  // 获取该节点的文档节点
                console.log(div); 
                console.log(div.id);         // 获取元素节点的id属性
                console.log(div.nodeType);   // 获取节点类型 元素节点 返回1
                console.log(typeof div);    // 获取元素节点的数据类型 object
                console.log(div.nodeName);  // 获取元素节点的名称   大写 DIV
                console.log(div.nodeValue); // 获取元素节点的value属性
                console.log(div.attributes); // 获取元素节点的所有属性NameNodeMap 集合
                // {0: class, 1: id, 2: name, 3: value, class: class, id: id, name: name, value: value, length: 4}
        
                // 属性节点 2
                var value = div.attributes[0]
                console.log(value);  // 获取属性节点的class
                console.log(typeof value); // 获取属性节点的数据类型
                console.log(value.nodeType);    // 获取节点类型 属性节点 返回2
                console.log(value.nodeName);    // value 属性名
                console.log(value.nodeValue);   // 属性值
        
                // 文本节点 3
                var txt = div.firstChild;
                console.log(txt);  // 获取文本内容 加双引号
                console.log(typeof txt); // 获取节点的数据类型 object
                console.log(txt.nodeType);  // 获取节点的类型 文本节点 返回 3
                console.log(txt.nodeName);  // 获取节点的名称 #text
                console.log(txt.nodeValue);  // 获取文本内容 无双引号
        
                // 注释节点 8
                var com = div.nextSibling; // 获取下一个结点对象 prevousSibling 获取上一个节点对象
                console.log(com);   // 返回 <!-- 注释-->
                console.log(typeof com); // 返回object
                console.log(com.nodeType); // 返回节点类型 注释节点 8
                console.log(com.nodeValue); // 返回节点内容 注释
                console.log(com.nodeName);  // 返回节点名称 #comment
        
                // 文档节点 9
                console.log(document);  // #document
                console.log(typeof document); // object
                console.log(document.nodeType); // 返回9
                console.log(document.nodeName); //返回 #document
                console.log(document.nodeValue); // null
        
            </script>
        
        
        </body>
        </html>
        ```

        

   3. DOM中一切节点都有联系

      1. 父节点
      2. 子节点
      3. 兄弟节点

   4. document节点常用属性

      - 文档的标题
        - document.title
      - 文档本地路径
        - document.location.href

   5. 节点树

      ![image-20221107102636157](JS基础/image-20221107102636157.png)

      ![image-20221107102712729](JS基础/image-20221107102712729.png)

​		

## 十一、DOM对象的方法和属性

1. ### DOM属性

   - HTML DOM属性是节点（HTML元素）的值，可以获取或者设置

   - 编程接口

     - 可通过JavaScript（或者其他编程语言）对HTML DOM进行访问
     - 所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性
     - 方法是能够执行的动作 （增删改查）
     - 属性是能够获取和设置的值（节点的名称或内容）

   - nodeName

     - 规定节点的名称

   - nodeName是只读的 不可被修改

     - 元素节点的nodeName与标签名相同 且返回的大写 "DIV" "SPAN"
     - 文本节点的nodeName为 #text

   - 文档节点的nodeName为 #document

     - 注释节点的nodeName为 #comment

   - nodeValue

     - 元素节点的nodeValue为undefined或null
     - 文本节点的nodeValue是文本本身
     - 属性节点的nodeValue是属性的值

   - nodeType

     | 节点名称             | nodeType |
     | -------------------- | -------- |
     | 元素节点             | 1        |
     | 属性节点             | 2        |
     | 文本节点             | 3        |
     | 注释节点             | 8        |
     | document文本节点     | 9        |
     | documentType节点     | 10       |
     | documentFragment节点 | 11       |

   

2. ### 获取元素节点的方法

```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documment object model   dom 节点</title>
</head>
<body>
    <div id ="box">
        <p>
            <input type="text" name="" id="">
            <input type="password" name="" id="">
        </p>
        <p class = "p1">张三</p>
        <p class = "p2">李四</p>
        <p class = "p2">王五</p>
        <p class = "p4">赵六</p>
        <p name = "cs1">测试name1</p>
    </div>
    <div>
        用户名：<input type="text" name="username" id="">
        <br>
        密  码：<input type="password" name="pwd" id="">
        <br>
    </div>

    <script>
        console.log(document)
        // 1.通过id获取div节点对象 	返回带有指定 ID 的元素。
        var res = document.getElementById("box")
        console.log(res)

        // 2.通过class类获取节点对象  [返回的是数组].
		// 返回包含带有指定类名的所有元素的节点列表。
        var cla = document.getElementsByClassName("p2")
        console.log(cla)
        // 获取李四节点对象
        lisi = cla[0]
        console.log(lisi)
        // 获取王五对象
        wangwu = cla[1]
        console.log(wangwu)

        // 3.通过标签获取节点对象 [返回的是数组] 
		// 	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
        var res = document.getElementsByTagName("P")
        console.log(res[1])

        // 4.通过标签的name属性获取 [返回的是数组]
        var res = document.getElementsByName("username")[0]
        console.log(res)

        // 5.querySelector  通过css选择器(标签 类 id选择器)获取对应的元素节点  推荐
        var res = document.querySelector(".p1")
        console.log(res)

        // 6.querySelectorAll 获取所有找到的元素节点 返回数组
        var res = document.querySelectorAll("input [name=username]")[0]

    </script>
</body>

</html>
```

3. ### getElementsByTagName与querySelectorAll区别

getElementsByTagName可以动态获取页面的元素（通过js动态加入的元素节点） 返回的是HTMLcollection

- **HTMLCollection 是一个动态集合，DOM 树变化，HTMLCollection 也会随着变化**

querySelectorAll只能获取页面的静态元素 	返回的是NodeList

- **NodeList 是一个静态集合，其不受 DOM 树元素变化的影响**

```js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        var lis = document.getElementsByTagName('li');
        var lis2 = document.querySelectorAll('li');
        console.log(lis);  //	HTMLCollection(4) [li, li, li, li]
        console.log(lis2); //	NodeList(4) [li, li, li, li]


        // 给ul中添加一个新的li
        var newLi = document.createElement('li');
        console.log(newLi);
        newLi.innerHTML = '<i>我是新的li</i>';
        // newLi.innerText = '<i>我是新的li</i>';

        document.querySelector('ul').appendChild(newLi);
        console.log(lis);	// HTMLCollection(5) [li, li, li, li, li]
        console.log(lis2);	// NodeList(4) [li, li, li, li]
    </script>
</body>

</html>
```

4. ### 元素节点的内容操作

   - innerHTML

     -  innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>
     -  获取 标签 + 文本 是获取元素内容最简单的方法

   - innerText

     - innerText 属性可用于获取或改变任意HTML元素的字符串
       - 获取 文本


     ```js
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>修改内容</title>
     </head>
     <body>
         <button onclick="fun1()">修改内容</button>
         <button onclick="fun2()">清空内容</button>
         <div id="box" style="border: 1px solid red;">
             <p>最帅的<a href="">最有味道</a>的男人</p>
         </div>
         <script>
             // innerHTML 获取标签里面的所有内容 [标签+文本]
             // innerText 获取标签里面的所有字符串 [文本]
     
             var p = document.querySelector("#box p")
             function fun1(){
                 // var content = p.innerHTML;
                 var content = p.innerText;
                 console.log(content);
         
                 p.innerHTML = "我被修改了1 <a href=''>点我</a>"
                 // p.innerText = "我被修改了2"
     
             }
     
             function fun2(){
                 p.innerHTML = ""
             }
         </script>
     </body>
     </html>
     ```

5. ### 属性节点的操作

   - 获取属性值

     ```js
     <!DOCTYPE html>
     <html lang="en">
     
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Document</title>
         <style>
             #box {
                 width: 200px;
                 height: 200px;
                 background: blue;
             }
         </style>
     </head>
     
     <body>
         <div id="box" a="100" class="sty" title="hello"></div>
     
         <script>
             var div = document.querySelector('#box');
             // console.log(div);
     
             // 获取元素节点的属性的四种方法
             // div.属性名称      
             console.log(div.id);  
             console.log(div.a); // 只能获取元素的自带属性 不能获取到自定义属性
     
             // div['属性值']
             console.log(div['id'])
             console.log(div['a']) // 只能获取元素的自带属性 不能获取到自定义属性
     
             // 利用getAttribute('属性名称') 获取属性值
             console.log(div.getAttribute('id'))
             console.log(div.getAttribute('a')) // 此方法可获取自定义属性
     
     
             // 利用attributes属性，获取属性节点
             var attrs = div.attributes;
             console.log(attrs);
             console.log(attrs[0]); // 通过索引可获取属性名称对应的属性值
     
     
             // 利用getAttributeNode('属性名称')方法，获取属性节点
             var res = div.getAttributeNode('class');
             var result = div.getAttributeNode('a');
             console.log(result);
             console.log(res);
     
             console.log(res.nodeType); // 返回2 属性节点
     
         </script>
     </body>
     
     </html>
     ```

   - #### 属性值的增加 修改 删除 判断

     ```js
     <!DOCTYPE html>
     <html lang="en">
     
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Document</title>
     </head>
     
     <body>
         <div id="box" class="sty" title="ok" color="red" b="'200"></div>
     
         <script>
             var div = document.querySelector('div');
     
             // 设置
     	   // 利用setAttribute("属性名","属性值")
             div.setAttribute('title', 'world');
             console.log(div.getAttribute('title'));
     
     
             // div.a = 100;//点语法不支持自定义属性
             // console.log(div);
             // console.log(div.a);
     
             div.setAttribute('a', 100)
             console.log(div);
             // console.log(div.a);
             console.log(div.getAttribute('a'));
     
     
     
             // // var obj1 = document.querySelector('div');
             // // console.log(obj1['a']);
             // div['a'] = 100;
             // console.log(div.a);
             // div.setAttribute('a', 100);
             // console.log(div.getAttribute('a'));
     
             console.log(div.class);
             console.log(div.className);
             console.log(div['className']);
             console.log(div.getAttribute('class'));
             // div.setAttribute('title', 'world');//改
             // console.log(div.getAttribute('title'));//查
             // // div.removeAttribute('title');//删
             // var res = div.hasAttribute('title');//判断
             // console.log(res);
             // var attr = div.getAttributeNode('title')
             // console.log(attr);
             // // div.removeAttributeNode(attr)
             // var res = div.hasAttribute('title');//判断
             // console.log(res);
             console.log(div.removeAttribute('title'));
         </script>
     </body>
     
     </html>
     ```

6. ### 节点的关系

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   
   <body>
       <ul>
           hahaha
           <li>我是第1个li</li>
           <li>我是第2个li</li>
           <li id="box">我是第3个li</li>
           <li>我是第4个li</li>
           <li>我是第5个li</li>
       </ul>
   
       <script>
           var ul = document.querySelector('ul');
           console.log(ul);
           console.log(ul.childNodes);//获取所有子节点
           console.log(ul.firstChild);
           console.log(ul.lastChild);
           console.log(ul.parentNode.parentNode);
           var box = document.querySelector('#box');
           console.log(box.nextSibling);
           console.log(box.previousSibling)
   
           console.log(box.firstChild)
           console.log(box.innerHTML);
           console.log(box.innerText);
       </script>
   </body>
   
   </html>
   ```

7. ### 元素节点的关系

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   
   <body>
       <div id="box"></div>
       <ul>
           <li>1</li>
           <li>2</li>
           <!-- hahahah -->
           <span>123456</span>
           <li id="myli">3</li>
           <li>4</li>
           <li>5</li>
       </ul>
   
       <script>
           var box = document.querySelector('#box');
           console.log(box.parentNode.parentNode.parentNode); // #document
           console.log(box.parentElement.parentElement);       // html
           console.log(box.parentElement.parentElement.parentElement); //null
   
           var ul = document.querySelector('ul');
   
           console.log(ul.childNodes);     // 获取子元素的所有节点
           console.log(ul.children);       // 获取子元素的所有元素节点
   
           console.log(ul.firstChild);     // 获取第一个子元素的节点 #text
           console.log(ul.firstElementChild);  // 获取第一个子元素的元素节点 li
   
           console.log(ul.lastChild);
           console.log(ul.lastElementChild);
   
           var myli = document.querySelector('#myli');
   
           console.log(myli.nextSibling);      // 获取该元素的下一个节点  #text
           console.log(myli.nextElementSibling);   // 获取该元素的下一个元素节点 li
   
           console.log(myli.previousSibling);      // 获取该元素的上一个节点 #text
           console.log(myli.previousElementSibling);   // 获取该元素的上一个元素节点 span
       </script>
   </body>
   
   </html>
   ```

8. ### 根节点

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   
   <body>
       <div id="box"></div>
       <a name="" href="www.baidu.com">1</a>
       <a name="">2</a>
       <a>3</a>
       <form action=""></form>
       <form action=""></form>
       <form action=""></form>
       <img src="img.png" alt="">
       <img src="img.png" alt="">
       <img src="img.png" alt="">
   
       <script></script>
       <script></script>
       <script></script>
       <script></script>
       <script>
           // 根节点
           console.log(window.document);
   
           var div = document.querySelector('#box');
           console.log(div.ownerDocument);
   
           // 文档类型声明
           console.log(document.doctype);
   
           // 根元素
           var html = document.documentElement;
           console.log(html);
   
           // body节点
           var body = document.body;
           console.log(body);
   
           // head节点
           var head = document.head;
           console.log(head);
   
           // anchors：获取带有name属性的a标签
           var res = document.anchors;
           console.log(res);
   
           // forms：获取所有的form标签
           var res = document.forms;
           console.log(res);
   
           // images：获取所有的image标签
           var res = document.images;
           console.log(res);
   
           // links：获取带有href属性的a
           var res = document.links;
           console.log(res);
   
           // scripts：获取所有的script标签
           var res = document.scripts;
           console.log(res);
       </script>
   </body>
   
   </html>
   ```

9. ### JS控制CSS的相关操作

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   
   <body>
       <div id="box" style="color:red; font-size:100px; font-weight:bold">hello</div>
   
       <script>
           // 获取div
           var div = document.querySelector('#box');
   
           // 获取div的style属性的值
   	   // element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；
           var obj = div.style;
           console.log(obj);
           console.log(obj.color);
           console.log(obj.fontSize);
           console.log(obj.fontWeight);
   
           div.style.color = 'blue';
           div.style.fontSize = '720px';
           div.style.backgroundColor = 'yellow';
   
   		// 利用window.getComputedStyle方法获取内部或外部样式表对象
           var obj = window.getComputedStyle(div, null);
           div.style.color = 'green'
           div.style.background = 'yellow'
           console.log(obj.color);
           div.style = '  width: 200px;\
               height: 200px;\
               background: blue;\
               color: red;\
               font - size: 72px; '
           console.log(div.style.cssText);
           div.style.cssText = '  width: 200px;\
               height: 200px;\
               background: blue;\
               color: red;\
               font-size: 72px; '
           console.log(obj.fontSize);
   
           var res = div.currentStyle;
           console.log(res);	// 返回undefined说明使用的非IE浏览器
           // console.log(res.color);
           console.log(res.fontSize);
   
           console.log(res);
       </script>
   </body>
   
   </html>
   ```

10. ### 获取内部样式和外部样式的兼容性写法

    ```js
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #box {
                width: 200px;
                height: 200px;
                background: blue;
                color: red;
                font-size: 72px;
            }
    
            .content {
    
                width: 200px;
                height: 200px;
                background: blue;
                font-size: 72px;
                color: green;
            }
    
            .active {
                width: 200px;
                height: 200px;
                background: blue;
                font-size: 72px;
                color: orange;
            }
        </style>
    </head>
    
    <body>
        <div class="content">112345678</div>
    
        <script>
            var div = document.getElementsByTagName('div')[0];
            console.log(div.className);
            div.className = 'active'
            定义一个方法，该方法的功能是获取内部样式和外部样式，适用于任何浏览器
            function getStyle(ele, cssName) {
                // 判断是哪个浏览器打开的该页面
                if (ele.currentStyle == undefined) {//谷歌浏览器
                    return window.getComputedStyle(ele, null)[cssName];
                } else {// IE浏览器
                    return ele.currentStyle[cssName];
                }
            }
    
            var div = document.getElementById('box');
    
            var res = getStyle(div, 'font-size');
            console.log(res);
    
            div.style.color = 'yellow';
            div.style.fontWeight = 'bold';
            div.style.fontStyle = 'italic';
            div.style.borderRadius = '50%';
            div.style.fontSize = '36px';
            div.style.textAlign = 'center';
            div.style.lineHeight = '200px';
    
    
            // 设置样式时的简单写法
            div.style.cssText = 'color:yellow; font-weight:bold; font-style:italic';
        </script>
    </body>
    
    </html>
    ```

11. #### 创建元素节点的相关操作

    - 创建 添加（插入）元素节点
      - document.createELement() 创建元素节点
      - 父元素节点.appendChild(子元素节点)
      - 元素节点1.insertBefoe(元素节点2)     节点1前插节点2
      - 根据insertBefore()方法 重写后插方法

    ```js
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div class="box">helloworld</div>
        <script>
            // 创建一个div节点
            var div = document.createElement('div');
            // div.innerHTML = '<p></p>';
            // document.body.innerHTML = div;
    		
    		// insert 前插元素节点
            document.body.insertBefore(div, document.getElementsByClassName('box')[0])
    		
    		// appendChild() 元素末尾追加
            document.body.appendChild(div);
            // div.innerText = '<p></p>';
            // div.innerText = 'helloworld'
            // console.log(div);
            // console.log(typeof div);
    
            // var res = document.body.appendChild(div);
            // // var res = document.body.insertBefore(div);
            // console.log(res);
    
    
    		// 重写后插方法
    		function insertAfter(ele, targetEle) {
                var parentEle = targetEle.parentElement;	// 获取目标元素的父节点
                if (parentEle.lastElementChild == targetEle) {
                    parentEle.appendChild(ele)
                } else {
                    // 得到目标元素的下一个结点
                    parentEle.insertBefore(ele, targetEle.nextElementSibling)
                }
                return ele
            }
        </script>
    
    </body>
    
    </html>
    ```

    - 插入大量元素时 innerHTMl和createELement的对比

      如果使用innerHTMl插入大量元素标签时，会消耗大量的时间

      - 如果追加插入大量元素时，可先将追加内容存入数组，这样会节省大量时间

      使用createElement插入元素较快

12. ### 移除元素节点  

    - 用法：父元素节点.removeChild(删除的节点)

      ```js
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
              li {
                  line-height: 2em;
                  background: red;
                  margin-bottom: 3px;
              }
          </style>
      </head>
      
      <body>
          <ul>hahaqh<li>1</li>
              <li id="box">2</li>
              <li>3</li>
          </ul>
      
          <script>
              // 为li添加点击事件
              var lis = document.querySelectorAll('li');
      
              for (var i = 0; i < lis.length; i++) {
                  lis[i].onclick = function () {
                      console.log('hello');
                  };
              }
              // 删除第二个li
              var ul = document.querySelector('ul');
              var box = document.querySelector('#box');
      
              var res = ul.removeChild(box);
      
              ul.appendChild(res);
              console.log(res);
          </script>
      </body>
      
      </html>
      ```

13. ### 克隆节点 cloneNode()

    ```js
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #box {
                width: 200px;
                height: 200px;
                background: red;
            }
    
            div {
                margin-bottom: 5px;
            }
        </style>
    </head>
    
    <body>
        <div id="box">
            <p><span>hello</span></p>
        </div>
    
        <script>
            // 克隆div
            var div = document.querySelector('#box');
    
            div.onclick = function () {
                console.log('123');
            };
    
            var res = div.cloneNode(true);  // 参数为true 复制克隆元素的后代元素
            var res1 = div.cloneNode();		// 不填默认false 不复制后代元素
            console.log(res);
            console.log(res1);
    
            document.body.appendChild(res1);
    
            console.log(res);
        </script>
    </body>
    
    </html>
    ```

14. ### 替换元素节点 replaceChild(new_ele,old_ele)

    ```js
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div>
            <h3>我是h3</h3>
        </div>
    
        <script>
            var div = document.querySelector('div');
            var h3 = document.querySelector('h3');
            var p = document.createElement('p');
            p.innerHTML = 'hello';
    
            var res = div.replaceChild(p, h3);   // 返回被删除的元素节点
             console.log(res);
        </script>
    </body>
    
    </html>
    ```

15. ### 判断某个元素是否含有该元素节点

    ```js
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        gagaggagag
        <div id="box"></div>
        <span>1</span>
        <script>
            var box = document.querySelector('#box');
            var span = document.querySelector('span');
    
            var res = box.contains(span);
    
            console.log(res);
        </script>
    </body>
    
    </html>
    ```

16. ### 创建文本节点createTextNode()

    ```js
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="box"></div>
    
        <script>
            var div = document.querySelector('#box');
    
            // div.innerHTML = 'hello';
    
            // 创建文本节点
            var txt = document.createTextNode('ok');
            div.appendChild(txt);
            console.log(typeof txt);
        </script>
    </body>
    
    </html>
    ```

17. ### isEqualNode（） 、hasChildNodes（）、删除空白节点

    - isEqualNode	判断两个元素节点是否相同
    - hasChildNodes  是否含有该元素节点
    - 自定义方法删除空白节点

    ```js
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="box"></div>
        <div class="d1"></div>
        <div class="d2"> 你好
            <!-- 注释节点 -->
    
        </div>
        <script>
            // 创建文本节点
            var txt = document.createTextNode("你好 世界")
            var div = document.querySelector(".box")
    
            div.appendChild(txt)
            console.log(typeof txt); // 返回object对象
    
            // 判断两个恶节点是否为同一个节点
            // 方法一 ： 使用 === 判断
            // 方法二 ： 使用isEqualNode
            // 返回值为true，则表示是同一个节点，否则不是
            var d1 = document.querySelector(".d1")
            var d2 = document.querySelector(".d2")
            d3 = d2
            console.log(d1.isEqualNode(d2));    // 返回false 
            console.log(d1 === d2);              // 返回false 
            console.log(d2.isEqualNode(d3));    // 返回true
            console.log(d2 === d3);             // 返回true
    
    
            // 判断某个容器是否含有子节点 hasChildNodes()   有则返回true，否则为false
            console.log(d1.hasChildNodes()); // 返回false 
            console.log(d2.hasChildNodes()); // 返回true
    
            // 自定义方法 删除空白节点
            function removekong(node){
                if(node.hasChildNodes){
                    var children = node.childNodes
                    // console.log(children);
                    for(var i = 0;i < children.length;i++){
                        // 判断是否为文本节点
                        if(children[i] == 3 && /^\s+$/.test(children[i].nodeValue)){
                            // test() 方法用于检测一个字符串是否匹配某个模式
                            node.removeChild(children[i])
                            console.log("删除成功");
                        }
                    }
                    return true
    
                }
                return "无子节点"
            }
            var res = removekong(d2)
            console.log(res);
        </script>
    </body>
    </html>
    ```

18. ### ClientWidth() 获取像素宽度

    ```js
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                padding: 20px;
                margin: 30px;
                border: 10px solid red;
            }
        </style>
    </head>
    <body>
        <div class="box">你好</div>
        <script>
            var div = document.querySelector(".box")
            var body = document.body
            /*
            clientWidth 属性是一个只读属性，它返回该元素的像素宽度，宽度包含内边距（padding），不包含边框（border），
            外边距（margin）和滚动条，是一个整数，单位是像素 px。
    
            内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。
            */
            
            console.log(div.clientWidth);
            console.log(div.clientHeight);
            console.log(body.clientWidth);
            console.log(body.clientHeight);
    
    
            /*
            innerHeight 返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度。
    
            innerWidth 返回窗口的文档显示区的宽度，如果有水平滚动条，也包括滚动条高度。
    
            innerWidth 和 innerHeight 是只读属性。 */
            console.log(window.innerWidth);
            console.log(window.innerHeight);
    
    
            /* offsetWidth 属性是一个只读属性，它返回该元素的像素宽度，宽度包含内边距（padding）和边框（border），不包含外边距（margin），
            是一个整数，单位是像素 px。
    
            通常，元素的 offsetWidth 是一种元素 CSS 宽度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），
            不包含 :before或 :after 等伪类元素的宽度。
    
            对于文档的 body 对象，它包括代替元素的 CSS 宽度线性总含量高。浮动元素的向下延伸内容宽度是被忽略的。 */
    
            console.log(div.offsetWidth);
            console.log(div.offsetHeight);
        </script>
    </body>
    </html>
    ```

## 十二、BOM

1. ### window对象

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>window对象</title>
   </head>
   
   <body>
   
       <script>
           alert('<div>欢迎进入页面!\n哈哈哈</div>')
           console.log(window);
           console.log(this);
           // 全局变量
           var num = 10;
           console.log(window.num);
           function a() {
               console.log(this);
               // 局部变量
               var num = 20;
               console.log(this.num);//10
               console.log(num);//20
           }
           a()
               (() => {
                   console.log(this);
               })()
           this.a();
           console.log(window.num);
       </script>
   </body>
   
   </html>
   ```

2. window.open()  打开页面

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   
   <body>
       <button>打开新窗口</button>
   
       <script>
           var btn = document.querySelector('button');
   
           btn.onclick = function () {
               var res = window.open('file:///E:/web%E5%89%8D%E7%AB%AF%E7%A4%BA%E4%BE%8B%E6%BC%94%E7%A4%BA/%E8%AF%BE%E5%A0%82%E6%BC%94%E7%A4%BA/js/day9-BOM/code/1.window%E5%AF%B9%E8%B1%A1.html', '哈哈啊', 'width=400 height=400 left=300 top=400');
               console.log(res);
               // res.document.write('helloworld');
           };
       </script>
   </body>
   
   </html>
   ```

3. window.close()  关闭页面

   ```js
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   <body>
       <button>关闭窗口</button>
   
       <script>
           var btn = document.querySelector('button');
   
           btn.onclick = function() {
               // 关闭窗口
               window.close();
           };
       </script>
   </body>
   </html>
   ```

4. window.confirm()  确认弹窗

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   
   <body>
       <script>
           var res = window.confirm('确认关闭?');
           console.log(11111);
           if (res) {
               window.close();
           }
       </script>
   </body>
   
   </html>
   ```

5. setInterval()  定时器

   - 在不清除定时器的前提下 会一直执行下去

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   
   <body>
       <button>停止定时器</button>
   
   
       <script>
           for (var i = 1; i <= 50; i++) {
               console.log('hello');
           }
   
           // 打印hello，每个1秒打印一个
   		// 参数一：一段可执行的代码或者方法（不写括号）
           var timer = window.setInterval(fn, 1000);
           var timer2 = window.setInterval(fn, 1000);
           console.log(timer);
           console.log(timer2);
   
           var count = 0;
           function fn() {
               count++;
               if (count > 5) {
                   window.clearInterval(timer)
               } else {
                   console.log('hello');
               }
           }
   
           var btn = document.querySelector('button');
   
           btn.onclick = function () {
               // 清除定时器
               window.clearInterval(1);
           };
       </script>
   </body>
   
   </html>
   ```

6. setTimeout()  设置延时器

   - 只会执行一次

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   
   <body>
       <button>清除延时器</button>
   
   
       <script>
           var timer = window.setTimeout(function () {
               console.log('hello')
           }, 2000);
           console.log(timer);
           var btn = document.querySelector('button');
           btn.onclick = function () {
               // 清除延时器
               clearTimeout(timer);
           }
       </script>
   </body>
   
   </html>
   ```

7. window.isNaN() 判断该对象是否为数字类型

   - isNaN() 函数用于检查其参数是否是非数字值。
   - 如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。isNaN() 函数用于检查其参数是否是非数字值。
   - 如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   
   <body>
       <script>
           var res = '3' * 3;
           var res1 = 'hello' * 3;
           var a = 'b'
           console.log(res);
           console.log(res1);
           console.log(window.isNaN(res));
           console.log(window.isNaN(res1));
           console.log(window.isNaN(a));
       </script>
   </body>
   
   </html>
   ```

8. isFinite()

   - isFinite() 函数用于检查其参数是否是无穷大，也可以理解为是否为一个有限数值（finite number）。

   - 如果参数是 NaN，正无穷大或者负无穷大，会返回 false，其他返回 true。

     ```js
     <!DOCTYPE html>
     <html lang="en">
     
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Document</title>
     </head>
     
     <body>
         <script>
             var num = 3 / 2;
             var num1 = 10 / 3;
             var num2 = Infinity * 2;
             var num3 = 'a'
             console.log(window.isFinite(num));//true
             console.log(window.isFinite(num1));//true
             console.log(window.isFinite(num2));//false
             console.log(window.isFinite(num3));//false
         </script>
     </body>
     
     </html>
     ```

9. moveTo()

   - moveTo() 方法可把窗口的左上角移动到一个指定的坐标

   ```js
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   <body>
       <button>弹出一个新的窗口</button>
       <button>moveTo</button>
   
       <script>
           var btns = document.querySelectorAll('button');
           var newWindow;
   
           btns[0].onclick = function() {
               newWindow = window.open('', 'newWindow', 'width=300 height=200');
           };
   
           btns[1].onclick = function() {
              newWindow.moveTo(300, 200);
           };
       </script>
   </body>
   </html>
   ```

10. moveBy()

    - moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。

    ```js
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <button>弹出一个新的窗口</button>
        <button>moveBy</button>
    
        <script>
            var btns = document.querySelectorAll('button');
    
            btns[0].onclick = function() {
                newWindow = window.open('', 'newWindow', 'width=300 height=200 left=400 top=300');
            };
    
            btns[1].onclick = function() {
                newWindow.moveBy(-20, -30);
            };
        </script>
    </body>
    </html>
    ```

11. location()对象的常用属性

    ```js
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <form action="ok.html" method="get">
            用户名:<input type='text' name="user"><br>
            密码:<input type="password" name="psd"> <br>
            <button>提交</button>
        </form>
    
    
        <script>
            console.log(window.location);//获取location对象
            console.log(location.href);//获取地址栏信息
            // window.location.href = 'https://www.baidu.com/'
            console.log(location.protocol);//地址中的协议
            console.log(location.host)//地址中的主机名称和端口号
            console.log(location.hostname)//地址中的主机名称
            console.log(location.pathname)//地址中的文件的路径
            console.log(location.search);//地址中的拼接的参数（以get方式向服务器传递的数据）
    
        </script>
    </body>
    
    </html>
    ```

12. location()的相关方法

    - reload() :重新载入当前文档
    - replace(): 用新的文档替换当前文档
    - assign() : 载入一个新的文档

    ```js
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button onclick="reload()">重新载入文档</button>
        <button onclick="replace()">替换载入的文档</button>
        <button onclick="assign()">载入一个新文档</button>
        <script>
            console.log(window.location);
            function reload(){
                location.reload()
            }
            function replace(){
                location.replace('https://hyqq.xyz/')
            }
            function assign(){
                location.assign('https://hyqq.xyz/')
            }
            
        </script>
    </body>
    </html>
    ```

13. Screen()

    - window.screen 对象包含有关用户屏幕的信息。
    - **window.screen**对象在编写时可以不使用 window 这个前缀。

    ```js
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            console.log(window.screen);
            console.log(screen.width);
            console.log(screen.height);//包含任务栏
    
     		// availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
            console.log(screen.availWidth);
            console.log(screen.availHeight);//不包含任务栏
            console.log(screen.availLeft);//当任务栏在屏幕左侧时任务栏的宽度
            console.log(screen.availTop);//当任务栏在屏幕顶端时任务栏的高度
        </script>
    </body>
    </html>
    ```

14. history()

    - window.history 对象包含浏览器的历史
    - history.back() - 与在浏览器点击后退按钮相同
    - history.forward() - 与在浏览器中点击向前按钮相同
    - history.fo(): 实现向前，后退的功能。

    ```js
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <a href="https://www.runoob.com/">菜鸟教程</a>
        <a href="https://hyqq.xyz/">博客</a>
        <button onclick="back()">前进</button>
        <button onclick="forward()">后退</button>
        <button onclick="goback()">后退</button>
        <button onclick="gofor()">前进</button>
        <button onclick="godwn()">刷新</button>
        <script>
            function back(){
                history.back()
            }
            function forward(){
                history.forward()
            }
            function goback(){
                history.go(-1) // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
            }
            function gofor(){
                history.go(1) // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
            }
            function godwn(){
                history.go(0) // go() 里面的参数为0,表示刷新页面
            }
        </script>
    </body>
    </html>
    ```


## 十三、重要对象的常用方法

1. ### Math对象的常用方法

   ```html
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>数学对象中的相关方法</title>
   </head>
   <body>
       <script>
           // 圆周率
           console.log(Math.PI);
   
           // 四舍五入 round
           var res = Math.round(3.5);
   
           // 最大值 最小值  max min
           var res = Math.max(91,2,100,8888);
           var res = Math.min(91,2,100,8888);
   
           // 向下取整 floor地板
           console.log(Math.floor(3.99));
           //向上取整 ceil天花板
           console.log(Math.ceil(2.01));
           // 幂运算 pow
           console.log(Math.pow(2,3));
   
           // 开方运算sqrt
           console.log(Math.sqrt(4));
   
           // 绝对值
           console.log(Math.abs(-12));
   
           // 随机值(0<=x<1)
           var res = Math.random()
           console.log(res);
           
   
           // 保留n位小数 有参(且n不为0)
           console.log(2.93333333.toFixed(2));
   
           // 无参 （或参数为0）直接输出整数位（四舍五入）
           console.log(2.93333333.toFixed());
            
   
   
       </script>
   </body>
   </html>
   ```

2. ### data时间对象的常用方法

   1. 时间和日期对象的创建

      - var  日期和时间对象名称 = new Date();获取系统当前的日期和时间对象

      - var  日期和时间对象名称 = new  Date(‘代表日期和时间的字符串’);

        - 字符串常用格式

          - \1) “年-月-日  时：分：秒” 

            \2) “年/月/日  时：分：秒”

            \3) “年  月  日  时：分：秒”

            \4) “年,  月,  日  时：分：秒

      - var  日期和时间对象名称 = new Date(毫秒值);返回的是距离1970年1月1日0时0分0秒的毫秒值

   ```js
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>
       <script>
   
           var date =new Date() // 不填参数 默认当前时间
           console.log(date);
   
           // 获取时间戳
           console.log(Date.parse(date));
           console.log(date.getTime());
           console.log(date.valueOf());
   		
   		// 返回的是Number类型
           console.log(date.getFullYear());
           console.log(date.getMonth()+1); // 月份+1
           console.log(date.getDay());
           console.log(date.getHours());
           console.log(date.getMinutes());
           console.log(date.getSeconds());
           console.log(date.getMilliseconds());
   
   		// 返回的是String 
           console.log(date.toLocaleString());
           console.log(date.toLocaleDateString());
           console.log(date.toLocaleTimeString);
           console.log(date.toString());
   
   		// set设置时间
   		6.setFullYear方法（返回值为距今的毫秒数，是一个时间戳）
               1)作用：设置日期时间对象中的年份
               2)格式：日期时间对象.setFullYear(新的年份);
           7.setMonth方法
               1)作用：设置日期时间对象中的月份
               2)格式：日期时间对象.setMonth(新的月份);
               3)注意：设置的值应该是0-11,0表示1月，11表示12月，如果超过11，那么会向年进位
           8.setDate方法
               1)作用：设置日期和时间对象中的天
               2)格式：日期时间对象.setMonth(新的天);
               3)注意：如果满一个月，需要进位
           9.setHours方法
               1)作用：设置日期和时间对象中的时
               2)格式：日期时间对象.setHours(新的小时);
               3)注意：超过一天进位
           10.setMinutes方法
               1)作用：设置日期和时间对象中的分
               2)格式：日期时间对象.setMinutes(新的分);
               3)注意：满一小时进位
           11.setSeconds方法
               1)作用：设置日期和时间对象中的秒
               2)格式：日期时间对象.setSeconds(新的秒);
               3)注意：满一分要进位
           12.setMilliseconds方法
               1)作用：设置日期时间对象中的毫秒
               2)格式：日期时间对象.setMilliseconds (新的毫秒);
               3)注意：满一秒要进位
           13.setTime方法
               1)作用：设置距离1970年1月1日0时0分0秒的毫秒值
               2)格式：日期时间对象.setTime(毫秒值);
       </script>
   </body>
   </html>
   ```

## 十四、其他属性

1. ### 相关属性-scrollTop

   - 作用：获取或设置容器中被卷上去的内容的高度
   - 格式：容器节点.scrollTop
   - 注意：
     - 该属性的值为数值型
     - 在使用该属性时一定是给容器添加的该属性（样式要有滚动条）
     - 在使用该属性时需要给容器设置overflow属性，既要让容器有滚动条
     - window对象没有scrollTop属性，如果获取拉动窗口的滚动条时被卷上去的内容的高度，我们可以使用document.document.scrollTop || document.body.scrollTop

   ```js
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
       <style>
           div {
               width: 300px;
               height: 200px;
               background: red;
               overflow: scroll;
           }
       </style>
   </head>
   
   <body>
       <div>
           朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技朗驰科技
       </div>
   
       <script>
           // 当滚动条被拉动时被卷上去的内容的高度
           var div = document.querySelector('div');
           // 滚动事件
           div.onscroll = function () {
               conso2le.log(div.scrollTop);
           }
       </script>
   </body>
   
   </html>
   ```

2. ### 相关属性-scrollLeft

   - 作用： 获取或设置容器中卷到左边的内容宽度
   - 格式：容器节点.scrollLeft

3. ### 相关属性-offsetParent

   - 作用：获取某个元素的祖先元素
   - 格式：元素.offsetParent
   - 注意
     - 如果该元素没有祖先元素，而是直接放在body中 ，返回body
     - 如果有祖先元素，但是祖先元素没有定位，返回body
     - 如果有祖先，且祖先有定位，那么返回的就是离他最近且具有定位的祖先元素

4. ### 相关属性-offsetTop属性、offsetLeft属性（肉眼看有偏移就是有）

   - 作用：获取相对于某个元素的偏移量，即该元素左侧的距离和上边的距离
   - 格式：元素.offsetTop或元素.offsetLeft
   - 注意
     -  如果元素没有祖先元素，那么返回的是距离body的距离
     -  如果元素有祖先元素，但是祖先元素没有定位，那么返回是距离body的距离
     -  如果元素有祖先元素，且祖先元素有定位，那么返回距离祖先元素的距离
     -  如果有多个祖先元素都具有定位，那么返回的是距离离它最近的且具有定位的祖先元素的距离
     -  返回值都是数值型
     -  受margin和padding影响，不受border影响

## 十五、事件

1. 定义：所谓事件就是指网页自身或网页浏览者所做出的某些行为，如点击鼠标、敲击键盘、刷新页面等等
2. 事件处理程序：指当事件被触发时所引起的某个程序的执行，这个程序就被叫做事件处理程序，事件处理程序包含两大部分：事件处理程序名称，事件处理函数
3. 事件处理程序名称：由on+事件名称构成，注意所有的事件处理程序都是小写，不需要采用驼峰命名法，onclick,onkeyup,onkeydown,onmouseleave,ondbclick(双击事件),oncontextmeu(右击事件)
4. JS中事件处理程序的添加方式

   1. (一) html事件处理程序

      - 事件添加方式：
        - <开始标签  事件处理程序名称=“事件处理函数名称()”></结束标签>，如<div  onclick="fn()"></div>

      - 删除方式：
        - 元素节点.removeAttribute(‘事件处理程序名称’);同删除属性

      - 注意
        - 该方式不建议使用，因为他没有实现结构和行为分离原则，不利于维护
        - 如果事件名称相同，那么只能执行前面的第一个
        - 如果使用this关键字，可以将this作为事件函数的实参传递给事件函数
   2. DOM 0级事件处理程序

      - 添加方式
        - 节点**.**on事件名称 = 事件处理函数

      - 删除方式
        - 节点**.**on事件名称 = null
      - 注意
        - DOM 0级事件处理程序的兼容性好
        - 如果事件名称相同，那么后面的事件会覆盖前面的数据
        - DOM 0级事件处理程序中要使用this，那么可以在其对应的事件函数里面直接使用this，这个this就代表了事件对应的那个元素
   3. DOM 2级事件处理程序

      - 添加方式
        - **元素节点.addEventListener('事件名称',事件处理函数名称/匿名函数,事件流)**
          - 注意：如果该事件函数可能要被删除，那么在添加时，第二个参数就需要写函数名称，而不是匿名函数
      - 删除方式
        - 元素节点.removeEventListener('事件名称',事件处理函数名称,事件流)
      - 注意
        - IE8以下不支持
        - 如果元素身上有多个事件，且事件名称相同,那么这些事件可以同时存在
        - 如果要使用this，那么可以在其事件处理函数中直接使用this，这个this就代表了当前这个元素
        - 事件流为true（事件捕获），false（事件冒泡），默认为false,可以省略
      -