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)