ES5+ES6
2022-03-04 22:00:14 0 举报JS基础
作者其他创作
大纲/内容
ES5（ js是一门 跨平台 的 解释型 脚本语言）
js变量运算符和表达式
变量
是什么: 在程序运行过程中,可以随时发生变化的量,我们称为变量
为什么：程序其实是一个输入、运算、输出的过程，变量本质上是一个容器（内存空间），用来保存数据
怎么做
定义变量 var let
命名规范 1.数字、字母、下划线和$符组成 / 2.不能以数字开头 / 3.不能和关键字及保留字同名
五种基本数据类型
Number
不同进制 2进制（0b）8进制 （0o）16进制 （0x）
String
Boolean
undefined
变量定义但没有赋值
或者故意赋值为undefined
null
变量定义赋值为null（一般是对对象进行初始化使用或者是删除一个对象的时候用到）
运算符和表达式
运算符
概念：就是参与运算的符号
算术运算符 + - * / %
自增自减运算符 ++ --
赋值运算符 = += -= *= /= %=
比较运算符 > < >= <= == != === !== （ 表达式的值为布尔值 ）
逻辑运算符 && 与 || 或 ! 非（ 短路的与和或有妙用可以简化代码 ）
三元运算符 表达式1 ? 表达式2 : 表达式3
表达式
由变量或者常量与运算符组成的式子；表达式是有值的；
数据类型转换
数据类型强制转换
其他类型转数字：Number（）
强制将一个其它类型数据转化为数字类型，转不了就是NaN(not a number)
转化字符串：
如果字符串整体来看是一个数字，那么就转化为这个数字
如果字符串整体来看不是一个数字，那么就转化为NaN
如果字符串是空串或空白串，那么转化为0
转化boolean
true ——> 1
false ——> 0
转化undefined
undefined ——> NaN
转化null
null ——> 0
其他类型转字符串：String（）
String() 强制将一个其它类型数据转化为字符串类型
转化字符串没有什么特殊，相当于直接在值外面加引号；
其他类型转布尔值：Boolean（）
Boolean() 强制将一个其它类型数据转化为boolean类型
转化数字的时候，除了0和NaN是false,其余都是true
转化字符串的时候，除了空字符串是false,其余都是true
转化undefined和null都是false
其他类型转化布尔值是false的情况：0 NaN ""(空串) undefined null
数据类型的隐式转换
判等（== / ！=）
先看两边是不是同种数据类型，如果是 ——> 直接看一不一样就ok了 | 如果不是 ——> 两边都转数字
遇到null的时候有特殊情况
空串和null不相等
false和null不相等
0和null不相等
undefined和null相等
其余运算和比较情况
第一步：先看是不是+
如果是+看有没有字符串，如果有字符串就是拼串
第二步：看看是不是比较
如果是比较，看看是不是两边都是字符串，如果是，比的是字符串的Unicode编码
第三步：如果不是前两种情况：
全部转数字（空串和空白穿转数字是0）
有NaN的情况
1.所有东西和NaN进行算数运算结果都是NaN
2.所有东西和NaN比较大小结果都是false
3.所有东西和NaN都不相等，包括NaN
全等和不全等
不会出现数据类型转换（类型和值都必须相同才算全等）
流程控制语句
概念：流程就是一个过程，在js代码执行的过程中，有时需要让一段代码执行，有时又不需要让一段代码执行，这是一种过程，有时又需要重复去执行某段代码，此时我们就需要流程控制语句。
语句结构分类
1.顺序结构 —— js默认由上至下执行
2.分支结构 —— js会根据条件的判断,决定是否执行某段代码
3.循环结构 —— js会根据条件的判断,反复的执行某段代码
分支结构
if语句 —— if | if......else....... | if......else if.......else if .......... else .........
switch......case......default 语句
循环结构
for( 初始化表达式 ; 条件表达式 ; 自增自减表达式 ){ 循环体(代码块) }
for( var key in dog ) { console.log( key , dog[ key ] ) } ——> 用来遍历对象 是对象都可以遍历
break和continue
continue : 结束本次循环，返回从下一次继续开始
break :
在循环中 : 跳出离它最近的一层循环
在switch.......case语句中跳出switch语句
对象数据类型（又称引用数据类型）
写在最前面
| 如果存储一个简单的数据（一个数字，一个字符串）直接var a = 10；
| 如果存储一堆的数据 此时我们想到数组， 数组就是专门用来存储多个数据用的；
| 如果我们想要存储一段代码，此时我们需要函数 ；
| 如果我们想要描述一个复杂的事物，比如说一个人，一台电脑，一辆车（需要用到多个属性或者方法才能描述清楚），此时需要用到对象；
| 数组和函数也是对象；
数组
概念：具有相同类型（或者不同类型）的数据有序集合；一次性的让我们存储多个数据；
创建数组：
1.字面量创建 let arr1=[ 1, 2 , 3 ]
2.构造函数创建 let arr2 = new Array( 2 , 4 , 6 )
数组的长度和下标
长度：arr.length
下标：从0开始 ——> arr.length - 1
伪数组
特点
1.拥有 length 属性，可以使用索引来取元素
2.不具有数组所具有的方法
3.伪数组长度不可变,真数组长度可以变
4.可以通过for in遍历
伪数组是一个 Object，而真实的数组是一个 Array
伪数组存在的意义，是可以让普通的对象也能正常使用数组的很多方法
常见伪数组
函数内部的 arguments
DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）
函数
概念：具有某种特定功能的代码块 ——> 想象成工具或者工厂
为什么要有函数
1.解决代码的冗余问题，形成代码复用；
2.可以把整个代码项目，通过函数模块化；
3.封装代码，让函数内部的代码对外部不可见；
函数的定义
字面量定义
function 函数名（）{ 函数体 }
函数表达式定义
var 函数名 = function（）{ 函数体 }
函数定义三要素
功能：即函数名，见名思意，看到了函数名就想到了这个函数的功能，函数名字最好使用动词；
参数：（）里面是函数的参数（形参），定义函数的时候要考虑这个函数是否有参数；
返回值：函数最终都会有一个返回值；定义函数的时候也要考虑这个函数是否需要返回值；
函数调用
函数名（）
这个表达式整体的值就是函数定义当中return后面的值；如果函数定义当中没有写return，那么其实相当于默认return一个undefined.只是把return省略了；
return的作用
1. 返回值
2. 当函数执行到return的时候，函数就立即结束了，即使return下面还有代码，也不再执行
参数
1.参数在函数定义当中被称作形式参数，简称形参；
2.函数调用的时候，我们在（）当中所写的也叫做参数，叫做实际参数，简称实参；
函数调用的时候，我们写实际参数被称作函数传参，传参的本质是把函数调用的实参，赋值给函数定义的形参；
函数的实参，肯定是一个有值的东西；函数定义的形参：本质上相当于在函数内部var了变量；
函数的分类 （按参数和返回值分）
无参无返回值( 通常情况下 很少有这样的函数，一般都是需要将代码模块化的时候，纯粹的去封装功能使用的 )
有参无返回值
无参有返回值
有参有返回值
函数的分类（按调用方式分）
立即调用函数表达式（IIFE）
( function ( 形参 ) { 代码块 } )（实参）
特点
1.函数定义的的时候执行
2.只执行一次
3.不发生预解析（函数内部会发生预解析）
作用
1.防止外部命名空间污染
2.隐藏内部代码暴露接口
3.对项目的初始化
回调函数
概念：回调函数就是一个被作为参数传递的函数。（我们定义的，我们没有调用，但最终执行了）
应用场景：
事件回调
定时器
AJAX
生命周期回调函数
函数递归
概念：递归就是一个函数在它的函数体内调用它自身。执行递归函数将反复调用其自身，每调用一次就进入新的一层。递归函数必须有结束条件。
递归两要素：
1. 结束条件: 必须有一个明显的结束条件，不能一直递归下去
2. 递推关系: 每一次调用都要有一个趋近结束条件的趋势
函数的递归调用是一把双刃剑，如果设计的好，可以帮我们简单的处理事情，如果设计不好就是灾难
Arguments 函数实参伪数组
arguments是存在于函数内部的，函数外部没有这个东西，它代表的是函数的实参伪数组；
对象
概念：无序的键值对(名值对)的集合就叫做对象；
对象的创建方法
字面量创建（object 的实例对象）
var obj = { 键值对 }
构造函数创建（一）（object 的实例对象）
var obj = new Object（{ 键值对 }）
构造函数创建（二）（特定函数的实例对象）
function Car（name , price）{ this.name = name ; this.price = price}
var obj = new Car ( '特斯拉' ，200000 )
工厂函数创建（object 的实例对象）
构造函数.
概念
构造函数本质上也是一个函数，只不过通常我们把构造函数的名字写成大驼峰；
在js当中，没有类的概念（5版本），构造函数可以理解为类；
任何的函数都可以是普通函数，也可以是构造函数，就看你在怎么用；
构造函数执行流程
1.立刻创建一个新的对象
2.将函数中的this指向新创建的对象
3.逐行执行函数中的代码
4.将新创建对象作为返回值返回
this的总结
什么是this
一个关键字, 一个内置的引用变量
在函数中都可以直接使用this
this代表调用函数的当前对象（函数的调用者）
在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的（箭头函数例外）
确定this指向
1.普通函数调用：this指向window ——> test( )
2.函数作为方法调用： this指向调用这个方法的对象 obj ——> obj.test( )
3.函数作为构造函数调用：this指向准备实例化出来的那个对象 ——> new test( )
4.事件回调函数中：this指向事件源
5.call和apply中：this由自己指定
6.定时器：this指向window
7.箭头函数中：this指向定义时所在作用域的this
js内置对象及方法
Math对象
Math.round (2.5) ——> 四舍五入
Math.floor ( 2.9 ) ——> 向下取整
Math.ceil ( 2.1 ) ——> 向上取整
Math.max ( 24, 55, 78, 6 ) ——> 获取最大值
Math.min ( 24, 55, 78, 6 ) ——> 获取最小值
Math.PI ——> 圆周率
Math.sin( Math.PI/6 ) ——> 正弦（ 算的是弧度,不是角度 ）
Math.pow( 2, 4 ) ——> 幂运算
Math.abs ( -1 ) ——> 绝对值
Math.sqrt( 9 ) ——> 开平方
Math.random( ) ——> 随机数,随机的范围 从0到1，但不包含1
Math.floor( Math.random ( ) * ( b - a + 1 ) ) + a ——> 求一个随机数的范围a到b(包含a,b)
Date对象
new Date ( ) ——> 获取的当前时间 ( 是一个对象 )
new Date ( s ) ——> 将时间戳转为date实例
Date.now ( ) ——> 时间戳 ****
字符串方法
es5方法
var str = “hellow world”
str.charAt( 0 ) ***
功能：找到字符串对应索引的字符
参数 ：索引(下标)
返回值： 返回找到的字符 ——>'h'
str.charCodeAt( 0 )
功能 ：将字符串对应索引( 下标 )的字符转成unicode码
参数 索引(下标)
返回值 unicode码 ——>104
String.fromCharCode(49)
功能 ：将unicode码转成字符
参数： unicode码
返回值： Unicode码对应的字符 ——>'1'
str.concat( '123' ) *****
功能 ：将原串和传入的字符串拼接,返回一个新串
参数： 字符串
返回值 ：拼接后的字符串 ——> 'hellow world123'
str.indexOf( 'h' , 2 ) *****
功能 ：在原串中查找传入的字符串,查到之后返回查到的下标,查不到返回-1,从左往右查
一个参数： 当有多个重复字符串的时候,只返回第一个查到的下标
两个参数 ：从第二个参数的下标位置开始查,查到返回下标,查不到返回-1
参数
第一个参数 ：字符串
第二个参数： 开始查找的下标( 如果没有第二个参数，从下标为0的位置开始查 )
返回值： 查到返回下标,查不到返回-1 ——>-1
str.lastIndexOf( 'h' , 2 ) *****
功能 ：在原串中查找传入的字符串,查到之后返回查到的下标,查不到返回-1,从右往左查
参数：同indexOf（）
唯一的不同点是：lastindexOf（）如果没有第二个参数，从str的最右边开始查
返回值：同indexOf（）
str.replace('ll', '123')
功能 ：字符串替换，第二个串替换原串中的第一个串
参数 ：
第一个参数： 字符串
第二个参数： 字符串
返回值： 替换后的字符串 ——> 'he123ow world'
str.search( 'h' )
功能 ：字符串查找，返回找到的下标，找不到返回-1
参数： 字符串
返回值：查到的下标
str.match( /1/g )
str.localeCompare( 'ABCD123' )
功能：原串和传入字符串比较(比较的unicode码)
参数：字符串
返回值：原串大——>1 ，相等 ——> 0 ，原串小 ——>-1
str.slice( ) ***** ——>切片 ——> 字符串 ( 裁剪到指定下标)
str.slice( 3) ——> 'low world'
str.slice(3, 7) ——> 'low '
str.slice(-3) ——> 'rld'
str.slice(-7, -3) ——> 'w wo'
功能：裁剪字符串
只传一个参数：从第一个参数下标开始裁剪，裁剪到字符串末尾
传两个参数：从第一个参数下标位置裁剪，裁剪到第二个参数下标位置，但不包含第二个参数下标
参数
第一个参数：下标
第二个参数：下标
参数可以为负数( 负数是从右往左数，倒数第一个字符下标为-1 ) ——> 从左往右裁剪
返回值： 返回裁剪下来的字符串
str.split( 'l' ) ***** ——>分割 ——> 数组
功能：分割字符串成数组
以传入的字符串为分隔符分割字符串,分割成数组 ——> ['he', '', 'ow wor', 'd']
传空串的时候,会把每一个字符都分割开组成一个数组 ——> ['h', 'e', 'l', 'l', 'o', 'w', ' ', 'w', 'o', 'r', 'l', 'd']
不传参的时候,把原串直接放在一个数组中返回 ——> ['hellow world']
参数： 字符串
返回值：数组
str.substr( ) *** ——>截取 ——> 字符串 ( 裁剪到指定长度)
str.substr(3) ——> 'low world'
str.substr(3, 5) ——> 'low w'
str.substr(-3) ——> 'rld'
str.substr(-7, 4) ——> 'w wo'
功能：裁剪字符串
传一个参数： 传入的下标开始裁剪,裁剪到字符串的末尾
传两个参数： 传入的下标开始裁剪,裁剪到参数二的长度结束
参数：
参数一：下标( 可以为负数,从右往左数,-1代表字符串最后一个下标 )
参数二：长度( 不能为负数 )
返回值：返回裁剪后的字符串
str.substring( ) ——>截取 ——> 字符串 ( 裁剪到指定下标，下标不能为负)
str.substring( 2 )
str.substring( 2，5 )
功能： 裁剪字符串
只传一个参数：从第一个参数下标开始裁剪，裁剪到字符串末尾
传两个参数：从参数一下标开始裁剪到参数二下标结束( 不包含参数二下标 )
参数
参数一：下标（不能为负）
参数二：下标（不能为负）
返回值：返回裁剪后的字符串
str.toLowerCase( ) ***
str.toUpperCase( ) ***
功能：toLowerCase( )转小写 toUpperCase( )转大写
参数 ：没有参数
返回值 ：返回转化大小写后的字符串
str.toLocaleLowerCase( )
str.toLocaleUpperCase( )
功能：toLocaleLowerCase( )转小写 toLocaleUpperCase( )转大写
参数： 没有参数
返回值：返回转化大小写后的字符串
区别 ：
与 toUpperCase( ) 不同的是，toLocaleUpperCase( ) 方法按照本地方式把字符串转换为大写。
只有几种语言（如土耳其语）具有地方特有的大小写映射，所以该方法的返回值通常与 toUpperCase( ）一样
str.trim( ) *****
功能： 去除字符串首尾的空格
参数： 没有参数
返回值：去除首位空格后的字符串
es6方法
str.includes("345")
功能 ：查找传入的字符串是不是在原串当中
参数 ：字符串
返回值 ：查到返回true,查不到返回false
str.startsWith( "345" )
功能：判断是不是以传入字符串开始的
参数 ：字符串
返回值 ：查到返回true,查不到返回false
str.endsWith( "23A" )
功能 ：判断是不是以传入字符串结束的
参数 ：字符串
返回值 ：查到返回true,查不到返回false
str.repeat(2)
功能 ：重复字符串
参数 ：重复的次数
返回值 ：重复后的字符串
数组方法
数组方法（一）
arr.push（）****
功能：往数组末尾处添加成员
参数：不限个数
返回值：返回数组长度(添加成员后)，修改了原数组
arr.pop（）****
功能 ：数组末尾删除一个成员
参数： 没有参数
返回值： 删除的成员,修改了原数组
arr.unshift（）****
功能 ：数组的开头添加成员
参数： 不限个数
返回值 ：返回数组的长度（添加成员后）,修改了原数组
arr.shift（）****
功能： 数组的开头删除一个成员
参数 ：没有参数
返回值 ：删除的成员,修改了原数组
arr.splice（） ****
功能：这个方法能实现添加、删除、修改数组的功能
删除：
arr.splice（2）
从下标为2的位置开始删除,删除至数组末尾,返回删除成员组成的数组,修改了原数组
arr.splice(2, 3)
从下标为2的位置开始删除,删除3个成员,返回删除成员组成的数组,修改了原数组
新增：
arr.splice( 2, 0, 25 )
从下标为2的位置开始删除0个（或多个）成员,插入一个（或多个）成员
返回删除成员组成的数组( 删除0个成员返回的就是空数组 ),修改了原数组
修改：
从下标为2的位置删除3成员,插入25和47两个成员,,返回删除成员组成的数组,修改了原数组
arr.splice(2, 3, 25, 47)
从下标为2的位置删除3成员,插入25和47两个成员,,返回删除成员组成的数组,修改了原数组
arr.reverse（）****
功能 ：反转数组
参数： 没有参数
返回值： 返回原数组,修改了原数组
arr.concat( [5, 9, 7] )
功能 ：拼接数组
参数： 数组
返回值： 原数组与传入数组拼接后的新数组,不改变原数组
arr.join( "abc" ) ****
功能： 数组成员以传入字符串为间隔拼接成字符串
传空串直接数组成员拼接成字符串
不传参数,默认以逗号为间隔拼接成字符串
参数： 字符串(可以不传)
返回值 ：拼接后的字符串,不修改原数组
arr.slice( 2 ) ****
功能 ：裁剪数组
传一个参数，从传入下标开始获取到数组的末尾
传两个参数，从参数一下标开始获取,获取到参数二下标位置，但不包含下标二位置成员
如果是负数，从右往左数下标，最后一个成员下标为-1
参数：
参数一 ：下标 ( 可以为负数 )
参数二： 下标 ( 可以为负数 )
返回值 ：
返回裁剪下来的数组，原数组不变
案例：
arr.slice( 2 )
arr.slice( 2, 5 )
arr.slice( -2 )
arr.slice( -6, -3 )
数组方法（二）
arr.forEach（ （ item，index，currentArr ） => { 函数体 } ） *****
功能： 遍历数组
参数 ：函数
返回值 ：undefind，不改变原数组
arr.some（ （ item，index，currentArr ） => { 函数体 return item > 6 } ）***
功能： 检测数组成员是否满足检测函数条件（ 由检测函数的返回值控制 ）
参数 ：函数
返回值 ：布尔值 ( 如果有满足检测函数的直接返回true，后续成员不再检测，如果都不满足返回false )，不改变原数组
arr.every（ （ item，index，currentArr ） => { 函数体 return item > 6 } ）***
功能： 检测数组成员是否满足检测函数条件（ 由检测函数的返回值控制 ）
参数 ：函数
返回值 ：布尔值 ( 如果都满足检测函数的返回true，遇到不满足直接返回false ，后续成员不再检测 )，不改变原数组
arr.map（ （ item，index，currentArr ） => { 函数体 return item + 6 } ）*****
功能： 映射一个函数，对所有的成员进行逻辑处理,得到对每个成员处理后的结果组成的数组
参数： 函数
返回值 ：返回映射后的新数组,不改变原数组
arr.filter ( （ item，index，currentArr ） => { 函数体 return item > 6 } ) *****
功能： 过滤数组成员 ，对所有的成员进行逻辑处理，满足条件 ( 检测函数的返回值为真 ) 的会组成新数组
参数： 函数
返回值： 满足过滤条件的元素组成的新数组，不改变原数组
arr.find ( （ item，index，currentArr ） => { 函数体 return item > 6 } )
功能： 查找出第一个符合检测条件的成员，找到符合条件的就不再继续寻找了
参数： 函数
返回值 ：符合条件的成员，不改变原数组
arr.findIndex ( （ item，index，currentArr ） => { 函数体 return item > 6 } )
功能：查找出符合检测条件的第一个成员的下标，找到符合条件的就不再继续寻找了
参数 ：函数
返回值： 符合条件的成员下标，不改变原数组
arr.sort（（a，b）=> { return a - b } ）
功能： 数组排序
参数： 函数
函数参数是数组中相邻两个成员
return a - b ——> 升序
return b - a ——> 降序
返回值； 返回排好序后的原数组
arr.reduce( )
数组方法（三）
arr.indexOf ( 12 )
功能： 在数组中查找成员，如果找到返回下标，如果找不到返回 -1
参数： 要查找的成员
返回值 ：下标，找不到返回-1
应用场景：数组去重
arr.includes ( 12 )
功能 ：在数组中查找成员，如果找到返回true，如果找不到返回false
参数： 要查找的成员
返回值： 数组中包含查找成员返回true，否则返回false
应用场景：数组去重
Array.from ( 伪数组 )
功能 ：将伪数组转为一个真正的数组
参数： 伪数组
返回值： 伪数组转成的新数组
Array.of（）
功能：创建数组
和new Array ( )的不同点 new Array(3) -> [und,und,und] / Array.of(3) -> [ 3 ]
包装对象
概念：数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象，这三个原生对象可以把原始类型的值变成（包装成）对象
作用：让基本数据类型也可以调用方法
执行机制
a.toString( ) 干了三件事,这三件事看不到
1.a = new Number(a) 将a转化成了一个包装对象
2 .调用包装对象的__proto__上的toString方法
3.调用结束后自动再让a变回基本值 a = 100;
valueof ( ) 和 toString ( )
valueof( )
调用valueOf的时候,如果是包装对象 , 返回的是包装对象的[[PrimitiveValue]]基本值
如果不是包装对象,返回的是对象本身
toString( )
调用toString如果是包装对象,直接基本值转成字符串即可
如果不是包装对象,调用toString返回的各不相同
数组调用toString,把数组中括号去掉,剩余成员以逗号隔开转成字符串（例：[1 , 2 ,3] ——> ‘ 1 , 2 , 3 ’ ）
函数调用toString,把函数数据直接转成字符串
对象调用toString,返回[object Object]
引用数据类型的运算和比较（转化规则）
1. 对象都会去尝试调valueOf去取基本值[[PrimitiveValue]]
2.如果取到基本值就是基本值
3.如果取不到基本值,会调用当前对象的toString()
4.再使用基本数据类型运算、比较的规则(隐式转换)
localStorage.setItem（）和 localStorage.getItem（）
功能：做数据持久化配合JSON使用
正则表达式（暂时战略性放弃）
DOM（ Document Object Model ）
DOM的概念
DOM就是文档对象模型 Document Object Model
DOM是W3C组织推荐的，处理可扩展置标语言的标准编程接口。是一种与平台和语言无关的应用程序接口(API)，使程序和脚本有能力动态访问和更新文档的内容、结构以及样式。
DOM描述了处理网页内容的方法和接口
DOM树 window ——> document ——> documentElement ( html ) ——> head + body
概念：
window是浏览器窗口对象，所有东西都被当作是window的子对象
文档对象document是window下的一个属性，代表整个DOM文档对象
document下的documentElement代表根元素HTML标签，之后一级一级往下分
文档树(DOM树) 以HTML为根节点 形成的一棵倒立的树状结构，我们称作DOM树；这个树上所有的东西都叫节点，节点有很多类( 我们主要关注 4 类 )
四类主要关注的DOM节点：
元素节点 标签 ——> 挂在documentElement下面
属性节点 属性 ——> 挂在元素节点身上
文本节点 内容 ——> 挂在元素节点身上 ( text )
注释节点 注释 ——> 以后再研究，暂时没啥用
window.onload事件
一般情况我们都是等待页面加载完成之后才去操作dom元素，如果页面没有加载完成就去获取dom元素，有可能获取不到，这时候window.onload就被有了存在的意义了。
window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。
获取DOM元素，操作DOM元素
获取DOM元素
document.getElementById
只能通过ID去获取元素，并且只能获取一个元素返回
document.getElementsByTagName
只能通过标签名去获取，并且获取到是多个，返回一个伪数组，哪怕标签只有一个也是伪数组
document.getElementsByClassName
只能通过类名去获取，并且获取到是多个，返回一个伪数组，哪怕只有一个标签是这个类也是伪数组
以上三个都比较局限：拿元素的时候只能通过指定的属性去拿
document.querySelector
querySelector 专门用来获取选择器选中只有一个元素，返回的是单个元素dom对象;
document.querySelectorAll
querySelectorAll 专门用来获取选择器选中有多个元素，返回是伪数组；
querySelector 和 querySelectorAll 可以获取元素，但是他们和上面不同的是，他们根据选择器去获取。也就是说只要选择器能选择到，他们就可以获取到，只要选择器写的对就可以获取到；
操作DOM元素
1.修改元素属性
修改元素天生属性里面的普通属性
直接修改 ——> image.src = ". / img / 002 . webp "; / image.id = ‘ ’； / a.herf = ' ' ;
修改元素天生属性里属性名与属性值相同的属性
元素当中的属性和属性值相同的这种属性，js操作的时候值使用true和false ——> inputNode.checked = true ;
修改元素天生属性里的特殊属性
class类属性，在js当中不叫class叫className 修改类名有两种方法
1.通过className：pNode.className = 'p2';
2.通过classList修改：
classList 是所有类名组成的一个数组
div.classList.add("box2"); // DOM元素.classList.add ——> 添加类名
div.classList.remove("box1"); // DOM元素.classList.remove ——> 删除类名
div.classList.toggle("box2"); // DOM元素.classList.toggle ——> 切换类名（如果有类名就删除,如果没有类名就添加）
div.classList.contains("box2"); // DOM元素.classList.contains ——> 查看是否包含某个类名
修改元素自定义属性
自定义属性，没办法使用 点 语法和 [ ] 语法
对于自定义的属性，只能用下面两个方法去读写
this.getAttribute('aa') ——> 读取属性的属性值
this.setAttribute('aa','cc') ——> 设置属性的属性值
这两个方法是通用的，天生的属性也可以使用,并且类名直接使用class不用改为className
this.getAttribute('id');
this.setAttribute('class', 'p2');
总结：
在操作元素属性的时候，点语法只能操作元素天生具有的属性，如果是自定义的属性，通过点语法是无法操作的；只能通过 setAttribute和getAttribute去操作； setAttribute和getAttribute是通用的方法，无论元素天生的还是自定义的属性都可以操作；
以后常用天生的属性就用点语法去操作，自定义的属性采用setAttribute和getAttribute去操作；
2. 修改DOM元素的内容
innerHTML ：获取或设置标签中的HTML
innerText： 获取或设置标签中的文本（所有子节点的）
读
如果获取的元素当中没有其它的元素
那么这两个都是直接获取文本（innerHTML获取的东西带空白和换行，innerText不带）
如果内部有其他标签
innerHTML文本和标签都会获取；innerText只是获取标签内部的所有文本，标签不会获取。
写
如果设置的内容当中没有标签内容
那么这两个都是直接把标签当中所有的东西替换成文本内容
如果设置的内容当中有其他标签内容
innerText：标签是原样字符串显式在页面上；
innerHTML：标签在页面上渲染生效的；
3.修改样式
console.log( pNode.style.color )
pNode.style.color = "red";
元素.style .样式 只能获取和修改行内样式
DOM事件
编程套路（思想）
1.排他思想
概述：点击（或其他事件）目标节点，先把所有节点都设置为统一的样式，然后单独设置目标节点的样式
应用
排他实现小圆点点击切换
BOM
BOM的概念
event对象
定时器
元素的位置与大小
初始包含快及滚动条控制
js高级
内存 | 变量 | 数据
对象基础
函数基础
执行上下文、执行上下文栈、预解析、作用域、作用域链（打断点）
闭包
原型链，终极原型链
面对对象（封装，继承，多态）
事件循环机制
ES5扩展
严格模式
Object 扩展方法
call、apply 和 bind
ES6
let与const
变量的解构赋值
模板字符串
简化对象写法
箭头函数
rest参数
spread扩展运算符
Symbol
迭代器
Set
Map
class（类）
数值扩展
对象扩展
职业：本科
0 条评论
下一页
