前端那些事五（JS2）

学习视频：https://www.bilibili.com/video/BV1YW411T7GX?p=16

参考文章：https://juejin.im/post/6844904160719011848#heading-39

1. js基本简介

前期为了处理网页中前端验证，优化体验，将验证放在客户端。

1. 组成部分：

• 以JavaScript+JScript=>ECMAScript（ES核心）为标准文档，由浏览器厂商实现JS引擎
• DOM 文本对象模型： 如何通过js操作网页
• BOM浏览器对象模型：如何通过js操作浏览器

1. JS特点：

• 解释性语言，无需编译
• 类似C和JAVA的语法结构
• 动态语言
• 基于原型的面向对象

1. 字面量和变量

• 字面量（常量）：是不可改变的值
• 变量：用于保存字面量，可以改变值。
• 声明变量：使用var来声明一个变量，var a; 为变量赋值，b=123;
• undefined：var a; 声明了一个变量，但是没有赋值。

1. var let const的区别

2. var：声明变量
3. let：ES6新增的命令，也用于声明变量
4. const：

• 一旦声明必须赋值,不能使用null占位。
• 声明后不能再修改
• 如果声明的是复合类型数据，可以修改其属性

var（ES5）

let（ES6）

const（ES6）

变量提升

不存在变量提升

声明变量是全局的

仅在块级作用域内有效

可以重复声明

不能在同一块作用域内重复声明

let可以改属性

const不能改属性

参考： https://www.cnblogs.com/zhaoxiaoying/p/9031890.html

1. 标识符

自主命名的都可以叫标识符（变量名，函数名，属性名）。

命名规则：

• 可以含字母，数字，_，$
• 不能以数字开头
• 不能是ES的关键字，保留字
• 驼峰命名

JS底层保存标识符时实际采用的Unicode(UTF-8)编码，所有的UTF-8都可以作为标识符。

1. 数据类型（字面量的类型）

1. String类型：字符串，对称引号引起来。

转义字符：常用" ' n

1. Number类型：数值（Int整数和Float浮点数）

• JS中可以表达的最大值用Number.MAX_VALUE，超过最大值Infinity（正无穷），最小值-Infinity（负无穷），typeof返回number，表示大于0的最小值用MIN_VALUE。
• typeof类型检测：可以使用运算符typeof来检查一个变量的类型： typeof 变量
• NaN：一个特殊数字，Not a number，typeof NaN 返回number
• isNaN：判断b的值是否是NaN，所以可以用isNaN()函数来判断一个值是否是NaN

var b = NaN;

console.log(isNaN(b)); // 返回true

• JS进行整数基本可以保证精确，计算浮点元素可能不精确，比如（0.1+0.2），计算钱的数字放在服务器计算。

1. Boolean类型：布尔值（true/false），主要用来做逻辑判断。
2. Null：空值，未开辟空间。

• typeof null：返回object，机器码空指针，低三位000，也是js遗留的bug

1. Undefined：开辟空间未赋值

• typeof undefined：返回undefined

1. Object：对象，引用数据类型，属于一种复合的数据类型，在对象中可以保存不同类型数据的属性。

• 不足：基本数据类型都是单一的值，值之间没有关系。
• 基本类型储存在栈中，对象储存在堆中，

1. 强制类型转换

将一个数据类型强制转换成其他的数据类型

1. 将其他类型转换成String类型

• 方法一：调用被转换类型的toString()方法；
• 该方法不会影响到原变量，它会将转换的结果返回。
• 缺点：有局限性，null和undefined没有toString()方法。
• 举例：var a = 123; //number a = a.toString(); //返回string类型“123”
• 方法二：调用String()函数，并将被转换的函数作为参数传递给函数；
• 与toString()方法的区别：String()函数会将null和undefined直接转换成字符串"null"和"undefined"
• 举例：var b = 123; //number b = String(b); //返回string类型“123”
• 方法三（隐式类型）：任何字符的值和字符串做加法运算，都会先转为字符串，然后做拼串，所以可以给字符加上空字符串做拼串。
• 举例：var c = 123; //number c = c + ""; //返回string类型“123”

1. 将其他类型转换成Number类型

• 方法一：调用Number()函数；
• 缺点：有局限性，"123px"字符串无法转换。

• 方法二：作用于字符串；
• parseInt()函数和parseFloat()函数；
• 举例：var b = "456px"; //string b = parseInt(b); //返回Number类型“456”
• 如果对非String类型使用parseInt()函数，会将其先转为String后再操作。
• 举例：var c = true //boolean

