JavaScript基础笔记

JS

概念：

一门客户端脚本语言
* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
* 脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能：

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

JavaScript发展史：

1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase

2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript

3. 1996年，微软抄袭JavaScript开发出JScript语言

4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

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

ECMAScript：客户端脚本语言的标准：

1. 基本语法：

   1. 与html结合方式

      1. 内部JS

         • 定义<script>，标签体内容就是js代码

      2. 外部JS

         • 定义<script>，通过src属性引入外部的js文件

      3. 注意：

         • <script>可以定义在html页面的任意位置，但是定义的位置会影响执行的顺序
         • <script>可以定义多个

   2. JavaScript 能够以不同方式“显示”数据：

      1. 使用 window.alert() 写入警告框

      2. 使用 document.write() 写入 HTML 输出

      3. 使用 innerHTML 写入 HTML 元素

      4. 使用 console.log() 写入浏览器控制台

变量：

1. 变量是什么？有什么用？

   • 变量就是内存中的一块临时空间，用来储存数据。

   • 变量的声明（定义）

     1. 声明的时候没有赋初始值，默认输出的是undefined

     2. 可以同时多个声明，声明的时候可以赋值

   • 变量的命名

     1. 字母、下划线、数字组成，其他符号不允许使用

     2. 不能以数字开头

     3. 不能使用关键字，例如：var if else

     4. 变量名最好见词达意，例如：身高--height，年龄--age

     5. 用驼峰命名或者下划线命名： user_name,userName,fontSize

     6. 不要用中文

数据类型：

数据类型指的是字面量的类型

Number--数字类型

String--字符串类型

Boolean--布尔类型

null--空

undefine--未定义

object--对象

Number--数字类型

注意：

1. 在数字类型中没有区分浮点类型（小数）和整数类型

2. 浮点型不精确，在运算的时候小心使用

3. 当无法辨别数据类型时，可使用typeof进行打印，检查数据类型

4. Number.MAX_VALUE 表示JS中可以表示出的最大数值，如果使用Number表示的数超出最大值范围，则会打印infinity，即正无穷

5. 计算浮点数可能会得到一个不精确的结果，因此不要用JS进行对精确度要求过高的计算

String--字符串类型

注意：

1. 单引号和双引号 同时使用需要嵌套，双引号里面不能放双引号，单引号里面不能放单引号

2. 变量和字符串一起使用的时候用+连接

3. 字符串长度 字符串.length

4. 空字符串 "" ''

5. 空格不是字符串

6. 在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使y用/进行转义

Boolen--布尔类型

注意：

1. 布尔类型只有两个值 ture false

null和undefined

null：没有对象此处不应有值

undefined：没有给值

注意：

null用typeof打印出来时是object

类型转换：

parseInt:转换成整数

parseFlaot：转换为小数

规律：（11abc.234）从左往右读取里面的每个字符，遇到不是数字的字符 就连同后面的数字或字符一同丢弃

NaN：不是一个数字，从左往右读发现没有一个是想要的，这个时候就会打印NaN，使用typeof检查，也会打印number ，isNaN（）函数可判断值是否为NaN

Number：里面只能是数字字符 不能有其他字符 否则转换的结果是NaN

转成字符串：String

转成布尔类型：Boolean

注意：转换成false的情况：0 -0 "" null undefined

转成false的情况必须记住

强制类型转换：

1. 将其他类型转换成String

   • 方式一：调用 转换数据类型的toString()方法，该方法不会影响原变量，但会将转换的结果返回，注意，null和undefined这两个值没用tostring方法

   • 方法二：调用String（）函数，并将被转换的数据作为参数传递给函数使用String（）函数做强制类型转换时，对于Numder和Boolean实际上就是调用的toString方法，但是对于null和undefined，就不会调用toString（）方法，它会将null直接转换为“null”

2. 将其他类型转换为Number

   • 方式一：使用number（）函数

     1. 字符串-->数字

        • 如果是纯数字的字符串，则直接将其转换为数字

        • 如果字符串中有非数字的内容，则转换为NaN，但类型依旧是number

        • 如果字符串是一个空串或者是一个全是空格的字符则转换成0

     2. 布尔-->数字

        • true转成1

        • false转成0

     3. null-->数字-->0

     4. undefined-->数字-->NaN

   • 方式二：这种方式专门用来对付 字符串

     1. parseInt（）把一个字符串转换为一个整数

        • parseInt（）可以将一个字符串中的有效的整数内容去除出来然后转换为Number

