JavaScript学习笔记
hello，小友们，马上一学期的JavaScript课程将要结束了，期末考试即将的到来，那么关于这门课程你又了解多少呢，下面让我带领大家复习以下所学的知识点吧~
JavaScript
- 一，JavaScript基本语法
-
- 1，注释
- 2，结束符
- 3，输入输出语句
-
- 1，输入语句
- 2，输出语句
- 4，变量
- 5，常量
- 6，数据类型
-
- 1，数值类型Number
- 2，字符串类型String
- 3，布尔类型Boolean
- 4， undefined
- 5，null
- 二，运算符
-
- 1，算术运算符
- 2，赋值运算符
- 3，自增/自减运算符
- 4，比较运算符
- 5，逻辑运算符
- 6，三元运算符
- 7，表达式
- 8，数据类型转换
- 三，JS流程控制
-
- 1，分支语句
-
- 1，If
- 2，if-else语句
- 3，if-else-if语句
- 4，for循环
- 5，分支语句-switch
- 2，循环语句
-
- 1，for循环
- 2,while循环
- 3,循环控制语句
- 四，JS方法(函数)
-
- 1，方法的定义
- 2，方法的调用
- 3，递归
-
- 斐波那契数列
- 五，JS对象
-
- 1，创建对象
- 2，对象属性
- 3，对象方法
- 4，JavaScript 内置对象
-
- 1，Math对象
- 2，Date对象
- 六，数组与集合
-
- 1，创建数组
- 2， 数组的基本操作
- 3，数组的遍历
-
- 1，for循环
- 2， for…in
- 七，字符串与正则表达式
-
- 1，String对象
-
- 1，创建String
- 2，属性和方法
- 2，正则表达式
-
- 1，正则规则
- 2，使用方式
- 八，JavaScript高级
-
- 1，let关键字
- 2，const关键字
- 3，箭头函数
- 4， 模板字面量
- 5，解构表达式
- 6，展开运算符
- 7， 类和继承
- 8，模块化开发
- 九，DOM文档对象模型
-
- 1，DOM操作-查找节点
-
- 1， 查找节点-直接查找
- 2，查找节点-层级查找
- 2，DOM操作-操作内容
- 3，DOM操作-操作属性
-
- 1， 获取标签属性
- 2，操作属性-传统模式
- 3，操作属性-快捷模式
- 4，DOM操作-操作结构
- 十，Style对象与Form对象
-
- 1，Style 对象
-
- 1，对象概述
- 2，Form 对象
-
- 1，Form 对象属性
- 2，Form 对象方法
- 十一，BOM
-
- 1，BOM对象
-
- 1， window对象
- 2，navigator对象了解
- 3，location对象
- 4， history对象了解
- 5，screen对象了解
- 三，Window方法-入口函数
- 四，Window方法-提示框
- 五，Window方法-定时器
-
- 1，单次定时器
- 2，循环定时器
- 3，终止定时器
- 十二，事件处理
-
- 1，事件绑定
-
- 1， 直接绑定
- 2，属性绑定
- 3，动态绑定
- 2，常见事件
- 3，事件流
-
- 1.标准事件模型
- 2，事件捕获
- 4，事件对象
-
- 1，获取对象
- 2，event的属性
- 3，事件对象方法
一，JavaScript基本语法
1，注释
使用 // 注释单行代码
使用 /`* *`/ 注释多行代码
注意事项：编辑器中单行注释的快捷键为 ctrl + /
2，结束符
在 JavaScript 中 ; 代表一段代码的结束。多数情况下可以省略 ; 使用回车（enter）替代。
实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;
3，输入输出语句
1，输入语句
prompt("输入你的姓名")
向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
2，输出语句
alert()：以弹窗形式展示（输出）给用户
document.wirte()：展示在页面上
console.log()：用于在浏览器控制台输出信息
4，变量
变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。通俗讲，变量就是使用【某个符号】来代表【某个具体的数值】（数据）
使用变量分为两步：1.声明变量 2.给变量赋值
定义变量
使用let和var来声明（定义）变量。let和 var区别不大，
但是let 相较var更严谨，因此推荐使用let
给变量赋值
let age=18；/使用=来给变量赋值
变量名命名规则
关于变量的名称（标识符）有一系列的规则需要遵守：
- 只能是字母、数字、下划线、$，且不能能数字开头
- 字母区分大小写，如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词（关键字或保留字）不允许使用。
- 尽量保证变量具有一定的语义，见字知义
- 所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。一般而言，全小写且会变颜色的就是关键字或保留字。
5，常量
常量指的是一旦定义就不可改变的量，一般使用 const 声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
命名规范：和变量一致
const a=10;
注意： 常量不允许重新赋值,声明的时候必须赋值（初始化)
6，数据类型
1，数值类型Number
即我们数学中学习到的数字，可以是整数、小数、正数、负数。
JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。
2，字符串类型String
通过单引号（ ‘’） 、双引号（ “”）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
注意事项：
- 无论单引号或是双引号必须成对使用
- 单引号/双引号可以互相嵌套，但是不以自已嵌套自已
- 必要时可以使用转义符 \，输出单引号或双引号
3，布尔类型Boolean
表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。
4， undefined
在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
5，null
在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。
不幸的是，在 JavaScript 中，null 的数据类型是对象。
您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
欧克，看到这里你已经打败了百分之1的JS同行了，继续加油！！！
二，运算符
1，算术运算符
① 相关概述
数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等
② 运算规则
| 运算符 | 作用 |
|---|---|
| + | 求和 |
| - | 求差 |
| * | 求积 |
| / | 真正的除法(5/2==2.5) |
| % | 取模（取余数） ，开发中经常用于作为某个数字是否被整除 |
注意：在计算失败时，显示的结果是 NaN （not a number）
2，赋值运算符
赋值运算符：对变量进行赋值的运算符
= 将等号右边的值赋予给左边, 要求左边必须是一个容器
3，自增/自减运算符
符号 作用 说明
++ 自增 变量自身的值加1，例如: x++
-- 自减 变量自身的值减1，例如: x--
注意事项
- 只有变量能够使用自增和自减运算符
- ++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x
运算规则
1. 单独使用：++在前和++在后没有差别，都是让变量自身+1。
2. 复合使用：++在前就是先+1，++在后就是后+1
4，比较运算符
比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）
运算符 作用
> 左边是否大于右边
< 左边是否小于右边
>= 左边是否大于或等于右边
<= 左边是否小于或等于右边
== 左右两边值是否相等
=== 左右两边是否类型和值都相等（重点）
!= 左右值不相等
!== 左右两边是否不全等
5，逻辑运算符
可以把多个布尔值放到一起运算，最终返回一个布尔值
符号 名称 特点 口诀
&& 逻辑与 符号两边有一个false的结果为false 遇假则假
|| 逻辑或 符号两边有一个true的结果为true 遇真则真
! 逻辑非 true变false false变true 真变假，假变真
^ 异或 相同为false，不同为true
6，三元运算符
let 变量 = 表达式 ？ 值1 : 值2;
运行流程:
1. 先计算表达式的值.
2. 如果表达式为true,则取值1.
3. 如果表达式为false,则取值2.
7，表达式
由运算符和操作数组成的式子。这个式子一般会产生一个值，该表达式也称之为XX表达式。
8，数据类型转换
字符串和Number的相互转换，其目的是为了方便JS代码进行某些运算。而转换方式分为两种，隐式转换和显示转换。
① 隐式转换
隐式转换，就是系统内部自动将数据类型进行转换，不需要我们处理。
注意：
1. 当“字符串”和“Number”进行“+”操作时，Number会自动变为字符串。
2. 当“字符串”和“Number”进行“-*/”操作时，字符串会自动变为Number。
② 显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
注意：
- 显示转换一般只用于转换成数值类型的转换，也就是把"字符串"转换为“Number”。
- 通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。
- Boolean转换 任意类型的数据，在if()中，都会自动转换为
转换规则
如果是【不存在/空/没有/无意义】，都会转换为false。
如果是其他数据，都会转换为true。
欧克，看到这里你已经打败了百分之1的JS同行了，继续加油！！！
三，JS流程控制
1，分支语句
1，If
if(表达式){
//当表达式为true,执行这里。
}
2，if-else语句
if(表达式){
//当表达式为true时,执行这里。
}else{
//当表达式为false时，执行这里。
}
3，if-else-if语句
4，for循环
if(表达式1){
//当表达式1为true时,执行这里。
}else if(表达式2){
//当表达式1为false,并且表达式2为true的时候,执行这里。
}else if(表达式3){
//当表达式1和表达式2为false,并且表达式3为true的时候,执行这里。
}else{
//当以上表达式全部为false时,才执行这里。
}
5，分支语句-switch
switch(表达式){
case 值1:
语句1;
break;
case 值2:
语句2;
break;
//......
default:
语句n;
}
执行流程
1. 先计算表达式的值.
2. 拿到"表达式的值"和"case后边的值"进行一一对比.
3. 如果一样,就执行对应的语句体.
4. 如果不一样,就继续往下对比.
5. 如果都不一样,则最终执行default中的语句.
注意事项
6. 表达式的值在进行对比的时候,使用的是"==="进行对比,也就是说,对比时也判断类型.
7. break关键字不建议省略,如果非要省略,会产生穿透效果.
2，循环语句
1，for循环
for(初始化语句; 循环判断语句; 循环变化语句){
循环体语句;
}
2,while循环
初始化语句;
while(循环判断语句){
循环体语句;
循环变化语句;
}
3,循环控制语句
break 中止整个循环，后续的循环全部都不执行了
continue 中止本次循环，继续下次循环的代码。
无限循环
while(true){ } 来构造“无限”循环，需要使用break退出循环。（常用）
for(;;){ } 也可以来构造“无限”循环，同样需要使用break退出循环。
嵌套循环
【外层循环的循环体】是另外一个【循环】
四，JS方法(函数)
1，方法的定义
function 方法名(){
//方法体：具体要执行的代码
}
2，方法的调用
方法名();
注意事项
1. 方法不调用不执行。
2. 方法在哪调用就在哪执行。
3. 方法名不能重复(后边方法会自动覆盖前边的同名方法)。
4. 方法不能嵌套定义(虽然不抱错但不建议)
5. 方法必须先定义后调用
标准语法
方法定义
function 方法名(参数){
//方法体：具体要执行的代码
return 返回值;
}
方法调用
方法名(参数); //无返回值方法的调用
let 变量名 = 方法名(参数); //有返回值方法的调用
3，递归
递归：在编程中体现为"方法自己调用自己"。主要用来解决"有规律，但规律不工整"的问题。
实现：
1. 总结规律(所有规律)
2. 通过方法实现规律(实现不了的敌方用文字描述)。
3. 假装方法已经完成，利用完成后的方法替换"文字描述"
斐波那契数列
//求n个的兔子个数
function dg(n){
if(n==1 || n == 2){
return 1;
}else{
return dg(n-1) + dg(n-2);
}
}
let count = dg(24);
document.write(count);
欧克，看到这里你已经打败了百分之20的JS同行了，继续加油！！！
五，JS对象
1，创建对象
对象使用{}进行声明(创建)，其本身可以看作是一个特殊的变量，与之前声明的变量没有本质上的区别。
需要注意的是，声明对象时，一般需要包含成员变量和成员方法。
// 定义变量 -> 创建变量
let str = 'hello world!'
// 定义方法 -> 创建方法
let fun = function(){ }
// 定义对象 -> 创建对象
let user = {
//成员变量(属性)
//成员方法(行为)
}
2，对象属性
在对象中，描述性的信息称为属性(成员变量)，如人的姓名、身高、年龄、性别等，一般是名词性的
1. 属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
2. 多个属性之间使用英文 , 分隔
3. 属性就是依附在对象上的变量。
4. 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
3，对象方法
描述对象时，行为性的信息称为方法(成员方法)，如跑步、唱歌等，一般是动词性的，其本质是函数。
1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
2. 多个属性之间使用英文 , 分隔
3. 方法是依附在对象中的函数
4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
注意事项
无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。
4，JavaScript 内置对象
1，Math对象
Math对象用于执行常用的数学任务，它包含了若干个数字常量和函数。Math对象在使用时不需创建对象，可以直接使用其方法。
方法 描述 示例
round() 四舍五入，得到整数 Math.round(10.1);
random() 返回0~1之间的随机数 Math.random();
floor() 对数进行下舍入 Math.floor(10.1);
ceil() 对数进行上舍入 Math.ceil(10.1);
2，Date对象
Date对象用于操作日期和时间。需要注意的是，Date对象需要先创建对象，然后才能使用方法。
方法 描述
getDate() 返回Date对象的一个月中的每一天，其值介于1~31之间
getDay() 返回Date对象的星期中的某一天，其值介于0~6之间
getHours() 返回Date对象的小时数，其值介于0~23之间
getMinutes() 返回Date对象的分钟数，其值介于0~59之间
getSeconds() 返回Date对象的秒，其值介于0~59之间
getMonth() 返回Date对象的月数，其值介于0~11之间
getFullYear() 返回Date对象的年数，其值为4位数
getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数
六，数组与集合
1，创建数组
实例化 Array对象
实例化Array对象的方式是通过关键字new实现的。实例化数组的基础用法：
// 创建一个数组变量（不带值创建）空数组
let array_value = new Array();
// 创建一个数组变量(带值创建)
let score = new Array(80,95,89);
// 创建一个数据变量（混合数据类型）
let some_type = new Array("abc",123,true,null);
字面量创建
在JavaScript中，使用“[ ]”方括号来表示这是一个数组变量，使用的方式如下：
// 创建一个数组变量（不带值创建）空数组
let array_value = []; 相当于 new Array();
// 创建一个数组变量(带值创建)
let score = [80,95,85,72,77,6]; //相当于new Array(80,95,85,72,77,66,88,99);
// 创建一个数据变量（混合数据类型）
let some_type = ["abc",123,true,null]; //相当于 new Array("abc",123,true,null);
// 可以创建 空 元素 这种空元素 不是 null，null 也是一种对象类型
let no_value = [123,,,,"abc"];
2， 数组的基本操作
关键字 描述
length 属性，获取数组的长度(数组中存储元素的个数)
push 方法，在最后的位置插入数据(可以插入多个)
unshift 方法，在最开始的位置插入数据(可以插入多个)
pop 方法，删除最后位置上的数据，并返回被删除数据
shift 方法，删除最开始位置上的数据，并返回被删除数据
sort 方法，对数组的内容进行排序
reverse 方法，对数组的内容进行反转
slice 方法，从原数组中拷贝部分数据成为新数组。
splice 方法，从原数组中截取一部分成为新数组。
join 方法，使用指定字符串对数组中的元素进行拼接。
注意事项
访问下标的时候注意最后一个下标，若超出数组长度进行访问，
则会显示undefired未定义，比如：数组长度若为n，则访问的最大有效
下标是n-1，下标的起始值是从0开始。
3，数组的遍历
1，for循环
for (let i = 0; i < array.length; i++) {
//代码块
}
2， for…in
//for…in主要使用在对对象的遍历，数组也是对象类型，所以可以使用for in的方式。
//对数组使用for in则item是数组元素下标，object是数组本身。
for(const item in object) {
//代码块
}
欧克，看到这里你已经打败了百分之40的JS同行了，继续加油！！！
七，字符串与正则表达式
1，String对象
1，创建String
let str1 = "Hello World";
let str2 = 'Hello World';
ES6之后，支持支持模板字符串，可以进行变量插值
let name = "John";
let str3 = `Hello, ${name}`;
2，属性和方法
length 获取字符串对象的长度
charAt(index) 返回在指定位置的字符
indexOf(str) 查找某个指定字符串str在字符串中首次出现的位置
lastIndexOf(str) 查找某个指定字符串str在字符串中最后一次出现的位置
split(str) 将字符串分割为字符串数组
startsWith(str) 判断字符串是否以指定字符串str开头
endsWith(str) 判断字符串是否是指定字符串str结尾
substring(start,end) 返回位于指定索引start和end之间的字符串，并且包含start，不包含end
toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写
trim() 去掉字符串两边的所有空格
2，正则表达式
正则表达式是一套字符串规则，用来校验字符串是否符合指定的"规则"。
1，正则规则
正则表达式的规则可以分为三类：字符规则，次数规则，边界规则。
需要注意的是：次数规则必须是结合字符规则一块使用。
字符规则
写法 含义
a 表示必须是a，直接写字符，就必须是这个字符
[abc] 表示必须是a,b,c中的任意一个
[0-9]也可以写作\d 表示0到9之间任意一个数字
[a-zA-z0-9_]也可以写作\w 表示"英文大小写字母和数字”中任意一个
. 表示任意一个字符
次数规则
写法 含义
+ 表示至少出现1次
？ 表示出现0次或1次
* 表示出现0次或多次
{m,n} 表示最少出现m次最多出现n次
{m, } 表示最少出现m次，多了不限
{m} 表示固定出现m次
边界规则
写法 含义
^ 表示开始
$ 表示结束
2，使用方式
在JavaScript中，通过RegExp对象来定义正则表达式，通过test() 方法检查一个字符串是否匹配正则表达式
创建 RegExp 对象
//方式1：直接量创建
let regex1 = /hello/;
//方式2：通过构造方法创建，也就是new的方式创建
let regex2 = new RegExp("hello");
方法 描述
test() 测试字符串中的匹配项。返回 true 或 false。
正则表达式的使用不区分语言，也就是说他可以在任何开发语言中使用，只要是对字符串进行过滤、筛选或者判断的地方，都可以使用到正则表达式，当然，其最常见的使用场景有如下几个方面：
1. 表单验证（如验证邮箱、电话号码等格式）
2. 文本搜索和替换
3. 解析和提取特定格式的文本数据
八，JavaScript高级
1，let关键字
let关键字用来声明变量，使用 let声明的变量有几个特点：
1. 不允许重复声明
2. 块儿级作用域
3. 不存在变量提升（不能在未定义之前使用）
4. 不影响作用域链
2，const关键字
const 关键字用来声明常量， const声明有以下特点：
1. 声明必须赋初始值
2. 标识符一般为大写
3. 不允许重复声明
4. 值不允许修改
5. 块儿级作用域
3，箭头函数
箭头函数是ES6中的一个新特性，它提供了一种更简洁的函数声明方式。箭头函数使用“=>”符号来分隔函数参数和函数体
4， 模板字面量
模板字面量是ES6中的另一个新特性，它提供了一种更简单的方式来创建字符串。模板字面量使用反引号（`）来包含字符串，并使用${}来插入变量
5，解构表达式
解构表达式是ES6中的一个新特性，它提供了一种更简单的方式来从数组或对象中提取值。
let person = { name: "John", age: 30 };
let { name, age } = person;
console.log(name); // John
console.log(age); // 30
6，展开运算符
展开运算符是ES6中的另一个新特性，它提供了一种更简单的方式来展开数组或对象。
let person1 = { name: "John", age: 30 };
let person2 = { ...person1, city: "New York" };
console.log(person2); // { name: "John", age: 30, city: "New York" }
7， 类和继承
- ES6 引入了 class 关键字，使对象的创建和继承更加清晰和简洁。
- 类可以包含属性、方法和静态方法等。
//定义Person类
class Person {
//构造方法
constructor(name, age) {
this.name = name;
this.age = age;
}
//普通方法
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
//静态方法
static hello() {
return "Hello!!";
}
}
//创建对象并使用
let p = new Person("张三",13);
console.log(p)
p.show();
Person.fun();
8，模块化开发
模块化开发是ES6中的一个新特性，它提供了一种更简单的方式来组织和管理代码。模块需要使用import和export关键字来导入和导出代码。模块化的作用：
1. 提高代码组织和可维护性：模块化可以将代码分割为独立的文件，每个文件包含特定功能或目的的代码。
2. 避免变量名冲突： 每个模块都存在自己的作用域，并且不会与其他模块的变量或函数发生冲突 。
3. 避免全局变量污染：块化使用作用域来隔离变量和函数，避免了全局命名空间的污染和命名冲突。
4. 提高安全性和可靠性：每个模块只暴露必要的接口，其他模块无法直接访问和修改模块内部的私有变量和函数 。
//没有export的成员，相当于私有，外界无法访问。
let name = "张三";
let age = 23;
//通过export导出的内容才可以外界访问
export let msg = "我爱JS！";
export let show = function(){
console.log(`我是show方法，名字:${name}, 年龄:${age}, 信息:${msg}`)
}
欧克，看到这里你已经打败了百分之40的JS同行了，继续加油！！！
九，DOM文档对象模型
1，DOM操作-查找节点
1， 查找节点-直接查找
因为Document代表的是整个HTML文档，所以文档中的所有内容都包含在Document中。
如果想获取(访问)到某个HTML文档的节点，则需要通过Document的方法来完成。
访问HTML文档的节点主要有两种方式，一种是直接访问指定节点，另外一种是根据节点的层次关系访问节点。
直接访问指定节点就是一个查找方法就能找到相关的元素。在JavaScript中，有多种方法选取元素。这类方法有：
方法名 描述
document.getElementById(id) 返回匹配指定id属性的元素节点
document.getElementsByName(name) 用于选择拥有name属性的HTML元素
document.getElementsByClassName(className) 返回包括了所有class名字符合指定条件的元素
document.getElementsByTagName(tagName) 返回所有指定HTML标签的元素
document.querySelector(selector) 接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点
document.querySelectorAll(selectors) 接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点
2，查找节点-层级查找
属性名 描述
parentNode 该节点的父节点，parentElement获取父元素。
childNodes 该节点的所有子节点。children获取所有子元素。
firstChild 该节点的第一个子节点。firstElementChild获取第一个子元素。
lastChild 该节点的最后一个子节点。lastElementChild获取最后一个子元素。
nextSibling 该节点的后一个兄弟节点。nextElementSibling获取后一个兄弟元素。
previoursSibling 该节点的前一个兄弟节点。previousElementSibling获取前一个兄弟元素。
2，DOM操作-操作内容
在获取元素之后，可以根据开发功能的需要，获取或修改制定元素的内容。元素的内容包括含普通字符串和带有元素标签的字符串，所以，Element对象提供了4种属性进行操作：
属性名 描述
innerHTML 设置或获取位于对象起始和结束标签内的HTML
innerText 设置或获取位于对象起始和结束标签内的文本
outerHTML 设置或获取对象及其内容的HTML形式
outerText 设置(包括标签)或获取(不包括标签)对象的文本
3，DOM操作-操作属性
DOM会把HTML文档映射为一棵DOM树，HTML文档中的每个标签都是DOM树上的一个节点，而DOM树上的每个节点其实就是一个JS对象。所以，如果想操作HTML文档中的某个标签，则找到这个标签在DOM数上对应的元素节点，直接操作这个 JS对象即可。操作这个JS对象的属性，就可以看作是在操作标签的属性。
DOM操作-操作属性
1， 获取标签属性
//1.获取标签
let city = document.getElementById("city");
//2.操作属性-获取所有属性
console.log(city.attributes);
2，操作属性-传统模式
传统操作方式也叫做标准操作模式，操作的是Attribute(特性)，Attribute是标签语言中的概念。传统方式操作的本质上是“页面标签本身”。
方法 描述
element.getAttribute("属性名") 获取标签中指定属性的值。
element.setAttribute("属性名",属性值) 修改标签中指定属性的值。
element.hasAttribute("属性名") 判断标签中是否有指定的属性。
element.removeAttribute("属性名") 删除标签中指定的属性。
3，操作属性-快捷模式
快捷方式操作的是Property(属性)。Property是JS对象的概念，用于描述JavaScript对象的成员。快捷方式操作的本质上是“获取到的标签对象”。
注意事项
1. 快捷方式只能操作标签固有属性(标签本身就有的属性)。
2. 快捷方式操作的是“标签的JS对象”，所以修改的也是对象的属性，不涉及标签。
3. 传统方式操作的是“页面标签本身”，所以修改和获取都只看标签本身，不关心对象。
4，DOM操作-操作结构
在网页开发中，如果想要动态地改变网页内容，可以对现有节点属性、节点、节点样式进行操作，修改其内容。对于可变数据的内容的加载显示，就需要根据数据的内容进行动态操作HTML元素，这个操作包括增、删、改、查。增就是新增元素标签，删就是删除元素标签。
方法 描述
document.createElement(tagName) 创建一个元素节点对象
document.createAttribute(attrName) 创建属性节点对象
document.createTextNode(txtStr) 创建文本节点对象
element.appendChild(new_element) 向节点的子节点列表的末尾添加新的子节点
element.insertBefore(newNode,oldNode) 添加子节点，在oldNode前边添加入newNode
element.remove() 删除自身
element.removeChild(childNode) 父节点删除指定子节点
欧克，看到这里你已经打败了百分之60的JS同行了，继续加油！！！
十，Style对象与Form对象
1，Style 对象
1，对象概述
- style对象代表一个单独的样式声明，可以从应用样式的文档元素获取。
- style对象是DOM元素中的一个属性，它包含了元素的样式信息。
- 通过style对象，可以直接读取或设置元素的样式属性。
- 可以通过style读取或设置元素的行内样式
基本语法
//获取元素象样式
let result = 元素.style.样式属性;
//设置元素样式
元素.style.样式属性 = "样式值";
样式属性
Style对象所包含的样式属性非常多，包含了所有的CSS样式属性，且与CSS中样式属性相互对应。
Style对象的常见属性如下：
类别 属性
背景 backgroundColor、backgroundImage、backgroundRepeat
文本 fontSize、fontWeight、textAlign、textDecoration、font、color
边距 padding、paddingTop 、paddingBottom、paddingLeft、paddingRight
边框 border、borderTop、borderBottom、borderLeft、borderRight
layout width、height、display、visibility
位置 position、top、left、right、bottom、zIndex
注意事项
Style属性和CSS一一对应，但从写法上来说有少许区别。对于简单属性(只有一个单词)而言，CSS和JS的语法一致。但对于复合属性(多个单词)，则CSS和JS的语法不太一致。
CSS复合属性：支持的是连字符命名法，例如：font-size
JS中复合属性： 支持的是小驼峰命名法，例如：fontSize
CSS语法:(不区分大小写) JavaScript语法(区分大小写)
border-bottom borderBottom
background-color backgroundColor
list-style listStyle
font-size fontSize
2，Form 对象
Form 对象代表一个 HTML 表单。
在 HTML 文档中，每出现一次，Form 对象就会被创建。 表单用户通常用于收集用户数据，包含了 input 元素如：文本字段，复选框，单选框，提交按钮等待。表单也可以说选项菜单, textarea, fieldset, legend, 和 label 元素。 表单用于向服务端发送数据。
1. 表单项标签必须放在表单标签中，否则表单项标签会失效。
2. 表单项标签必须有name属性，否则该标签不会被表单提交
1，Form 对象属性
属性 描述
action 表示表单的提交位置（可以通过该属性获取或者设置提交位置）。
method 表示表单的提交方式（可以通过该属性获取或者设置提交方式)。
enctype 表示表单的提交形式（也可以理解为表单的编码方式）。
① action
action 属性可设置或返回表单的 action 属性。action默认值是“当前页面”。
action 属性定义了当表单被提交时数据被送往何处。
② method
method 属性可设置或者返回表单 method 属性值。默认值是“get”。
method 属性制订了如何发送表单数据 (表单数据提交地址在action属性中指定)。
值 描述
get 参数在地址栏中，数据大小有限制，参数不安全；
post 参数在请求体中，数据大小没限制，数据安全；
③ enctype
enctype 属性可设置或返回用于编码表单内容的 MIME 类型。
如果表单没有 enctype 属性，那么当提交文本时的默认值是 “application/x-www-form-urlencoded”。
当表中有 input type="file"标签时，enctype 属性值必须是 “multipart/form-data”。
值 描述
application/x-www-form-urlencoded 默认值。数据在发送前所有字符都会进行URL编码。
text/plain 不进行特殊编码，但空格会转换为"+"符号。注意：一般用于发送邮件。
multipart/form-data 以多部分表单形式提交，注意：主要用于文件上传。
2，Form 对象方法
方法 描述
reset() 重置一个表单，reset() 方法可以重置表单所有元素的值 (与点击 Reset 按钮效果一致）。
submit() 提交一个表单，submit() 方法用于提交表单 (与点击 Submit 按钮效果一致)。
欧克，看到这里你已经打败了百分之70的JS同行了，即将结束，继续加油！！！
十一，BOM
1，BOM对象
1， window对象
window是BOM的核心对象，它表示浏览器的一个实例，可以理解为代表整个浏览器。
window对象处于JavaScript结构的最顶层，对于每个打开的窗口，都会有一个默认的window对象。
2，navigator对象了解
navigator对象包含有关浏览器的信息，常用的属性是userAgent和platform。
属性名 描述
userAgent 只读，获取用户浏览器的类型
platform 只读，浏览器所在的系统平台，已弃用。
appVersion 只读，浏览器版本号，已弃用。
appName 只读，浏览器产品名称，已弃用。
cookieEnabled 只读，是否启用Cookies
3，location对象
location对象实际上就是页面的地址对象。简单地说就是将URL封装成了一个对象。
常见属性
属性 描述
href 整个URL。修改这个值可以实现页面跳转
protocol URL所使用的协议，如http以及https
host URL中的主机名(域名)和端口号
hostname 仅主机名(域名)，不含端口号
port URL中的端口号。如果URL中没有显示端口号，则显示是80
pathname 域名后面的路径名，如http://www.aaa.com/page#somehash，这一属性的值为page
search 获取URL中?号后面的字符串，如http://www.aaa.com?name=zhangsan
hash URL中处于Hash符号(#)后面的字符，如http://www.aaa.com/page#somehash
常见方法
方法 描述
assign() 页面跳转，如：location.assign("http://www.baidu.com");
replace() 页面替换(原页面不会出现在历史记录)。如：location.replace("http://www.baidu.com");
reload() 重新载入当前页面：location.reload();
4， history对象了解
history对象提供了通过访问者浏览历史向前和向后移动的方法。具体的说，可以使用back（）、forward（）、go（）。这可能不言而喻，但还要说明一下：back（）和forward（）分别向后和向前移动一个页面，go（）方法移动到参数指定的索引值。
history对象保存用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL。但是可以在不知道实际URL的情况下实现后退和前进。所有浏览器都支持history对象。
常见属性
属性 描述
length history对象中的记录数
对象方法
方法 描述
back() 前往浏览器历史条目前一个URL，类似后退。
forward() 前往浏览器历史条目下一个URL，类似前进。
go(num) 浏览器在history对象中向前（正数）或者向后（负数）
5，screen对象了解
screen对象实际上就是屏幕对象，包含有关访问者屏幕的信息。 简单地说就是将显示屏信息封装成了一个对象。
常见属性
属性 描述
availHeight 只读，返回屏幕高度（不包括 Windows 任务栏）。
availWidth 只读，返回屏幕宽度（不包括 Windows 任务栏）。
height 只读，返回屏幕的总高度。
width 只读，返回屏幕的总宽度。
三，Window方法-入口函数
onload是页面的入口函数(也叫做页面加载事件)，当页面文档内容完全加载完成后自动执行处理函数。
注意：onload入口函数，只能写一次，如果有多个，会以最后一个window.onload为准。
HTML文档流的加载是“从上往下，从左往右”，这其中也包含CSS和JS脚本，所以在加载的时候就执行脚本中的语句，因为页面还没有加载到按钮元素，发现没有找到button元素，也就是没有value属性，所以就报错。
解决方案
第一种：将JS代码移到body之后加载，原理是body加载完所有的页面内容之后再操作元素标签。
第二种：使用window.onload()方法
四，Window方法-提示框
window对象提供了三种方法用来向用户简单显示的对话框：
方法 描述
alert(msg) 提示框，除提示信息外，只有确定按钮。
confirm(msg) 询问框。除提示信息外，只有确定和取消两个按钮。
prompt(msg,value) 对话框。可以有提示信息，且有一个输入框，并有确定和取消两个按钮。
五，Window方法-定时器
定时器指程序不会立即执行，而是在设定的时间间隔后再执行代码结构。
JS中有两种定时器：
一次性定时器：setTimeout(function, milliseconds）程序等待一定的时间间隔后，自动执行，只执行一次。
周期性定时器：setInterval(function, milliseconds）程序每隔一段时间间隔，就自动反复执行。
1，单次定时器
单次定时器也叫做一次性定时器，指的是程序等待一定的时间间隔后，自动执行，且只执行一次。
window.setTimeout(function, milliseconds);
注意事项
1. 第一个参数function，表示要制定的方法。
2. 第二个参数milliseconds，表示时间间隔的毫秒值。
3. 方法会返回一个定时器序号，是这个定时器的唯一标识。
2，循环定时器
循环定时器指的是从定时器被创建的那一刻起，每隔固定的一段时间就执行一次，且一直重复执行下去。
相关语法
window.setInterval(function, milliseconds);
注意事项
1. 第一个参数function，表示要制定的方法。
2. 第二个参数milliseconds，表示时间间隔的毫秒值。
3. 方法会返回一个定时器序号，是这个定时器的唯一标识。
3，终止定时器
定时器启动时，会获得一个定时器序号，如果一个定时器需要被停止。则必须使用变量保存定时器的序号。
停止单次定时器的方法是：clearTimeout(timerId);
停止循环定时器的方法是：clearInterval(timerId);
欧克，看到这里你已经打败了百分之85的JS同行了，即将结束，继续加油！！！
十二，事件处理
JS与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件在浏览器中是以对象的形式存在的，即event，触发一个事件，就会产生一个事件对象event，该对象包含着所有与事件有关的信息，包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
1，事件绑定
所谓的事件绑定，就是给某个标签的某个事件指定对应的事件处理的行为。简单来说，就是给元素的某个事件绑定方法，目的是为了让当前元素某个事件被触发时，可以做一些事情。DOM事件绑定可以分为3种：直接绑定，属性绑定和动态绑定。
1， 直接绑定
直接绑定是DOM0级就存在的绑定方式，具体指的是在元素身上直接书写事件的方式进行绑定。需要注意的是：事件都是以on开头，也就是on+事件名称的方式。
注意：
1. 可能存在时差问题。当事件处理函数书写在事件绑定的后边时，程序会报错。
2. 拓展事件处理程序的作用链将会是浏览器不兼容的
2，属性绑定
属性绑定也是DOM0级就存在的绑定方式，和直接绑定的区别在于，该种绑定方式是通过JS代码的形式实现。事件也是以on开头，也就是on+事件名称的方式。
el.事件名称 = 执行函数; //例如：btn.onclick = function(){ 事件处理逻辑 }
3，动态绑定
动态绑定是在DOM2级时才出现的功能，他们通过addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含三个参数，分别是绑定的事件处理的属性名称（没有on）、处理函数和是否在捕获时候执行事件处理函数。
2，常见事件
JS所提供的事件非常多，大概不到100种左右，但比较常用的大概有20种左右：
事件名称 描述
load 加载完成时触发
click 鼠标单击时触发
mouseover 当指针移动到元素或其中的子元素上时，发生此事件
mouseout 当用户将鼠标指针移出元素或其中的子元素时，发生此事件。
mousemove 在鼠标指针移动时发生
foucs 获得焦点时触发
blur 失去焦点时触发
change 域的内容改变时发生
submit 表单中的确认按钮被点击时发生
keydown 键盘上的按键按下时触发
keyup 键盘上的按键弹起时触发
resize 当调整浏览器窗口的大小时触发
scroll 拖动滚动条滚动时触发
3，事件流
1.标准事件模型
DOM事件（专指DOM2级事件）包含以下三个阶段，
1. 事件捕获阶段：从Document一直向下到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
2. 事件处理阶段：事件到达目标元素, 触发目标元素的监听函数
3. 事件冒泡阶段：从目标元素冒泡到Document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
2，事件捕获
在日常开发中，用户所添加的事件，默认采用的是冒泡模式，如果想使用捕捉模式，则需要通过addEventListener方法的参数进行特殊处理。addEventListener方法参数如下：
参数名 描述
type 必须。表示event事件名称，字符串，指定事件名。注意：不要使用“on”前缀。
listener 必须。function，指定事件触发时执行的回调函数。事件对象会作为第一个参数传入函数。
useCapture 可选。布尔值，指定事件的执行时机。false：默认值，在冒泡阶段执行。true：在捕捉阶段执行。
总结说明
1. 事件冒泡机制：是由微软团队提出的事件流。事件捕获机制：是由网景团队提出的事件流。
2. DOM0级事件处理中仅支持冒泡机制，不支持捕获机制。
3. 事件冒泡和事件捕获同时存在时，要先执行捕获流程，然后才是冒泡流程。
4. 现阶段业内主流主要使用的仍然是冒泡机制
4，事件对象
当DOM元素触发某个事件时， JS会自动产生一个事件对象event，该对象包含了所有与该事件有关的信息。
1，获取对象
JS函数中会内置一个名字为event的对象，该对象就是事件对象。需要注意的是IE 6、7、8要书写为window.event。
//获取事件对象：兼容性写法(所有浏览器都可以生效)
let ev = event || window.event;
2，event的属性
event对象包含了非常多的属性，需要注意的是，这些属性在大多数浏览器中都可以正常使用，但也有例外。
常见属性
属性 作用
timeStamp 返回事件生成的日期和时间
bubbles 返回布尔值，指示事件是否是起泡事件类型
button 返回当事件被触发时，哪个鼠标按钮被点击
pageX 光标相对于该网页的水平位置（ie无）
pageY 光标相对于该网页的垂直位置（ie无）
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
target 该事件被传送到的对象
type 事件的类型
clientX 光标相对于该网页的水平位置（当前可见区域）
clientY 作用光标相对于该网页的垂直位置
3，事件对象方法
前边提到的事件流，其默认行为是冒泡模式，但这个模式下，有可能会造成不必要的事件被触发，如果不想让这些的事件被触发，就需要阻止冒泡的行为，事件对象提供了阻止冒泡的方法：
常见方法
方法 描述
stopPropagation() 阻止冒泡
preventDefault() 阻止默认事件（默认行为），例如：a标签的跳转
阻止冒泡传递
在上一节的例子基础上，给最内层的p元素标签增加阻止冒泡行为，作用是当点击p元素标签时，冒泡事件只在p元素标签这一层就停止冒泡，不再往上传递。注意：想阻止哪一层冒泡事件的传递，就需要在指定层阻止冒泡事件，当然如果当前这一层以下确认没有事件响应，则不需要添加阻止冒泡事件。
阻止默认行为
对于一些特定的事件，浏览器有它默认的行为。比如：点击链接会进行跳转到指定的页面、点击鼠标右键会呼出浏览器右键菜单、填写表单时按回车会自动提交到服务器等。event除了可以组织冒泡行为外，还可以阻止默认行为。
当然，默认的浏览器行为和冒泡行为是独立的，取消事件默认行为是不会取消事件冒泡的，反之亦然。同一个元素的多个事件处理函数也是相互独立的。
欧克，看到这里你已经打败了百分之99的JS同行了，剩下的百分之一就等实践来解决吧！