1、Web API基本认知
1.1、Web API作用和分类
- 作用：就是使用JS去操作html和浏览器
- 分类：DOM（文档对象模型）、BOM（浏览器对象模型）
1.2、什么是DOM？
文档对象模型（Document Object Model），简称DOM，将所有页面内容表示为可以修改的对象。document对象是页面的主要入口点。我们可以使用它来更改或创建页面上的任何内容。
1.3、什么是BOM？
浏览器对象模型（browser Object Model），简称BOM，表示由浏览器（主机环境）提供的用于处理文档document之外的所有内容的其他对象。
2、DOM文档对象模型
2.1、DOM树是什么？
2.2、DOM对象
2.3、document是什么？
2.4、获取DOM对象
| 语法 | 返回值 |
|---|---|
| document.querySelector(‘css选择器’) | CSS选择器匹配的第一个元素 |
| document.querySelectorAll(‘css选择器’) | CSS选择器匹配的NodeList集合 |
| document.getElementById() | 根基id，获取元素 |
| document.getElementsByTagName() | 根据标签名，获取元素 |
| document.getElementsByClassName() | 根据类名，获取元素 |
2.5、修改DOM元素内容
2.5.1 document.write()
- 只能将文本追加到
</body>前面的位置 - 文本中包含的标签会被解析
2.5.2 innerText属性
2.5.3 innerHTML属性
2.6、修改DOM元素属性
2.6.1 修改元素常用属性
语法：
对象.属性 = 值
2.6.2 修改元素样式属性
语法：
对象.style.样式属性 = 值
注意：
语法：
对象.className = 值
注意：
- 使用className可以修改多个样式
- className会覆盖以前的类名
语法：
// 追加一个类
对象.classList.add('类名')
// 删除一个类
对象.classList.remove('类名')
// 切换一个类
对象.classList.toggle('类名')
注意：
- classList追加和删除不影响以前类名
3、事件
3.1、事件监听
3.1.1 什么是事件？
事件是在编程时系统内发生的动作或者发生的事情，比如用户在页面中点击某个按钮
3.1.2 什么是事件监听？
就是让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出相应，也称为注册事件。
3.1.3 事件监听三要素？
3.1、事件类型
| 事件类型 | 触发方式 | 触发事件 |
|---|---|---|
| 鼠标事件 | 鼠标触发 | click（鼠标点击）、mouseenter（鼠标经过）、mouseleave（鼠标离开） |
| 焦点事件 | 表单获得光标 | focus（获得焦点）、blur（失去焦点） |
| 键盘事件 | 键盘触发 | keydown（键盘按下触发)、keyup（键盘抬起触发） |
| 文本事件 | 表单输入触发 | input用户输入事件 |
4、节点操作
4.1、 DOM节点
4.1.1 什么是DOM节点
4.1.2 DOM节点的分类
4.2 查找节点
4.2.1 查找父节点
- parentNode属性
- 返回最近一级的父节点找不到返回null
语法：
子元素.parentNode
4.2.2 查找子节点
4.2.3 查找兄弟节点
4.2、增加节点
4.2.1 创建节点
4.2.2 追加节点
- 插入到父元素的最后一个子元素：父元素.appendChild(‘要插入的元素’)
- 插入到某个子元素前面：父元素.insertBefore(要插入的元素, 在哪个元素前面)
4.2.3 克隆节点
语法：元素.cloneNode(布尔值)
- 布尔值为true，代表克隆时会包含后代节点一起克隆
- 布尔值为false，代表克隆时不包含后代节点
- 默认为false
4.2.4 删除节点
语法：父元素.removeChild(要删除的元素)
- 如果不存在父子关系则删除不成功
5、重绘和回流
5.1、浏览器是如何进行界面渲染的
- 解析（Parser）HTML，生成DOM树（DOM Tree）
- 解析（Parser）CSS，生成样式规则（Style Rules）
- 根据DOM树和样式规则，生成渲染树（Render Tree）
- 进行布局Layout（回流/重排）：根据生成的渲染树，得到节点的几何信息（位置，大小）
- 进行绘制Painting（重绘）：根据计算和获取的信息进行整个页面的绘制
- display: 展示再页面上
5.2、重绘和回流（重排）
- 当Render Tree中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流
- 由于节点（元素）样式的改变并不会影响它在文档流中的位置和文档布局时，成为重绘
- 重绘不一定引起回流，而回流一定会引起重绘
5.3、导致回流（重排）的操作
6、事件高级
6.1、事件对象
6.1.1 事件对象是什么？
- 事件对象也是个对象，这个对象里有事件触发时的相关信息
6.1.2 事件对象在哪里？
6.1.3 事件对象常用属性
| 属性 | 说明 |
|---|---|
| type | 获取当前的事件类型 |
| clientX/clientY | 获取光标相对于浏览器可见窗口在左上角的位置 |
| offsetX/offsetY | 获取光标相对于当前DOM元素左上角的位置 |
| key | 用户按下的键盘建的值 |
6.1、事件冒泡和事件捕获
事件冒泡：当一个事件发生在一个元素上，他首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序
事件捕获：事件捕获与冒泡恰恰相反，当鼠标点击或触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定事件。
6.2、阻止事件流动
- 因为默认就是冒泡模式的存在，所以容易导致事件影响到父级元素
- 若想把事件限制在当前元素内，就需要阻止事件流动
- 阻止事件流动需要拿到事件对象
- 语法：事件对象.stopPropagation()
- 此方法可以阻断事件流动传播，不过在冒泡阶段有效，捕获阶段也有效
- mouSEOver和mouSEOut会有冒泡效果
- mouseenter和mouseleave没有冒泡效果
6.3、阻止默认行为
6.4、事件委托
- 优点：给父元素加事件可以提高性能
- 原理：事件委托其实是利用事件冒泡的特点
- 实现：事件对象.target可以获得真正触发事件的元素
6.5、滚动事件
语法：
window.addEventListener('scroll', function() {})
6.6、DOMContentLoaded和load区别
- load仅用于检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完之后才会触发load事件
- 当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
7、元素位置和大小
7.1、offset系列
| 属性 | 作用 |
|---|---|
| offsetParent | 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body |
| offsetTop | 返回元素相对带有父元素上方的偏移量 |
| offsetLeft | 返回元素相对带有定位父元素左边框的偏移量 |
| offsetWidth | 返回自身包含border、padding、内容区域的宽度，不带单位 |
| offsetHeight | 返回自身包括border、padding、内容区域的宽度，不带单位 |
7.2、client系列
| 属性 | 作用 |
|---|---|
| clientTop | 返回元素上边框的大小 |
| clientLeft | 返回元素左边框的大小 |
| clientWidth | 返回自身包含padding、内容区域的宽度，不带单位 |
| clientHeight | 返回自身包括padding、内容区域的宽度，不带单位 |
7.3、scroll系列
| 属性 | 作用 |
|---|---|
| scrollTop | 返回被卷去的上侧距离 |
| scrollLeft | 返回被卷去的左侧距离 |
| scrollWidth | 可视宽度+padding |
| scrollHeight | 可视高度+padding |
8、window对象
8.1、BOM
- BOM（browser Object Model）是浏览器对象模型
- window是浏览器内置中的全局对象
- window对象下包含了navigator、location、document、history、screen五个属性
- document是实现DOM的基础，它其实是依附于window的属性
- window对象上的所有属性和方法，使用时都可以省略window
8.2、js执行机制
- 先执行执行栈中的同步任务
- 异步任务放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态进入执行栈开始执行
8.3、location对象
- location的数据类型是对象，它拆分并保存了URL地址的各个组成部分
- location.href获取完整的URL地址，对其赋值时用于地址的跳转
- location.search获取地址中携带的参数符号
?后面部分 - location.hash获取地址中的哈希值，符号
#后面部分 - reload方法用来刷新当前页面，传入参数true时表示强制刷新
8.4、navigator对象
8.5、history对象
- history的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
- history.back()后退
- history.forward()前进
- history.go(参数)前进后退功能参数如果是1前进一个页面，如果是-1后退一个页面
8.6、localStorage
- 生命周期永久生效，除非手动删除，否则关闭页面也会存在
- 可以多个窗口（页面）共享
- 以键值对的形式存储使用
- 本地只能存储字符串，无法存储复杂数据类型，需要将复杂数据类型转换成JSON字符串，在存储到本地
- JSON.stringify()将复杂数据转换成JSON字符串存储本地存储中
- JSON.parse()将JSON字符串转换成对象取出时使用
存储数据：localStorage.setItem(key, value)
获取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
8.7、sessionStorage
原文地址：https://www.jb51.cc/wenti/3282338.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
