JavaScript进阶

JavaScript

更新日期: 2023-07-21

文章字数: 5.1k

阅读时长: 19 分

阅读次数:

Web APIs

Web APIs主要总结了DOM和BOM的相关语法与使用

使用js去操作html元素
DOM(文档对象模型)，BOM(浏览器对象模型)

DOM

1.1DOM的认知

是什么？：DOM是浏览器提供的一套专门用来操作网页内容的功能，用于开发网页内容特效和实现用户交互
DOM树：将html文档以树状结构直观表现出来，文档树直观体现了标签与标签的关系
DOM对象：浏览器根据html生成的标签生成js对象，即把网页内容当对象来处理
document：是dom里提供的一个对象，网页所有内容都在document里面

1.2DOM获取元素

获取DOM对象

选择匹配第一个元素

document.querySelecter('css选择器')
参数：包含一个或多个有效的css选择器的字符串
返回css选择器匹配的第一个元素，如果没匹配到，则返回null

选择匹配多个元素

document.querySelecterAll('css选择器')
参数：包含一个或多个有效的css选择器的字符串
返回一个伪数组

了解

1.document.getElementById('css选择器')
根据id获取一个id元素
2.document.getElementByTagName('div')
根据标签获取一类元素，获取页面所有div
3.document.getElementByClassName('w')
根据类名获取此类名的所有元素，获取所有类名为w

1.3设置/修改DOM元素内容

document.write() 方法

1.只能将文本内容最追加body中
2.文本中包含的标签会解析

对象.innerText 属性

1.能将文本内容添加到任意标签位置
2.文本包含的标签不会被解析

对象.innerHTML属性

1.能将文本内容添加到任意标签位置
2.文本包含的标签会被解析

1.4设置/修改DOM元素属性

设置/修改元素常用属性(元素自带的属性)
对象.属性名=属性值
例如：img内部还有的属性src等，先获取过来后，img.src=’./images/.png‘

设置/修改元素样式属性(css属性)
通过style属性操作css
对象.style.样式属性 = ‘值’
注意：

1.修改样式通过style属性引出
2.如果属性有-连接符，需要转换为小驼峰命名法
3.赋值的时候不要忘记加单位

通过类名（className）操作css
对象.className = '类名1 类名2'
注意

className是使用新值换旧值，会把之前的类干掉，
如果需要保存之前的那个类，则也要把之前的类写在className中

通过classList操作类控制css

对象.classList.add('类名')      追加一个类
对象.classList.remove('类名')   删除一个类
对象.classList.toggle('类名')   切换一个类

设置/修改表单元素属性(表单自带的属性)
对象.属性名 = 属性值
特殊:对象.属性名 = true/false 例如：disabled，checked，selected

1.5定时器-间歇函数

每隔一段时间会自动调用
1.开始定时器
setInterval(函数,间隔时间)
setInterval(function(){},间歇时间)
单位：毫秒 1000毫秒=1秒
2.关闭定时器
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

1.6DOM事件基础

事件监听语法：对象.addEventListener('事件',要执行的函数)
事件三要素

1.事件源：被哪个dom元素触发
2.事件：用哪种事件触发
3.事件调用的函数：触发了要做什么事

事件类型

1.鼠标事件
click  点击
mouseenter 鼠标经过   没有冒泡效果
mouseleave  鼠标离开   没有冒泡效果
mousemove  鼠标移动

2.焦点事件
focus  获得焦点
blur  失去焦点

3.键盘事件
Keydown  键盘按下触发
Keyup  键盘抬起触发

4.文本事件
input 用户输入
change

1.7高阶函数

可以被简单理解为函数的高级应用
1.函数表达式
把函数当值来看就是高阶函数
let fn = function(){}
2.回调函数
把函数1作为参数传递给函数2时，称函数1为回调函数

1.8环境对象 this

this 他就是一个对象谁调用，this就指向谁