c = parseInt(c) =parseInt("true")=NaN; //返回Number类型NaN

• 方法三（隐式类型）：可以对一个其他数据类型使用 +，将其转换number，原理和Number()函数一样。
• 举例：var a = "123"; //string a = +a; //返回number类型123

var b = true; //boolean b = +b; //返回number类型1

1. 将其他类型转换成Boolean类型

• 方法一：调用Boolean()函数；

除了undefined、null、false、''、0、NaN转换时false，其余都为true

• 方法二（隐式类型）：可以为任意类型进行两次非运算，即可转为布尔值。同Boolean函数()。
• 举例：var a = "123"; //string a = !!a; //返回boolean类型true

对象类型转换： 默认调用{}的valueOf

1. 运算符（也叫操作符）

可以对一个或多个值进行运算，并获取运算结果，都会返回结果，比如typeof就是运算符，可以来获得一个值的类型，它会将该值的数型以字符串的形式返回，number，。string，Boolean，undefined，object。

1. 算数运算符

• +：会拼串
• • ：都会转成number
• • ：
• / :
• %: 求模运算，取余数。

区别：任何值做- /运算时都会将值转换成number，可以利用这个特点做隐式的类型转换，-0 /1 1将其转换为number，原理和Number()函数一样，使用起来更简单。

1. result = true + 1； // 返回2 ，对非number计算时，会将值先转为number再计算
2. result = true + false；// 返回1
3. result = 2 + NaN； // 返回NaN，任何数和NaN进行计算，都等于NaN
4. result = "123"+"456" // 返回123456，两个字符串相加，会做拼串，长字符串可以采用这种方式做拼串。
5. result = "123" + 2 // 返回1232，
6. result = true + "123" // 返回true123，任何字符的值和字符串做运算，都会将其先转为字符串，再做拼串

7. 一元运算符

• ：不会对数字产生影响
• ：负号对数字进行取反，对非number值会将其转为number再计算，

（隐式类型转换）：可以对一个其他数据类型使用+，将其转换number，原理和Number()函数一样。

自增和自减：

• 自增：在自身的基础上增加1，对于一个变量自增以后，原变量值会立即自增1，自增分为2种：后++（a++）和前++（++a），都会使原变量自增1。

区别：a++和++a的值不同，a++先赋值后运算，++a先运算后赋值。

旧值：a++等于原变量的值（自增前的值）

新值：++a的值等于新值（自增后的值）

• 自减：自减分为2种：后--（a--）和前--（--a），都会使原变量自减1。

1. 逻辑运算符

• ! 非：取反

1. 对布尔值进行取反；
2. 对非布尔值取反，先转为布尔值再运算

var a = true; a = !a //返回false

var b = 10; b=!b //返回false

1. （隐式类型转换）：可以为任意类型进行两次非运算，即可转为布尔值。同Boolean函数()

var a = 10; a=!!a //返回true

• && 与：两端都是true，则返回true，只要有一个false，则返回false。

js中的“与”属于短路的“与”，如果第一个值为false，则不会看第2个值。

result = false && true; // false

逻辑“与”和短路“与”

• || 或：只要有一个true，则返回true。
• && 和 || 非布尔值的情况

对于非布尔值进行与或运算时，则会将其转换为布尔值，然后再运算，并且返回原值。

var result = 1 && 2 //返回2 如果两个值都为true，返回后边的

如果两个值中有false，则返回靠前的false。

1. 赋值运算符

• = ：可以将符号右侧的值赋值给符号左侧的值
• +=： a+=5 等价 a = a+5
• -=： a-=5 等价 a = a-5
• =： a=5 等价 a = a*5
• /=： a/=5 等价 a = a/5
• %=： a%=5 等价 a = a%5

1. 关系运算符

通过关系运算符可以比较两个值之间的大小关系，如果关系成立会返回true，如果关系不成立则返回false。

• 大于号：判断符号左侧的值是否大于右侧的，如果关系成立返回true。

• = 大于等于

• < 小于
• <= 小于等于
• 非数值情况：对非数值进行比较时，会将其转换为数字再进行比较。
• 任何值和NaN做任何比较都是false。

console.log(10 <= "hello"); //false

• 如果符号两侧的值都是字符串时，不会将其转换为数字比较，而会比较字符串中字符的Unicode编码，比较字符编码时时一位一位进行比较，比较字符串的时候要进行转型，可以对英文进行排序。