3. parseFloat（）把一个字符串转换成一个浮点数

   • 作用于parseInt想类似，parseFloat（）取出的是有效的浮点数

其他进制的数字

1. 十六进制，以0x开头，例如：0x10

   八进制，以0开头，例如：070

   二进制，以0b开头，例如：0b10

2. 想070这样的字符串，有些浏览器会当成八进制进行解析，有些会当成10进制进行解析，因此可以在parseInt（）中传递一个第二个参数，来指定数字的进制

转化为布尔值

1. 调用Boolean（）函数来将a转换为布尔值

   • 数字-->布尔

     除了0和NaN，其余的都是true

   • 字符串-->布尔

     除了空串，其余的都是true

   • null和undefined都会转换为false

相等运算符

1. “==”：

   • 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较

2. “！=”：

   • 不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false

   • 不相等也会对变量进行自动的类型转换，如果转换后相等也会返回true

3. “===”：

   • 全等：用来判断两个值是否全等，它和相等类似，不同的是，它不会进行类型转换，如果两个数值的类型不同，直接返回false

4. “！==”：

   • 不全等，同样不会进行类型转换

三目运算符：

<span style="background-color:#dadada"><span style="color:#1f0909"><span style="color:#000000">num</span><span style="color:#981a1a">>=</span><span style="color:#116644">60</span><span style="color:#981a1a">?</span><span style="color:#000000">alert</span>(<span style="color:#aa1111">"及格"</span>):<span style="color:#000000">alert</span>(<span style="color:#aa1111">"及格"</span>)</span></span>

如果？前面的表达式结果为false 执行：后面的语句

运算符：

1. ++ --自增自减运算

2. 表达式1？语句1：语句2 当表达式1为true 执行语句1 表达是为false 执行语句2

3. 逻辑运算符：

• && 并且的意思 必须两边同时满足 结果才为true

• || 或者的意思 ，两边只需要满足一个就行 结果就是true

• ！取反的意思，原来是true变成false，原来是false变成true

  赋值运算符，“()”优先级最高

break and continue：

1. break只对距离自己最近的循环语句起作用

2. 可以为循环语句创建一个label，来标识当前的循环

   label：循环语句使用break语句时，可以在break后跟着一个label这样break将会结束指定的循环

对象：

定义：对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

对象的分类：

1. 内建对象：

   • 由ES标准中定义的对象，在任何的ES中都可以使用

   • 比如：Math、String、Number、Boolean......

2. 宿主对象：

   • 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象

   • 比如：BOM、DOM

3. 自定义对象：

   • 由开发人员自己创建的对象

创建对象：

1. 使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数，使用typeof检查一个对象时，会返回object

2. 在对象中保存的值称为属性，
   向对象添加一个gender属性
   语法：对象.属性名=属性值；
   
   向obj中添加一个name属性
   obj.name="孙悟空"；
   
   读取对象中的属性
   语法：对象.属性名
   console.log(obj.name):
   
   如果读取对象中没有的属性，不会报错而是会返回underfined
   
   
   修改对象的属性值
   语法：对象.属性名=新值
   
   删除对象的属性

3. var obj = new Object();
           obj.name = "孫悟空";
           console.log(obj);
           delete obj.name;
           console.log(obj);
           /*
   
           向对象中添加属性
           属性名：
               对象的属性名不强制要求遵守标识符的规范
               什么名字都可以使用
           */
   
           obj.name = "孙悟空";
   
           obj.var = "hello";
           /*
           如果要使用特殊的属性名，不能采用.的方式来操作
           需要使用另一种方式：
               语法：对象[“属性名"]=属性值；
           读取时也采用这种方式
   
           使用[]这种形式去操作属性，更加的灵活，在[]中可以直接传递一个变量，这样的变量是多少就会读取那个属性
   
           */
   
           obj["123"] = 789;
           obj["nihao"] = "你好";
           var n = "123";
   
           console.log(obj["123"]);
           console.log(obj[n]);
   
           /*
           in运算符
               通过该运算符可以检查一个对象中是否含有指定的属性
               如果有则返回true，没有则返回false
   
               语法：
                   "属性名" in 对象
   
           */
   
           console.log("name" in obj);
           console.log("test" in obj);