直接调用函数，其实就相当于window.函数，所以this指代window

1.9排他编程思想

如何使用：
1.干掉所有人
使用for循环

2.复活他自己
通过this或者下标找到自己或者对应的元素

1.10DOM节点操作

DOM节点

DOM树里面的每一个内容都称之为节点
1.元素节点  所以html标签  html是根节点
2.属性节点  所以html标签内部的属性
3.文本节点 所有文本

1.增

第一步：创建节点
let 对象 = document.createElement('标签名')
第二步：增加节点
方法1：插入到父元素的最后一个子元素：
父元素.appendChild(子元素)
方法2：插入到父元素中某个子元素的前面：
父元素.insertBefore(子元素，在哪个元素前面)
克隆节点
同样也是需要上面的两步走
特殊情况下，我们新增节点，按照如下操作：

1.复制一个原有的节点
2.把复制的节点放入到指定的元素内部
		let对象=克隆对象.cloneNode(布尔值)
		cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
3.若为true，则代表克隆时会包含后代节点一起克隆
4.若为false，则代表克隆时，只克隆当前，不包含后代节点
默认：false

2.删

在js原生DOM中，删除元素必须通过父元素删除
语法：父元素.removeChild(子元素)
注意：
如果不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别：隐藏则还存在，删除则在html中删除节点

3.查

父节点查找
parentNode 属性
返回最近一级的父节点找不到返回null

子元素.parentNode

子节点查找
父元素.children （重点）仅获得所有元素节点,返回的还是一个伪数组
childNodes 获得所有子节点，包括文本节点（空格，换行），注释节点

兄弟节点查找
1.下一个兄弟节点 nextElementSibling 属性
2.上一个兄弟节点 previousElementSibling 属性

1.11 时间对象

时间对象：用来表示时间的对象
作用：可以得到当前系统时间
如何使用：

1.实例化
在代码中发现了new关键字，一般将这个操作称为实例化

2.获得当前的时间：
let  date  =  new   Date()

3.获得指定的时间：
let date  =  new  Date('2022-07-01')

注意：

1.小括号为空，则是得到当前的时间
2.小括号里面写上时间，可以返回指定的时间
时间对象方法

1.12 时间对象方法

1.常用方法

date（方法名，方法名可以是任意的）.getFullyear()
date.getMonth() 获取当月（0-11）从0开始的，如果参数是5月，输出则是4月,记得月份+1
date.getDate() 获取当天日期
date.getDay() 获取星期几 0-6 与month一样 0是周日，周一是1，周六是6
date.getHours 获取小时 0-23
date.getMinutes 获取分钟 0-59
date.getSeconds 获取秒 0-59
利用对象.innerHTML = ‘ ‘ 将时间带入html页面中

1.时间戳

时间戳
不需要new创建对象
简单写法（常用）

let  date1  =  +new   Date();
这里面的+new   Date()    返回的就是总的毫秒数

H5新增的获取总的毫秒数（不需要new创建对象）

con.log(Date.now());

只能得到当前的时间戳，前面两种可以返回指定的时间戳