console.log("11" < "5"); //true

console.log("a" < "b"); //true

• 在字符串中使用转义字符输入Unicode编码： u四位编码 （这里编码十六进制）
• 在网页中使用Unicode编码：编码；（这里编码是十进制）

1. 相等运算符

使用相等运算符用来比较两个值是否相等，相等返回true。

• == 相等：使用==比较两个值时，如果类型不同，则会自动进行类型转换，然后再进行比较，大部分时候转成number进行比较。

console.log(true == "1"); //true 转成number

• undefined衍生自null，所以这两个值做相等判断时，会返回true。

console.log(undefined == null); //返回true

• NaN不和任何值相等，包括他本身，所以用isNaN()

console.log(NaN == NaN); // 返回false

• 判断b的值是否是NaN，所以可以用isNaN()函数来判断一个值是否是NaN

var b = NaN;

console.log(isNaN(b)); // 返回true

• !=不相等：用来判断两个值是否不相等，不相等也会对变量进行类型转换。
• ===全等：判断两个值是否全等，不会做类型转换。
• !==不全等：用来判断两个值是否不全等，不会做自动类型转换。

1. 条件运算符（三元运算符）

语法：条件表达式?语句1:语句2；

条件运算符在执行时，首先对条件表达式进行求值，

如果该值为true，则执行语句1，并返回执行结果

如果该值为false，则执行语句2，并返回执行结果

false?alert("语句1"):alert("语句2")： // 语句2

1. ，运算符

, 运算符 ：使用，可以分割多个语句，声明多个变量

var a = 1, b =2 , c= 3;

1. 运算符的优先级

• 运算符优先级表：（如果优先级相同，从左往右算。）

可以通过加（）改变优先级。

• 先乘除后加减
• &&的优先级大于||

var result = 1 || 2 && 3 //返回

• 如果||的优先级高，或者两个一样高，则应该返回3
• 如果与的优先级高，则应该返回1

1. 语句 代码块

语句是由上自下的顺序一条条执行，在js中可以使用{}来为语句进行分组。

同一个{}中的语句我们称为一组语句，要么都执行，要么都不执行。

一个{}中的语句我们也称为一个代码块，在代码块后面不用再编写；了。

js在的代码块只具有分组的作用，代码块的内容在外部都是完全可见的

1. 流程控制语句：

通过流程控制语句可以控制执行流程，

语句的分类：

1. 条件判断语句 （if语句）
2. 条件分支语句 （switch语句）
3. 循环语句

4. 条件判断语句 if...else...

if语句：if语句在执行时，会先对条件表达式进行求值判断，如果表达式值为true，则执行if后的语句，if语句只能控制紧随其后的那个语句。

语法一：if语句

if(条件表达式) {

语句

}

语法二：if...else...语句

if(条件表达式) {

语句...

} else {

语句...

}

语法三： if...else if... else 语句

if(条件表达式) {

语句...

} else if(条件表达式){

语句...

} else if {

语句...

}

prompt()函数：可以弹出带文本框的提示框，用户输入的内容将会作为函数返回值返回，可以定义一个变量，返回值类型是string。

冒泡排序：

1. 条件分支语句 switch...case...

switch语句：

执行流程：switch...case...语句在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，如果比较结果为true，则从当前case处进行执行代码，当前擦色后的代码都会执行，所以要加break，确保只执行当前case语句。

语法：

switch(条件表达式) {

case 表达式:

语句...

break;

default : // 同else

语句...

break;

}

1. 循环语句 while/do...while.../if

2. while循环：

执行流程：while语句在执行时，先对条件表达式进行求职判断，如果值为true，则执行循环体，值为true，则继续循环，以此类推，如果值为false，则终止循环。

语法： while(条件表达式) {

语句... //{}里的循环体

}

像这种条件表达式写死为true的循环叫死循环，除非浏览器关闭，死循环在开发中慎用，可以使用break来终止循环。

while(true) {

语句... //{}里的循环体

if(n == 10){

break; // 退出循环

}

}

创建一个循环需要三个步骤：

• 1. 初始化一个变量 var i = 0;
• 1. 在循环中设置一个条件表达式

while(i < 10){

alert(i);

//3. 定义一个更新表达式，每次更新初始化变量

i++;

}

1. do... while... 循环

区别： do...while先执行后判断。while是先判断后执行。do...while可以保证循环体至少执行一次，while不能，日常中while用的更多。

语法： do {

语句... //{}里的循环体

} while (条件表达式)