4. /*
                          
   基本数据类型
   	String Number BOOlean Underfined
   
   引用数据类型
   	object
   
   JS中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中储存，值与值之间是独立存在的，修改一个变量不会影响其他变量
   
   
   对象是保存到堆内存中的，每创建一个新对象，就会在堆内存中开辟一个新空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性是，另一个也会受到影响             
                           */
           var obj3 = new Object();
           var obj4 = new Object();
           obj3.name = "沙和尚";
           obj4.name = "沙和尚";
           console.log(obj3 == obj4);
           console.log(obj3.name == obj4.name);

对象字面量：

// 创建一个对象
        var obj = new Object();

        //使用字面量创建一个对象
        var obj = {};
        //console.log(typeof obj);
        obj.name = "孙悟空";
        console.log(obj.name);

        /*
        使用对象字面量，可以在创建对象时，直接指定对象的属性
            语法：{属性名：属性值，
            属性名：属性值，
            属性名：属性值
            }
        对象字面量的属性名可以加引号也可以不加，没建议不加
        如果使用一些特殊的名字，则必须加引号

        属性名和属性值是一组一组的名值对结构，名和值之间使用：连接，多个名值对之间使用，隔开
        如果一个属性之后没有其他的属性了，就不能再添加，
        */
        var obj2 = {
            name: "猪八戒",
            age: 28,
            gender: "男",
            text: {
                name: "沙和尚"
            } //对象里面可以在创建对象
        }
        console.log(obj2);
        console.log(obj2.text);

函数：

1. /*
   函数function
     函数也是一个对象
     函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
     函数中保存一些代码在需要的时候调用
     使用typeof检查一个函数对象时，会返回function
                           */
   
           //创建一个函数对象
           //可以将要封装的代码以字符串的形式传递给构造函数
           var fun = new Function("console.log('Hello 这是我第一个函数');");
           console.log(fun);
           //封装的函数中代码不会立即执行
           //函数中代码会在函数调用的时候执行
           //调用函数的语法：函数对象（）
           //调用函数时，函数中封装的代码会按照顺序执行
           fun();
           fun();
           fun();
   
           /*
               使用函数声明来创建一个函数
                   语法：
                       function 函数名([形参1，形参2，...形参n]){
                           语句...
                       }
           */
   
           function fun2(){
               //语句
           
           }
   
           /*
               使用函数表达式来创建一个函数
               var 函数名 = function([形参1，形参2，...形参n]){
                   语句
               }
           */
   
           var fun3=function(){
               console.log("我是匿名函数中封装的代码");
           }

函数的参数 ：

1. 是什么？是内部需要使用到的变量

2. 形式参数：在定义的函数的时候 fn（形参1，形参2） 形参

3. 实际参数：在函数调用的时候 传入的实际的值 实参

   注意：实参和形参要一一对应，在调用函数的时候 需要根据实参的要求来传递

4. /*
   定义一个用来求和的函数
   可以在函数的（）中来指定一个或多个形参（形式参数）
   多个形参之间使用，隔开，声明形参就相当于在函数内部声明了对应的变量
   但是并不赋值
                       */
   
           function sum(a, b) {
               console.log(a + b);
           }
   
           sum(1, 3);
           /*
               在调用函数时，可以在（）中指定实参（实际参数）
               实参将会赋值给函数中对应的形参
           */
   
           sum(1, 2);
           sum(123, 456);
   
           /*
               调用函数时解析器不会检查实参的类型，所以要注意，是否有可能会接受到非法的参数，如果有可能则需要对参数进行类型的检查
               函数的实参可以是任意的数据类型
           */
   
           sum(123, "hello");
   
           sum(true, false);
   
           /*
               调用函数时，解析器也不会检查实参的数量
               多余实参不会被赋值
               如果实参的数量少于形参的数量，则没有对应的形参将是underfined
   
           */

函数的返回值：

1. <span style="background-color:#dadada">/*
              创建一个函数
              可以用return来设置函数的返回值
              语法：
               return 值
     
               return后的值将会作为函数的执行结果返回，
               可以定义一个变量，来接收该结果
               return后的语句都不会执行
     
               如果return后面不跟值，则返回underfined
               如果不写return也是返回underfined
     
          */
     
          function sum(a, b, c) {
              var d = a + b + c;
              // return d;
              alert("hello"); //不会执行
          }
     
          console.log(sum(1, 2, 3));</span>

2. 练习：
   /*
            创建一个函数，可以在控制台中输入一个人的信息
            可以输入一个人的信息
           */
   
           function sayHello(o) {
               console.log("我是" + o.name + "，今年我" + o.age + "岁了，" + "我是一个" + o.gender + ",我住在" + o.adress);
           }
   
           var obj = {
               name: "孙悟空",
               age: 18,
               adress: "花果山",
               gender: "男猴"
           }
           sayHello(obj);