d = parseInt(总秒数/60/60/24)     计算天数
h = parseInt(总秒数/60/60%24)    计算小时
m = parseInt(总秒数/60%60)      计算分
s = parseInt(总秒数%60)      计算秒
toLocaleString()`方法返回该日期对象的字符串

1.12DOM事件高级

1.事件对象

获取事件对象

事件对象就是一个对象
在事件绑定的回调函数的第一个参数就是事件对象
事件对象一般命名为e,ev,event

事件对象的常用属性 e.事件属性
type 获取当前的事件类型
鼠标事件 e.鼠标事件

clientX/clientY:   
获取光标对于浏览器可见窗口左上角的位置
offsetX/offsetY:    
获取光标相对于DOM元素左上角的位置     <div></div>    就是在这个div左上角的距离
pageX/pageY: 
获取光标相对于文档坐标

键盘事件 e.key

key 用户按下的键盘键的值
例如：e.key==='enter'

2.事件流

捕获阶段 –> 事件目标 –> 冒泡阶段
捕获阶段 从父到子 document ->html ->body ->div
事件捕获：addEventListener第三个参数传入true，代表捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认false
冒泡阶段 从子到父 div -> body -> html -> document
事件冒泡：当一个元素触发事件后，会依次调用所有父级元素的同名事件
阻止事件流
事件对象.stopPropagation()
此方法可以阻断事件流动传播，对于冒泡与捕获都有效
事件对象.preventDefault()
阻止默认行为，比如链接点击不跳转，表单域的跳转
事件委托

事件委托是给父级添加事件 而不是孩子添加事件
事件对象.target.style.color = 'red'
孩子相当于      事件对象.target

1.13网页特效

1.滚动事件和加载事件

滚动事件
事件名 scroll
window.addEventListener('scroll',function(){})
加载事件
load加载事件 事件名 load
window.addEventListener('load',function(){}) 等着整个页面加载完毕才回去执行
使用场景
有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢将scrpt写在head中，这时候直接找DOM元素找不到
DOMContentLoaded加载事件
在html被加载完后去执行，不需要等待css，图片等完全加载
document.addEventListener('DOMContentLoaded',function(){})

2.元素大小和位置

scroll （配合offset使用）
获取宽高（了解）
获取元素内容的宽高（不包含滚动条），返回值不带单位

scrollWidth 
scrollHight

获取位置

获取元素内容向左向上滚出去看不到的距离
scrollLeft和scrollTop
这两个属性是可以修改的
第一步：先做页面滚动事件，给window添加滚动事件
第二步：得到页面滚动距离
document.documentElement    是html标签
document.documentElement.scrollTop  >= sk.offsetTop

offset （配合scroll使用）
自动获取某个盒子到顶部的距离
获取宽高：获取元素盒子的宽高，包括元素自身设置的宽高，padding，border

offsetWidth
offsetHeight

获取位置
获取元素距离自己定位父级元素的左，上距离，如果父亲没有定位就以body为主
offsetLeft和offsetTop
注意是只读属性不能修改

client
获取宽高
获取元素的浏览器可视区部分宽高，不包含滚动条和border等
clientWidth和clientHeight
获取位置

获取左边框和上边框宽度
clientLeft和clientTop   只读属性
resize事件
会在窗口尺寸改变的时候触发事件
检测屏幕宽度
let  w  =  document.documentElement.clientWidth

BOM

Window对象

BOM（浏览器对象模型）

BOM是浏览器对象模型
window是浏览器内置中的全局对象，我们所学的所有Web APIs的知识内容都是基于window对象实现的
window对象包括：document, navigator,location,history,screen
document是实现DOM的基础，他其实是依附于window的属性
注：依附于window对象的所有属性和方法，使用时可以省略window

定时器-延迟函数

语法：setTimeout（回调函数，等待毫秒数）

setTimeout仅仅只执行一次，可以理解为把一段代码延迟执行
清除延迟函数
clearTimeout（） 清除延时函数
1.let timer = setTimeout（回调函数，等待毫秒数）
2.clearTimeout(timer)

递归函数

自己调用自己

js执行机制

同步和异步
同步任务
前一个任务结束，才会执行后一个任务
异步任务
js异步是回调函数实现的
分为以下三种：

普通事件：click，resize等
资源加载：load，error等
定时器：setInterval   setTimeout等

js的执行机制

1.先执行执行栈中的同步任务
2.异步任务放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会依次读取任务队列中的异步任务
结束等待状态，进入执行栈，开始执行

event loop（事件循环）：
1.主线程执行完毕，查询任务队列，取出一个任务，推入主线程处理
2.重复该动作
异步队列中，谁先触发就先进入主线程，就先执行谁

location对象

location对象，它拆分保存了URL地址的各个组成部分
使用方式：
location.属性
location.方法
常用属性

1.href属性获取完整的URL地址，对其赋值时用于地址的跳转
2.search属性获取地址中携带的参数，符号?后面部分
3.hash属性获取地址中的哈希值，符号#后面的部分
4.reload()方法用来刷新当前页面
传入参数true是强制刷新  
默认是false，刷新

navigator对象

该对象下记录了浏览器自身的相关信息
常用属性和方法：
通过userAgent检测浏览器的版本及平台

histroy对象

该对象与浏览器地址栏的操作相对应，如前进，后退，历史记录等
方法和属性：

back()     后退功能
forward()    前进功能
go(参数)     参数是1前进1个页面，-1则是后退一个页面

swiper插件

这个自己去了解一下，后面的框架组件库不需要自己写，自己引用即可

本地存储

localStorage

特性
1.生命周期永久生效，除非手动删除，否则关闭页面也会存在
2.可以多窗口（页面）共享（同一浏览器可以共享）
3.以键值对的形式存储使用
声明 localStorage.setitem('key','value')
存储，获取，删除简单数据类型
存储数据 localStorage.setItem('键','值')
删除数据 localStorage.removeltem('键')
存储，获取，删除复杂数据类型

存储数据
本地只能存储字符串，无法存储复杂数据类型，需要将复杂数据类型转换为JSON字符串，在存储本地

JSON   属性和值都是双引号包含
JSON.stringify（复杂数据类型）
将复杂数据类型转换为JSON字符串，在存储本地
JSON.parse（JSON字符串）
将JSON字符串转换成对象    取出时使用
例如
let obj = {
    uname:'pink',
    age:18,
    address:'北京
}
localStorage.setItem('obj' , JSON.stringify(obj))
获取数据 JSON.parse( localStorage.getItem('键'))

sessionStorage(了解)

特性：

1.生命周期为关闭窗口
2.在同一个页面下数据可共享
3.以键值对的形式存储使用
4.用法与localStorage基本相同

使用方法与localStorage一样

正则表达式

使用场景

1.表单验证：用户名表单只能输入英文字母，数字或者下划线，昵称输入框中可以输入中文（匹配）
2.过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等

语法

第一步：声明变量

方法一：new一个RegExp对象
let  变量名   =   new   RegExp(/表达式/)

方法二：字面量声明
let  变量名  =  /表达式/

第二步：检测

1.变量名.text(要被检测的字符串)
是变量名的变量值被text方法里面的值检测
变量名的变量值是否包含在text方法里面的字符串里面
如果匹配成功，则返回的是一个true，反之返回false

2.变量名.exec(被检测的字符串) 
如果匹配成功，则返回的是一个数组，反之返回null
是变量名的变量值被exec方法里面的值检测
变量名的变量值是否包含在exec方法里面的字符串里面

元字符

普通字符：
大多数字符仅能描述他们本身，这些字符称作普通字符，例如所有的字母
数字，也就是说普通字符只能够匹配字符串中与他们相同的字符

元字符（特殊字符）
是一些具有特殊含义的字符，可以极大的提高了灵活性和强大的匹配能力，比如：规定用户只能输入26个英文字母，普通字符的话abcdefg……但元字符写法[a-z]

边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

用来提示字符所处的位置
^ 表示匹配行首的文本（以谁开始） /^前端/
$ 表示匹配结尾的文本（以谁结尾） /前端$/
如果^ 和 $ 一起使用则是精确定位 /^前端$/

量词 (表示重复次数)

设定某个模式出现的次数

(*) 重复0次或者更多次 /a */
(+) 重复1次或者更多次 /a +/
？重复0次或者1次 /^a ?$/
{n} 重复n次 /^a {次数}$/
{n,} 重复n次或更多次 /^a {次数，}$/
{n,m} 重复n到m次 /^a {次数，}$/
注意：符号两边千万不要出现空格

字符类

[]匹配字符集合
后面是字符串只要包含abc中任意一个字符，都返回true

1.在[] 里面加 - 连字符
表示一个范围
[a-z] 表示a-z取一个
[1-9] 表示大小写都可以取一个
[a-zA-Z] 表示1-9取一个

2.在[] 里面加 ^ 取反符
[ ^1-9] 匹配除去1-9以外的字符

3 . 匹配除换行符以外的任何单个字符

4 .预定义：指的是某些常见模式的简写方式
\d 相当于[0-9]
\D 相当于[ ^ 0-9 ]
\w 相当于[A-Za-z0-9_] 匹配任意字母，数字，下划线_
\W 相当于[ ^A-Za-z0-9_] 匹配除任意字母，数字，下划线以外的字符
\s 相当于[\t\r\n\v\f] 匹配空格（换行符、制表符，空格符等）
\S 相当于[ ^\t\r\n\v\f] 匹配非空格（换行符、制表符，空格符等）的字符

修饰符

/表达式/修饰符
i 正则匹配时，字母不区分大小写 ignore
g 匹配所有满足正则表达式的效果 global

replace 替换符
字符串.replace(/正则表达式/,’替换文本’)

注意点

回流与重绘

html进行结构排版生成DOM树
css进行样式排版生成样式规则
根据DOM树和样式规则生成渲染树
回流：根据渲染树，得到节点的位置大小
重绘：根据计算和获取的信息对页面进行绘制
最后显示在页面

排他思想

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
    let btn = document.querySelectorAll('button')
    for(let i = 0;i < btn.length;i++) {
        btn[i].addEventListener('click',function(){
            for(let j = 0;j < btn.length;j++ ){
                btn[j].className = ''
            }
            btn[i].classList.add('pink')
        })
    } 
</script>

window(BOM)包括

navigator对象
location对象
histroy对象
document对象
screen对象

js运行机制

1）所有的同步任务都在主线程上执行，行成一个执行栈。
2）除了主线程之外，还存在一个任务列队，只要异步任务有了运行结果，就在任务列队中植入一个时间标记。
3）主线程完成所有任务(执行栈清空），就会读取任务列队，先执行微任务队列在执行宏任务队列。
4）重复上面三步。
只要主线程空了，就会读取任务列队，这就是js的运行机制，也被称为 event loop（事件循环）

冷杨威

https://DOMandBOM.github.io/star/star/2023/07207.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源冷杨威 !

JavaScript进阶

Vue配置项

Vue配置项（实例属性）这篇总结主要介绍Vue配置项

2023-07-20 Vue

Vue

WebRTC

WebRTC这篇总结主要介绍一下WebRTC

2023-07-20 Web前端扩展

Web前端扩展

Web APIs

Web APIs

DOM

1.1DOM的认知

1.2DOM获取元素

获取DOM对象

1.3设置/修改DOM元素内容

1.4设置/修改DOM元素属性

1.5定时器-间歇函数

1.6DOM事件基础

1.7高阶函数

1.8环境对象 this

1.9排他编程思想

1.10DOM节点操作

1.增

2.删

3.查

1.11 时间对象

1.12 时间对象方法

1.常用方法

1.时间戳

1.12DOM事件高级

1.事件对象

2.事件流

1.13网页特效

1.滚动事件和加载事件

2.元素大小和位置

BOM

Window对象

BOM（浏览器对象模型）

定时器-延迟函数

递归函数

js执行机制

location对象

navigator对象

histroy对象

swiper插件

本地存储

localStorage

sessionStorage(了解)

正则表达式

使用场景

语法

元字符

边界符 （表示位置，开头和结尾，必须用什么开头，用什么结尾）

量词 (表示重复次数)

字符类

修饰符

注意点

回流与重绘

排他思想

window(BOM)包括

js运行机制

边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）