1. for 循环：

语法： for (①初始化表达式；②条件表达式；④更新表达式) {

③语句... //{}里的循环体

}

执行顺序：①②③④ ②③④ ②③④

1. for、forEach 、for in、for of 循环的区别

相同点：都可以遍历数组；

区别：

1. for：缺点：不能直接遍历对象。
2. forEach()：缺点：不能直接遍历对象，循环不能跳出。
3. for...in：优点：可以直接遍历对象，缺点：消耗性能；保存的是键名，返回 0 1 2 3
4. for...of【最优】：可遍历array,object,string,map,set等，可以跳出循环；保存的是键值，返回 arr1 arr2 arr3

缺点：不适用于处理原有的原生对象。

10.31-问题汇总

参考： https://blog.csdn.net/wjx666666/article/details/104940660

1. break和continue

break：

• break可以用来退出switch或循环语句，不能在if语句中使用break和continue
• break默认只对离他最近的循环产生影响。
• 可以为循环语句创建一个label，来标识当前的循环，break后加上label名称即可结束指定的循环，而不是默认的。

continue：

• continue跳过当次循环，但是继续后面的循环。
• continue默认只对离他最近的循环产生影响。

区别：

• break终止整个循环（跳过整个循环）；
• continue用来跳过当次循环（只跳过一次）；

优点：

优化性能，可以使用计时器console.time("test")和console.timeEnd("test")；检测耗时。

质数练习题优化：

1. 对象（引用数据类型）

基本数据类型的缺点：值和值之间没有任何联系。

对象：复合数据类型，在对象中可以保存多个不同数据类型的属性。（容器）

优点：关系明确，操作方便。

对象的分类：

1. 内建对象

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

比如：Math String Number Boolean Function Object ...

1. 宿主对象

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

比如：BOM DOM

比如：console.log(); document.write();

1. 自定义对象

创建对象：使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数，赋值给obj。

使用typeof检查对象时返回object。

属性值：js对象的属性值，可以是任意的数据类型。

in运算符：通过该运算符可以检测一个对象中是否含有指定的属性。

语法："属性名" in 对象

console.log("name" in obj) //返回true或false

1. 基本数据类型和引用数据类型的区别：

• js的变量都是保存在栈内存中的，基本类型的值直接在栈内存中存储，值与值之间是独立存在的，修改一个变量不会影响其他的变量
• 对象储存在堆内存中，每创建一个新的对象，就会在堆内存中开辟一个新的空间，二变量保存的是对象的内存地址（对象的地址），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。
• 基本数据类型保存的是值，对象保存的是地址。
• 当比较两个基本数据类型的值时，就是比较两个值。
• 而比较两个引用类型时，它是比较两个对象的内存地址，就算两个对象是一模一样的，但是地址不同，他也会返回false。

1. 对象字面量

• 用构造函数创建一个对象：

var obj = new Object();

• 用对象字面量来创建一个对象，本质相同。

var obj = {};

语法：{属性名：属性值，属性名：属性值...}

属性名的双引号可加可不加，如果使用一些特殊名称必须加引号。

属性名和属性值是一组组的名值对结构，名和值之间使用：连接，多个名值对之间用，隔开，如果一个属性之后没有其他属性，就不要写逗号。

1. 函数

函数也是一个对象，函数中可以封装一些功能（代码），在需要时可以执行这些功能。

用typeof检测一个函数对象是，会返回function。

1. 创建函数

2. 使用构造函数来创建一个函数对象（基本不用）

创建一个函数对象，可以将要封装的函数以字符串的形式传递给构造函数，我们在实际开发中很少使用构造函数来创建一个函数对象

var fun = new Function ("string");

1. 使用 函数声明 来创建一个函数

• 封装到函数中的代码不会立即执行
• 函数中的代码会在函数调用时执行
• 调用函数语法: 函数对象()
• 当调用函数时，函数中封装的代码会按照顺序执行

语法： function 函数名([形参1,形参2,形参3]){

语句...

}

1. 使用 函数表达式 来创建函数

语法：var 函数名 = function (形参1,形参2,形参3) {

语句...

}

1. 函数的参数（形参和实参）

定义一个用来求和的函数，可以在函数中的（）中来指定一个或多个形参（形式参数），声明形参就相当于在函数内部声明了对应的变量，但是并不赋值。

调用函数时解析器不会检查实参类型，也不会检查实参数量，多余实参不会被复制，少于实参数量时，没有对应实参的形参将是undefined。

