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 )  *****

参数：同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（类）

数值扩展

对象扩展

 收藏

立即使用

ES5+ES6

 收藏

立即使用

模块化

Marshmello

职业：本科

去主页





0 条评论

下一页

为你推荐

查看更多



es数据流

ES6-ES12

ES搜索

ES6 与 ECMAScript 2015 的关系

Données

JWeb Diagramme séquence récupération données

ES6基础

ES6