目录
目录
一、APIs 概念
DOM：文档对象模型，用来呈现以及与任意HTML或XML文档交互的API
BOM：浏览器对象模型
DOM树：将HTML文档树状结构直观的表现出来
DOM对象：浏览器根据HTML标签生成的js对象
document 对象：DOM提供的一个对象，它提供的属性和方法都是用来访问和操作网页内容的，网页所有的内容都在document里
二、获取DOM对象
1、根据CSS选择器来获取DOM元素
（1）选择匹配的第一个元素
document.querySelector('CSS选择器')
（2）选择匹配的多个元素
document.querySelectorAll('CSS选择器')，返回值是一个对象伪数组：有长度有索引，但是没有pop（）和push（）等方法
只有一个元素，返回值也是一个伪数组，也得用索引号来改变元素内容
2、其他获取DOM元素方法
（1）根据id获取一个元素
document.getElementById('nav')
（2）根据标签获取一类元素
document.getElementsByTagName('div')
（3）根据类名获取元素
document.getElementsByClassName('w')
三、操作元素内容
1、对象.innerText属性
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签
2、对象.inner.HTML属性
将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符串
四、操作元素属性
1、操作元素常用属性
对象.属性 = 值
2、操作元素样式属性
（1）通过style属性操作CSS
对象.style.属性 = 值
遇到属性是多组单词的，采用小驼峰命名法：例如background-color改为backgroundColor
修改样式比较少的情况下有优势，生成的是行内样式表，权重比较高，只有！important的权重比它高
（2）通过操作类名（className）操作CSS
对象.className='类名'
对象以前的类名被覆盖了
可以将类名设置为‘旧类名 新类名’
（3）通过classList操作类控制CSS
切换：有就删除，没有就添加
3、操作表单元素属性
表单.value = '用户名'
表单.type = 'password'
disabled，checked，selected等属性也可以改变
4、自定义属性
以data- 开头的属性
对象.dataset来获取，如果有多个属性，则获取到的是一个对象。通过对象.属性来获取
五、定时器-间歇函数
1、开启定时器
setInterval（函数，间隔时间），函数名不需要加括号
间隔多少时间调用一次函数，间隔时间的单位是ms
2、关闭定时器
let 变量名 = setInterval（函数，间隔时间）：返回值是一个id数字
clearInterval（变量名）
六、事件监听（绑定）
1、事件监听
语法：
元素对象.addEventListener（'事件类型'，要执行的函数）
事件类型一定要加引号
三要素：
（1）事件源：要获取的dom元素
（2）事件类型：用什么方式触发
（3）事件调用的函数：要做什么事
2、事件类型
（1）鼠标事件
click：鼠标点击
mouseenter：鼠标经过
mouseleave：鼠标离开
（2）焦点事件（和表单有关）
focus：获得焦点
blur：失去焦点
（3）键盘事件（键盘触发）
keydown：键盘按下
keyup：键盘弹起
（4）文本事件
input：用户输入事件
3、事件对象
存储了事件触发时的相关信息，比如鼠标点在哪个位置等信息
（1）获取事件对象
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
（2）事件对象常用属性
type：获取当前事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值
4、环境对象
指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
普通函数里this指的是window
谁调用，this就是谁
5、回调函数
如果将函数A作为参数传递给函数B是，我们称函数A为回调函数
七、DOM事件进阶
1、事件流
事件流：事件完整执行过程中的流动路径（捕获：父到子；冒泡：子到父）
（1）事件捕获：从DOM的根元素开始去执行对应的事件
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
（2）事件冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发
（3）阻止冒泡
语法：
阻止默认行为，比如阻止链接的跳转，表单域跳转
语法：
阻断事件流动传播，既能阻止冒泡也能阻止捕获
（4）解绑事件
on事件方式，直接用null覆盖：
addEventListener方式：
匿名函数无法被解绑
（5）鼠标经过事件的区别
mouseover和mouseout，mouseenter和mouseleave
mouseover和mouseout有事件冒泡，
（6）两种注册事件的区别
传统on注册：
①同一个对象，后面注册的事件会覆盖前面注册的事件
②直接使用null覆盖就可以实现事件解绑
③都是冒泡阶段执行的
事件监听注册：
①可以捕获也可以冒泡
②后面注册的同一个事件不会覆盖前面注册的事件
③必须使用removeEventListener解绑
④匿名函数无法被解绑
2、事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，可以提高程序性能
原理：利用事件冒泡的特点
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，触发父元素的事件
实现：事件对象.target.tagName 可以获得真正触发的元素
3、其他事件
（1）页面加载事件
①加载外部资源（如图片，外联CSS和JavaScript等）加载完毕时触发的事件
事件名：load
给window添加load事件
window.addEventListener('load',function() {
}//等待所有资源加载完毕，就回去执行回调函数
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
②当初始的HTML文档被完全加载和解析完成后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMContentLoaded
给document添加
（2）元素滚动事件
事件名：scroll
整个页面滚动：
获取位置：
scrollLeft和scrollTop（属性）
获取被卷去的大小，获取元素内容往左、往上滚出去看不到的距离，这两个值是可读写的
获取html元素的写法：
document.documentElement
document.documentElement.scrollTop
滚动到指定坐标：scrollTo（）
（3）页面尺寸事件
事件名：resize
窗口尺寸改变时触发事件
window.addEventListener（'resize', function（）{
}）
检测屏幕尺寸：
获取元素的可见部分宽高（不包含边框，margin，滚动条等）
clientWidth和clientHeight
4、元素尺寸与位置
获取宽高：
①获取元素的自身宽高，包含元素自身设置的宽高、padding、border
②offsetWidth和offsetHeight
③获取出来的是数值，方便计算
获取位置：
①获取元素距离自己定位父级元素的左、上距离（最近一级带有定位的祖先元素为主）
②offsetLeft和offsetTop 注意是只读属性
③element.getBoundingClientRect（）：返回元素的大小，及其相对于视口的位置，相对于可视区
八、日期对象：用来表示时间的对象
1、实例化
（1）获得当前时间：const date = new Date（）
（2）获得指定时间：const date = new Date('2022-5-1')
2、日期对象方法
3、时间戳
时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，是一种特殊的计量时间的方式
算法：
①将来的时间戳-现在的时间戳 = 剩余时间毫秒数
②剩余时间毫秒数 转换为 剩余时间的年 月 日 时 分 秒 就是 倒计时时间
获取时间戳：
九、节点操作
1、DOM节点
DOM树里每一个内容都称之为节点
节点类型：元素节点、属性节点、文本节点、其他
2、查找节点
（1）父节点查找
parentNode属性，返回最近一级的父节点，找不到返回null
子元素.parentNode
（2）子节点查找
childNodes：获得所有子节点，包括文本节点（空格、换行）、注释节点等
children：仅获得所有元素节点，返回的是一个伪数组，只选择亲孩子
（3）兄弟节点
下一个兄弟节点：nextElementSibling
上一个兄弟节点：previousElementSibling
3、增加节点
（1）创建节点
创建元素节点方法：
（2）追加节点
插入到父元素的最后一个子元素 ：
插入到父元素中某个子元素的前面：
（3）克隆节点
括号内若为true，代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false
4、删除节点
十、M端事件
移动端特有：触屏事件 touch
十一、js插件
学习插件的基本过程：
十二、window对象
1、BOM（浏览器对象模型）
window是一个全局对象
2、定时器-延时函数
3、js执行机制
JavaScript语言的一大特点就是单线程，同一时间只能做一件事
允许JavaScript脚本创建多个线程，出现了同步和异步
同步：程序的执行顺序与任务的排列顺序是一致的，同步的
异步：做这件事的同时可以去处理其他事
同步任务：都在主线程上执行，形成一个执行栈
异步任务：通过回调函数实现的
一般有三种类型：
（1）普通事件：click，resize等
（2）资源加载，如load、error等
（3）定时器
异步任务相关添加到任务队列中
先执行执行栈中的同步任务，异步任务放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）
4、location对象
location是对象，它拆分保存了URL地址的各个组成部分
常用属性和方法：
href属性：获取完整的URL地址，对其赋值时用于地址的跳转
search属性：获取地址中携带的参数，符号？后面部分
hash属性：获取地址中# 后面的值
reload属性：刷新当前页面
5、navigator对象
记录浏览器自身的相关信息
userAgent：检测浏览器的版本及平台
6、history对象
管理历史记录
十三、本地存储
1、本地存储分类
（1）localStorage-把数据存储在浏览器
可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在
特性：可以多窗口（页面）共享（同一浏览器可以共享），以键值对的形式存储使用
语法：
存储数据：
也可以改数据
获取数据：
删除数据：
本地存储只能存储字符串数据类型
（2）sessionStorage
特性：
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
用法跟localStorage基本相同
2、存储复杂数据类型
将复杂数据类型转换为JSON字符串，再存储到本地
语法：JSON.stringify（复杂数据类型）
取：把取出来的字符串转换为对象
语法：JSON.parse(JSON字符串）
十四、数组中的map和join方法
十五、正则表达式
1、介绍
（1）正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象
（2）作用：表单验证（匹配）、过滤敏感词（替换）、字符串中提取想要的部分（提取）
2、语法
（1）定义正则表达式
/ /是字面量
（2）判断是否有符合规则的字符串
test（）：返回的是布尔值
语法：
regobj是定义的规则对象
exec（）：返回的是数组，找不到返回为空
3、元字符
提高的灵活性和强大的匹配功能，比如：[a-z]
（1）边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
如果^和$一起，表示必须是精确匹配
（2）量词（表示重复次数）
设定某个模式出现的次数
逗号左右两侧不能加空格
（3）字符类
（1）[ ]里面加上^表示取反，比如[^a-z]匹配除了小写字母以外的字符，注意要写到中括号里面
（2）. 匹配除换行符之外的任何单个字符
（3）预定义：指的是某些常见模式的简写方式
4、修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配
语法：
（1）i和g
i：是单词ignore的缩写，正则匹配时字母不区分大小写
g：是单词global的缩写，匹配所有满足正则表达式的结果（全局匹配）
（2）替换replace
返回值是一个字符串，只能查找替换掉一个，所以在正则表达式后面加上g，表示全局查找替换，将所有符合的都替换。
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