1. 函数的返回值 return

• return语法： return 值
• return后的语句都不会执行，如果return后不跟值，返回undefined，不写return，也会返回undefined
• 函数也可以是对象，将匿名函数做为实参传递给函数：
• 返回值和函数对象：
• // getArea() 调用函数 相当于使用的函数的返回值
• // getArea 函数对象 相当于直接使用函数对象

1. brack、continue和return的区别

2. 立即执行函数

立即执行函数只会执行一次。

只调用一次，用（）扩起来一个匿名函数标识他是一个整体，函数对象（）；

1. 方法

• 对象的属性值可以是任何数据类型，也可以是函数
• 函数作为对象的属性时，我们称这个函数是这个对象的方法

1. 枚举对象中的属性 for...in遍历

• 对象中有几个属性，循环体就执行几次
• 执行时会将对象的属性名赋值给变量

1. 全局作用域/函数作用域

作用域指一个变量作用的范围

1. 全局作用域：

• 直接写在script标签的都在全局作用域 。
• 在页面打开时创建，在页面关闭时销毁。
• 在全局作用域中有一个全局对象window，由浏览器创建，可以直接使用，创建的变量都会作为window对象的属性保存【var window.a = 10; window.alert(); 】；

1. 变量提升

参考：https://www.w3school.com.cn/js/js_hoisting.asp

使用var关键字声明的变量，会在所有代码执行之前被声明，不用var时不会被声明提前。

1. 函数提升

• 函数提升：function 函数(){}，最先被创建，可以提前
• 函数表达式不提升：不能在声明前调用

2. 函数（局部）作用域：

• 调用函数时创建函数作用域，函数执行完后作用域销毁。
• 每调用一次创建一个新函数作用域，他们之间是互相独立的。
• 局部可以访问到全局的变量，全局不能访问局部变量。
• 局部会先在自身作用域寻找变量，就近原则。

1. debug

2. this

含义：解析器在调用函数时，每次都会向函数内部传递一个隐含的参数，这个隐含的参数就是this，this是浏览器传进来的参数，this指向的是一个对象，这个对象我们称为函数执行的上下文对象。

• 普通函数中 this 的指向，是 this 执行时的上下文
• 箭头函数中 this 的指向，是 this 定义时的上下文

1. ES5三种函数调用方式：

• fun(a,b);
• obj.child.method(a,b);
• fun.call(context,a,b); //指向context，默认undefined（指向window），

1. this的5种绑定

2. 默认绑定(非严格模式下this指向全局对象, 严格模式下this会绑定到undefined)
3. 隐式绑定(当函数引用有上下文对象时, 如 obj.foo()的调用方式, foo内的this指向obj)
4. 显示绑定(通过call()或者apply()方法直接指定this的绑定对象, 如foo.call(obj))
5. new绑定
6. 箭头函数绑定(this的指向由外层作用域决定的)

参考：

https://zhuanlan.zhihu.com/p/23804247

https://www.w3school.com.cn/js/js_this.asp

1. 创建对象

2. 使用工厂模式创建对象

3. 使用构造函数创建对象

构造函数：

• 创建一个构造函数，用来创建Person对象，首字母大写
• 和普通函数的区别：普通函数直接调用，构造函数需要使用new关键字调用
• 执行流程：

1. 创建一个新对象
2. 将新建的对象设置为函数中的this，在构造函数中实体this引用新对象
3. 逐行执行函数中的代码
4. 将新建对象作为返回值返回

5. 原型对象

6. 原型对象prototype

原型对象：prototype

隐含属性：__proto__

• 当函数以构造函数的形式调用时，它所创建的实例对象都会有一个隐含的属性__proto__，指向该构造函数的原型对象，通过__proto__访问该属性；
• 原型对象相当于一个公共区域，同一个类的实例都可以访问到这个原型，我们可以将对象公共内容统一设置到原型对象中；
• 我们访问对象的一个属性或方法时，会先在自身找， 自身没有则访问原型对象；
• 优点：不会污染全局作用域

1. 向原型对象中添加方法

实例：

1. 检查属性in和hasOwnProperty

2. 原型的toString()方法

3. 原型链

原型链是利用原型，让一个引用类型继承另一个 引用类型的属性和方法。

实例的contructor = 构造函数

1. 垃圾回收（GC）

垃圾回收：

• 当一个对象没有任何的变量或属性对它引用，我们无法操作该对象。
• js具有自动垃圾回收机制，会自动将垃圾对象从内存中销毁。
• 我们将不再使用的对象设置为null即可。