立即执行函数：

1. /*
   函数对象
   立即执行函数
   函数定义完，立即被调用，这种函数叫做立即执行函数
   立即执行函数往往指挥执行一次
           */
           (function(a, b) {
               console.log("a=" + a);
               console.log("b=" + b);
           })(123, 456);

方法：

1. /*
                   创建一个对象
               */
   
           var obj = new Object();
   
           //向对象中添加属性
           obj.name = "孙悟空";
           obj.age = 18;
           //对象的属性值可以是任何的数据类型，也可以是个函数
           obj.sayName = function() {
               console.log(obj.name);
   
           };
   
           obj.sayName();
   
           /*
               函数也可以称为对象的属性，
               如果一个函数作为一个对象的属性保存，
               那么我们称这个函数是这个对象的方法
               调用函数就说调用对象的方法（method）
               只有名称上的区别
           */
   
           var obj2 = {
               name: "猪八戒",
               age: 18,
               sayName: function() {
                   console.log(obj2.name);
               }
           };
   
           obj2.sayName();
   
           //枚举对象中的属性
           //使用for...in语句
   
   
           /*
               语法：
                   for(var 变量 in 对象){
   
                   }
                   for...in语句对象中有几个属性，循环体就会执行几次
                   每次执行时，会将对象中的一个属性的名字赋值给变量
           */
           console.log("------");
           for (var n in obj2) {
               console.log("属性名：" + n + "属性值：" + obj2[n]);
           }

作用域：

1. 全局作用域：

   • 直接编写在script标签中的JS代码，都在全局作用域

   • 全局作用域在页面打开时创建，在页面关闭时销毁

   • 在全局作用域中有一个全局对象Window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用

   • 在全局作用域中

     • 创建的变量都会作为window对象的属性保存

     • 创建的函数都会作为window对象的方法的保存

   • 全局作用域中的变量都是全局变量，在页面的任意部分都可以访问到

2. 声明提前：

   • 变量的声明提前

     使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不适用var关键字，则变量不会被声明提前

   • 函数的声明提前

     使用函数声明形式创建的函数function函数(){},它会在所有的代码执行之前就被创建

3. 函数作用域：

   • 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁

   • 每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的

   • 在函数作用域中可以访问到全局作用域的变化

this关键字：

1. 解析器在调用函数每次都会想函数内部传递一个隐含的参数，这个隐含的参数就是this，

2. this指向的是一个对象，这个对象我们成为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象

   1. 以函数的形式调用时，this永远都是window

   2. 以方法的形式调用时，this就是调用方法的那个对象

      function fun() {
                  console.log(this.name);
              }
      
      
      
              var obj = {
                  name: "孙悟空",
                  sayname: fun
              };
              console.log(obj.sayname == fun);
              var name = "全局变量";
      
              //以函数的形式调用
              fun();
      
              //以方法的形式调用
            obj.sayname();

构造函数：

1. 创建一个构造函数，专门用来创建Person对象

   构造函数就是一个普通的函数，创建方式和普通函数没有区别，

   不同的是构造函数习惯上首字母大写

2. 构造函数和普通函数的区别就是调用方式的不同

   普通函数是直接调用，而构构造函数需要使用new关键字来进行调用

3. 构造函数的执行流程：

   1.立即创建一个新的流程

   2.将新建的对象设置为函数中this。在构造函数中可以使用this来引用新建的对象

   3.逐行执行函数中的代码

   4.将新建的对象作为返回值返回

4. 使用统一构造函数创建的对象，我们成为一类对象，也将一个构造函数成为一个类。

   我们将通过一个构造函数创建的对象，称为是该类的实例

5. this的情况：

   1.当以函数的形式调用时，this就是window

   2.当以方法的形式进行调用时，谁调用方法this就是谁

   3.当以构造函数的形式调用时，this就是新创建的那个对象

   function Person(name, age, gender) {
               this.name = name;
               this.age = age;
               this.gender = gender;
               this.sayName = function() {
                   alert(this.name);
               }
   
           }
    //per就是Person的实例
           var per = new Person("孙悟空", 18, "男");
           console.log(per);

6. 使用instanceof可以检查一个对象是否是一个类实例

   语法：

   对象instanceof

    console.log(per instanceof Person);

数组-forEach（）：

1. 一般我们都是使用for循环去遍历数组，js中还为我们提供了一个方法，用来遍历数组

