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树是什么?
- 将HTML文档以树状结构直观的表现出来,我们称之为文档树或DOM树
- 描述页面内容关系的名词
- 文档树直观的体现了标签与标签之间的关系
2.2、DOM对象
- DOM对象是浏览器根据HTML标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到,修改这个对象的属性会自动映射到标签身上
- DOM的核心就是把内容当对象来处理
2.3、document是什么?
- 是DOM里提供的一个对象
- 网页所有内容都在document里面
- 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.样式属性 = 值
注意:
- 修改样式通过style属性引出
- 如果属性有-连接符,需要转换为小驼峰命名法
- 赋值的时候,需要的时候不要忘记加css单位
语法:
对象.className = 值
注意:
- 使用className可以修改多个样式
- className会覆盖以前的类名
语法:
// 追加一个类
对象.classList.add('类名')
// 删除一个类
对象.classList.remove('类名')
// 切换一个类
对象.classList.toggle('类名')
注意:
- classList追加和删除不影响以前类名
3、事件
3.1、事件监听
3.1.1 什么是事件?
事件是在编程时系统内发生的动作或者发生的事情,比如用户在页面中点击某个按钮
3.1.2 什么是事件监听?
就是让程序检测是否有事件发生,一旦有事件触发,就立即调用一个函数做出相应,也称为注册事件。
3.1.3 事件监听三要素?
- 事件源:哪个dom元素被事件触发了,要获取dom元素
- 事件:用什么方式触发,比如鼠标单击click、鼠标经过mouseover等
- 事件调用的函数:要做什么事
3.1、事件类型
事件类型 | 触发方式 | 触发事件 |
---|---|---|
鼠标事件 | 鼠标触发 | click(鼠标点击)、mouseenter(鼠标经过)、mouseleave(鼠标离开) |
焦点事件 | 表单获得光标 | focus(获得焦点)、blur(失去焦点) |
键盘事件 | 键盘触发 | keydown(键盘按下触发)、keyup(键盘抬起触发) |
文本事件 | 表单输入触发 | input用户输入事件 |
4、节点操作
4.1、 DOM节点
4.1.1 什么是DOM节点
- DOM树里每一个内容都称之为节点
4.1.2 DOM节点的分类
- 元素节点:div、span标签
- 属性节点:class、href属性
- 文本节点:标签里的文字
4.2 查找节点
4.2.1 查找父节点
- parentNode属性
- 返回最近一级的父节点找不到返回null
语法:
子元素.parentNode
4.2.2 查找子节点
- childNodes获取所有子节点、包括文本节点(空格、换行)、注释节点等
- children仅获得所有元素节点
4.2.3 查找兄弟节点
- nextElementSibling下一个兄弟节点
- previousElementSibling上一个兄弟节点
4.2、增加节点
4.2.1 创建节点
- 创建一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
- 创建元素节点方法:document.createElement(‘标签名’)
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、阻止默认行为
- 阻止默认行为,比如链接点击不跳转,表单域的跳转
- 语法:e.preventDefault()
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对象
- navigator的数据类型是对象,该对象下记录了浏览器自身的相关属性
- navigator.userAgent获取浏览器版本信息
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
- 生命周期为关闭浏览器窗口
- 在同一个窗口下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage基本相同