1. 数组Array

2. 数组简介

• 数组也是一个对象，与普通对象功能类似，作用存值。
• arr[index]：数组[索引]，索引从0开始。

• arr.length：数组.length可以获取数组的长度（元素的个数）。

  • 向数组最后一个位置添加元素：arr[arr.length] = 70; // 数组[数组.length] = 值

1. 数组的常见方法（2）

2. 数组遍历

3. for循环遍历

实例：将年纪满18的提取出来

1. forEach()遍历

回调函数： forEach()方法需要一个函数作为参数，像这种函数，由我们创建但不由我们调用的称为回调函数。

缺点：不兼容IE8及以下

1. slice()

slice(开始位置索引，结束位置索引)：slice从第a个截到第b个

1. splice()

• splice(开始位置索引，删除的数量，传递新元素) : splice从第a个删除b个;
• splice还可以再添加元素

1. splice数组去重

2. call() 和 apply()

相同：

• 都会调用函数执行
• call()和apply()可以将一个对象指定为第一个参数
• 此时这个对象将会成为函数执行时的this，参数是谁this就是谁
• 可以修改上下文对象this

不同：

• call()可以将实参在对象之后依次传递
• apply()需要将实参封装到一个数组中统一传递

this:

1. 以函数的形式调用，this指向window
2. 以方法的形式调用，this是调用方法的对象
3. 以构造函数的形式调用，this是新创建的对象
4. 以call和apply调用，this是指定的对象

5. arguments【类数组对象】

在调用函数时，浏览器每次都会传递进两个隐含的参数：

1. 函数的上下文对象this
2. 封装实参的对象arguments

• arguments是一个类数组对象，也可以通过索引来操作数组

1. Date【时间】

获取时间和获取时间戳：

1. Math【数学运算】

参考：https://www.w3school.com.cn/js/js_math.asp

Math：属于工具类，封装了数学运算相关的属性和方法

1. 包装类

包装类：可以临时将基本数据类型转为对象，浏览器底层自己用的

1. 字符串相关方法

参考： https://www.w3school.com.cn/js/js_string_methods.asp

1. 检索字符串
2. 截取字符串
3. 转为大小写

4. DOM(文档对象模型)

• Document Object Model：文档对象模型，用来操作网页的

• Node：节点，构成网络的任何部分都是一个节点，类型不同。

  • 文档节点：<html></html>
  • 元素节点：<p></p>
  • 属性节点：id="box"
  • 文本节点：文字~

• 获取元素节点：

  • getElementById()：通过id获取一个元素节点对象
  • getElementsByTagName()：通过标签名获取一组元素节点对象
  • getElementsByName()：通过name属性获取一组元素节点对象，表单常用
• 事件：用户和浏览器的交互行为，比如点击按钮、鼠标移动、关闭按钮；所有的操作都属于事件，处理事件：

Dom事件： https://www.w3school.com.cn/js/js_htmldom_events.asp

1. 文档的加载 window.onload

2. dom查询的其他方法

3. dom增删改

dom方法： https://www.w3school.com.cn/htmldom/dom_methods.asp

增删改demo1:

增删改demo2：

1. 修改class

2. json

前端html写的 后端java写的

obj = {} : js对象 只有js认识

需要将js对象传给服务器 转为json

将json转为字符串 任何语言都认识

json的作用：交互传递数据，字符串，使不同语言都可以使用

json属性名必须加双引号。其他和js一致

json分类：

1. 对象： json对象

2. 数组： json数组

json只允许传递： 字符串，数值，布尔，null，普通对象，数组

键值对

json数组：保存多个json对象。

需要将字符串转为js对象

数据交换格式 轻量级数据格式

- JSON.parse()：将json转为js对象

- JSON.stringify()：将js对象转为json

IE7 JSON

兼容IE7以下，eval()：可以用来执行一段字符串形式的js代码，并将返回，性能差不建议使用。

1. 事件冒泡

2. 事件冒泡（Bubble）

事件冒泡指事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

取消冒泡：将事件对象的cancelBubble设置为true。

1. 事件委派

2. js报错整理

https://blog.csdn.net/weixin_39843414/article/details/109108391

1. Error：基本错误类型，一般是程序员抛出的异常

1. SyntaxError ：语法错误，解析错误

1. TypeError ：类型错误

1. ReferenceError ：引用错误

1. RangeError ：边界错误

1. URIError：url错误
2. 自定义异常