2. forEach（0方法需要一个函数作为参数，像这种参数有我们创建但不是由我们调用，我们称之为回调函数，这种情况下，数组中有几个元素函数就会回调几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以来定义形参，来读取内容

   var arr=[1,2,3,4,5];
       arr.forEach(function(){
           console.log("hello");
           
   //hello输出5次

3. 浏览器会在回调函数中传递三个函数，

   • 第一个参数就是当前正在便利的元素

   • 第二个参数就是当前正在遍历的参数的索引

   • 第三个参数就是正在遍历的数组的所有元素

数组-slice：

1. 可以用来从数组提取指定元素

2. 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

3. 参数：

   • 截取位置开始的索引，包含开始索引

   • 截取结束的位置的索引，不包含结束索引

     • 第二个参数可以不写，此时会截取从开始索引往后的所用元素

     • 索引可以使负值

   var arr=[1,2,3,4,5];
       arr.forEach(function(){
           console.log("hello");
           
   //hello输出5次

数组-splice：

1. 可以用于删除数组中的指定元素

2. 使用splice（）会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

3. 参数：

   • 第一个表示开始位置的索引

   • 第二个表示删除的数量

   result = arr.splice(0, 1);
           console.log(result);

Array：数组对象

概念：数组对象是使用单独的变量名来存储一系列的值。

1. 创建：

   1. 常规方式 var arr = new Array(); arr[0]="xxx";arr[1]="yyy";.......

   2. 简洁方式 var arr = new Array(元素列表);

   3. 字面 var arr = [元素列表];

      1. 方法 join(参数):将数组中的元素按照指定的分隔符拼接为字符串 push() 向数组的末尾添加一个或更多元素，并返回新的长度。 splice() 从数组中添加或删除元素。 sort() 排序 filter() 过滤 返回一个新的数组

         1. 属性 length:数组的长度

            1. 特点：

   4. JS中，数组元素的类型可变的。

   5. JS中，数组长度可变的。

Boolean：布尔对象

1. Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。

Date：日期对象

概念：象用于处理日期与时间。

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

   1. 方法： getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getFullYear() 从 Date 对象以四位数字返回年份。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

Math：数学对象

Math 对象用于执行数学任务。 Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

1. 创建：

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

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

   1. 属性： PI

Number ：原始数值的包装对象。

1. var num = new Number(value); 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。

String：字符串对象

String 对象用于处理文本（字符串）。 String 对象创建方法： new String()。 var txt = new String("string"); 或者更简单方式： var txt = "string"; 属性：length

RegExp：正则表达式对象

正则表达式是描述字符模式的对象

正则表达式用于对字符串模式的匹配及检索替换，是对字符串执行模式的匹配的枪大工具

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

   1. 单个字符：[]

      如：[a] [ab] [a-zA-z0-9_]

      • 特殊字符代表特殊含义的单个字符：

        \d:单个数字字符[0-9]

        \w:单个单词字符[a-zA-z0-9_]

   2. 量词符号：

      ？：表示出现0次或1次

      *：表示出现1次或多次

      +:出现1次或多次

      {m,n}:表示 m<=数量<=n

      m如果缺省： {,n}:最多n次 n如果缺省：{m,} 最少m次

   3. 开始结束符号

      • ^:开始

        • $:结束

2. 正则对象：

   1. 创建

      1. var reg = new RegExp("正则表达式");

         1. var reg = /正则表达式/;

            1. 方法

               1. test(参数):验证指定的字符串是否符合正则定义

DOM:

概念： Document Object Model 文档对象模型

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

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

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

   1. Document：文档对象

   2. Element：元素对象

   3. Attribute：属性对象

   4. Text：文本对象

   5. Comment:注释对象

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

2. XML DOM - 针对 XML 文档的标准模型

3. HTML DOM - 针对 HTML 文档的标准模型

核心DOM模型：

1. Document：文档对象

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

      • window.document

      • document

   2. 方法：

      1. 获取Element对象：

         • getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一

         • getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组

         • getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组

         • getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

      2. 创建其他DOM对象：

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

      3. 属性

         1. Element：元素对象

            • 获取/创建：通过document来获取和创建

            • 方法：

              1. removeAttribute()：删除属性

              2. setAttribute()：设置属性

         2. Node：节点对象，其他五个的父对象

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

            • 方法：

              1. CRUD dom树：

                 • appendChild()：向节点的子节点列表的结尾添加新的子节点。

                 • removeChild() ：删除（并返回）当前节点的指定子节点。

                 • replaceChild()：用新节点替换一个子节点。

            • 属性：

              1. parentNode 返回节点的父节点。

         3. 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属性

事件监听机制：

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

1. 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了

2. 事件源：组件。如： 按钮 文本输入框...

3. 监听器：代码。

4. 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件：

1. 点击事件：

   1. onclick：单击事件

   2. ondblclick：双击事件

2. 焦点事件

   1. onblur：失去焦点

   2. onfocus:元素获得焦点。

3. 加载事件：

   1. onload：一张页面或一幅图像完成加载。

4. 鼠标事件：

   1. onmousedown 鼠标按钮被按下。

   2. onmouseup 鼠标按键被松开。

   3. onmousemove 鼠标被移动。

   4. onmouseover 鼠标移到某元素之上。

   5. onmouseout 鼠标从某元素移开。

5. 键盘事件：

   1. onkeydown 某个键盘按键被按下

   2. onkeyup 某个键盘按键被松开

   3. onkeypress 某个键盘按键被按下松开

6. 选择和改变

   1. onchange 域的内容被改写

   2. onselect 重置按钮被点击

7. 表单事件：

   1. onsubmit 确认按钮被点击

   2. onreset 重置按钮被点击

BOM：

1. 概念：Browser Object Model 浏览器对象模型

   • 将浏览器的各个组成部分封装成对象。 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

2. 组成：

   • Window：窗口对象

   • Navigator：浏览器对象 浏览器的版本 访问者的信息

   • Screen：显示器屏幕对象 屏幕的分辨率

   • History：历史记录对象

   • Location：地址栏对象

3. Window：窗口对象 0.概念 所有浏览器都支持 window 对象。它表示浏览器窗口。

   所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

   全局变量是 window 对象的属性。

   全局函数是 window 对象的方法。

   甚至 HTML DOM 的 document 也是 window 对象的属性之一： window.document.getElementById("div1"); 与此相同： document.getElementById("div1");

   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引用可以省略。 方法名();

4. Location：地址栏对象 0.window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面

   1. 创建(获取)：

      1. window.location

      2. location

   2. 方法：

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

   3. 属性

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

5. History：历史记录对象

   1. 创建(获取)：

      1. window.history

      2. history

   1. 方法：

      • back() 加载 history 列表中的前一个 URL。等同于在浏览器点击后退按钮

        • forward() 加载 history 列表中的下一个 URL。等同于在浏览器中点击前进按钮

        • go(参数) 加载 history 列表中的某个具体页面。

          • 参数：

            • 正数：前进几个历史记录

            • 负数：后退几个历史记录

        1. 属性：

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

6. Navigator：浏览器对象

    //window.navigator对象在编写时可不使用window这个前缀
   <script>
   txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
   txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
   txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
   txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
   txt+= "<p>硬件平台: " + navigator.platform + "</p>";
   txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
   txt+= "<p>用户代理语言: " + navigator.language + "</p>";
   document.getElementById("example").innerHTML=txt;
   </script>

   注意：来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

   • navigator 数据可被浏览器使用者更改

   • 一些浏览器对测试站点会识别错误

   • 浏览器无法报告晚于浏览器发布的新操作系统

7. screen 对象包含用户屏幕的信息

   方法：

   1. screen.availWidth - 可用的屏幕宽度

   2. screen.availHeight - 可用的屏幕高度

8. Cookies 存储用户的信息 Cookie 是为了解决“如何记住用户信息”而发明的：

   <span style="background-color:#dadada">当用户访问网页时，他的名字可以存储在 cookie 中。
   下次用户访问该页面时，cookie 会“记住”他的名字。</span>

   //完整案例
   function setCookie(cname,cvalue,exdays){
       var d = new Date();
       d.setTime(d.getTime()+(exdays*24*60*60*1000));
       var expires = "expires="+d.toGMTString();
       document.cookie = cname+"="+cvalue+"; "+expires;
   }
   function getCookie(cname){
       var name = cname + "=";
       var ca = document.cookie.split(';');
       for(var i=0; i<ca.length; i++) {
           var c = ca[i].trim();
           if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
       }
       return "";
   }
   function checkCookie(){
       var user=getCookie("username");
       if (user!=""){
           alert("欢迎 " + user + " 再次访问");
       }
       else {
           user = prompt("请输入你的名字:","");
             if (user!="" && user!=null){
               setCookie("username",user,30);
           }
       }
   }
   

   PS：Cookies的代码格式统一，可直接引用